v1.3.3 Halo Sakura主题菜单增加流式布局&增加动态Title

💟

文章封面来自黑桃喵二十-浊心斯卡蒂

本篇文章主要记录一些博客的小调整和小萌化

菜单DIV增加流水布局

最近在瞎点自己博客的时候发现了一个对于强迫症来说，非常致命的问题！

请看！

并且在不同分辨率下错位表现不同！（下图是网页放大后的表现

OMG 这怎么可以！

强迫症当要让菜单永远居中，且支持不同分辨率的窗口

实现上述效果可以在自定义CSS增加如下内容^^

.site-top .lower {
    left: 1.85%;
}

增加动态Title

什么是动态Title呢，请看<3 ！

test

窗口失焦后，小花变成小爱心~

通常也有博客会卖萌，当窗口失焦后，显示一些不要走QAQ~ 或是要记得回来QAQ~ 之类，总之很萌~

所以如何实现的呢，其实很简单，一种不是很完美（稍后会解释，请先不要复制）的实现如下~

<script type="text/javascript">
    window.onblur = function () {
      document.title = "LKの小站 - 楽園💖"
    };
    window.onfocus = function () {
      document.title = "LKの小站 - 楽園🌸"
    };
</script>

JS直接扔到其他设置里的统计代码里即可，反正都是加些JS丢这里没有问题

一些解释

onblur 事件会在对象失去焦点时发生
onfocus 事件在对象获得焦点时发生

通过对window对象上述函数的调用，即可实现我们想要的动态效果

虽然可以实现，但是请不要复制刚刚的JS，我的文章还没有水完！

如果你以前就好奇这个东西，并耐心问了问度娘，其实可以发现这个别人早就已经水过了，也是同样的JS脚本

当然，在学习别人东西的同时，也需要学会发现问题

为什么上面我写了这是一种不完美的实现方式呢，我们可以做一个测试

<html>

<head>
  <title>LKの小站 - 楽園🌸</title>
</head>

<body>
  <script type="text/javascript">
    window.onblur = function () {
      document.title = "LKの小站 - 楽園💖"
    }
    window.onfocus = function () {
      document.title = "LKの小站 - 楽園🌸"
    };
  </script>
  <script type="text/javascript">
    window.onblur = function () {

    }
    window.onfocus = function () {

    };
  </script>
</body>

</html>

上面的html我们打开后测试就能发现，上面的javascript被下面的覆盖了，我想要的效果就失效了~

test1

实际会有这样的情况吗？

当然会有，当一些外部的JS我们引入后同样也对window失焦聚焦有相对的函数处理的话，这样根据加载顺序，不是我的代码失效就是其他JS的代码失效，真的发生了肯定会摸不着头脑

当然，这种情况不止window对象，通过document对象getElementById方法获取到的任何Element如果函数有冲突对应代码都会造成冲突导致其中一个失效

这种"大BUG"当然需要防患于未然

那么怎么做呢？

下面是改进的写法

<script type="text/javascript">
    window.addEventListener('blur', () => {
      document.title = "LKの小站 - 楽園💖"
    });
    window.addEventListener('focus', () => {
      document.title = "LKの小站 - 楽園🌸"
    });
</script>

实际来做个测试吧~

<html>

<head>
  <title>LKの小站 - 楽園🌸</title>
</head>

<body>
  <table id="outside">
    <tr>
      <td id="t1">one</td>
    </tr>
    <tr>
      <td id="t2">two</td>
    </tr>
  </table>
  <!-- <script type="text/javascript">
    window.onblur = function () {
      document.title = "LKの小站 - 楽園💖"
    }
    window.onfocus = function () {
      document.title = "LKの小站 - 楽園🌸"
    };
  </script> -->
  <script type="text/javascript">
    window.addEventListener('blur', () => {
      document.title = "LKの小站 - 楽園💖"
    })
    window.addEventListener('focus', () => {
      document.title = "LKの小站 - 楽園🌸"
    });
  </script>
  <script type="text/javascript">
    // 改变 t2 的函数
    function modifyText () {
      var t2 = document.getElementById("t2")
      if (t2.firstChild.nodeValue == "three") {
        t2.firstChild.nodeValue = "two"
      } else {
        t2.firstChild.nodeValue = "three"
      }
    }
    window.onblur = function () {
      modifyText()
    }
    window.onfocus = function () {
      modifyText()
    };
  </script>

</body>

</html>

上面的html我们打开后测试就能发现，我们的动态Title功能实现了，而且下面调用同样也是生效的（窗口失去焦点后 two 变成 three 窗户聚焦后three 变成 two ）

test2

为什么呢？这涉及到原生的JS编程中EventTarget.addEventListener()的作用了

来一些官方的wiki ❤️

EventTarget.addEventListener() 方法将指定的监听器注册到 EventTarget 上，当该对象触发指定的事件时，指定的回调函数就会被执行。

事件目标可以是一个文档上的元素 Element,Document和Window或者任何其他支持事件的对象 (比如 XMLHttpRequest)。

addEventListener()的工作原理是将实现EventListener的函数或对象添加到调用它的EventTarget上的指定事件类型的事件侦听器列表中。

语法

target.addEventListener(type, listener, options);
target.addEventListener(type, listener, useCapture);
target.addEventListener(type, listener, useCapture, wantsUntrusted 
    Non-Standard
);  // Gecko/Mozilla only

参数
type

表示监听事件类型的字符串。
listener

当所监听的事件类型触发时，会接收到一个事件通知（实现了 Event 接口的对象）对象。listener 必须是一个实现了 EventListener 接口的对象，或者是一个函数。有关回调本身的详细信息，请参阅事件监听回调

Web API文档的解释肯定比我专业，有兴趣可以查看Web API文档中关于事件监听的章节

下面是我随便拍脑袋得出的一些解释，方便理解

简单来说，通过添加监听的方式，就可以使原本的函数不再相互覆盖，并存储在列表中，触发对应事件后相关函数就会进行串行的调用

通过添加事件监听的方式可以完美避免刚刚说可能会遇到的BUG~

现在可以复制啦，最后添加到博客里，将Title随便改成自己喜欢的样式吧~

前端框架编程虽然很好用，但是原生真的不能丢，越基础越珍贵，不是吗？

Q.E.D.

Hi,LKarrie!

💟

菜单DIV增加流水布局

增加动态Title

SpringBoot Actuator Prometheus 自定义埋点

自托管看板娘API

LKarrie