feat: leave-event & aplayer

source/_posts/effect-change-title-when-leave.md

@@ -0,0 +1,86 @@
+---
+title: 站点离开提示
+date: 2024-08-13 20:30:34
+categories: 站点特效
+tags:
+#sticky:
+#cover:
+toc: true
+excerpt: "为 Kratos : Rebirth 主题添加失去焦点时调整标签页内容的功能"
+---
+
+## 配置说明
+
+### 引入的新文件
+
+请将下述文件放置于 source 目录中的合适位置，并根据您的需要调整对应的配置参数。在此处我们使用的是 `effects` 目录。
+
+```js leave-event.js
+(() => {
+  // 配置部分
+  const leaveDelay = 30; // 触发事件的延迟，单位为秒
+  const leaveFavicon = null; // 触发事件后的图标路径，设置为 null 表示不替换图标
+  const leaveTitle = "{{{(>_<)}}}哦哟，崩溃啦~"; // 触发事件后的标题
+  const returnTitle = "(*´∇｀*)欸，又好啦~"; // 回归之后的标题
+
+  // 代码部分
+  let originTitle = "";
+  const saveTitle = () => {
+    originTitle = document.title;
+  };
+
+  let inactiveTimeout = null;
+  const siteFavicon = document.querySelector('[rel="icon"]');
+  const originFaviconUrl = siteFavicon.getAttribute("href");
+  document.addEventListener("visibilitychange", (ev) => {
+    if (ev.target.hidden) {
+      // 触发离开事件，开始计时
+      inactiveTimeout = setTimeout(() => {
+        document.title = leaveTitle;
+        if (leaveFavicon) {
+          siteFavicon.setAttribute("href", leaveFavicon);
+        }
+        inactiveTimeout = null;
+      }, leaveDelay * 1000);
+    } else {
+      // 触发回归事件
+      if (inactiveTimeout !== null) {
+        // 还在计时，（假装）无事发生
+        clearTimeout(inactiveTimeout);
+        inactiveTimeout = null;
+      } else {
+        // 回归了，庆祝一下
+        document.title = returnTitle;
+        if (leaveFavicon) {
+          siteFavicon.setAttribute("href", originFaviconUrl);
+        }
+
+        // 稍等一等再把标题改回来
+        setTimeout(() => {
+          document.title = originTitle;
+        }, 2000);
+      }
+    }
+  });
+
+
+  // 保存标题
+  saveTitle();
+  // 在 PJAX 之后再保存标题
+  window.addEventListener('pjax:complete', saveTitle);
+})();
+```
+
+### 更新的配置项
+
+需要更新 `additional_injections` ，**加入**以下内容：
+
+```yml
+additional_injections:
+  after_footer: |
+    <script src="/effects/leave-event.js"></script>
+```
+
+假设您把上述的文件放置在 source 目录的 effect 目录中，且您的站点配置为根目录模式，那么您应当可以通过上述的路径 `/effect/leave-event.js` 访问到对应的文件。如果您使用的是其他配置，您需要对应调整这个路径。
+
+当您配置完成后重启 Hexo ，您应当可以看见效果生效。

source/_posts/other-random-post-cover.md

@@ -105,3 +105,4 @@ additional_injections:
 
 当您配置完成后重启 Hexo ，您应当可以看见使用默认图片的文章图片被自动更换。预祝您使用愉快。
 
+为避免让访客感到疑惑，您还可以修改配置项，使用一张「加载中」的图片作为默认的封面路径。

source/_posts/widget-aplayer.md

@@ -0,0 +1,77 @@
+---
+title: APlayer
+date: 2024-08-13 20:30:34
+categories: 工具挂件
+tags:
+#sticky:
+#cover:
+toc: true
+excerpt: "为 Kratos : Rebirth 主题添加 APlayer 支持"
+---
+
+## 介绍
+
+使用 APlayer 的 [吸底模式](https://aplayer.js.org/#/zh-Hans/?id=%E5%90%B8%E5%BA%95%E6%A8%A1%E5%BC%8F) 。
+
+## 配置说明
+
+### 引入的新文件
+
+请将下述文件放置于 source 目录中的合适位置，并根据您的需要调整对应的配置参数。在此处我们使用的是 `widgets` 目录。
+
+首先是一个调整 footer 的样式文件。它能稍微抬高一点 footer 以放下歌词组件。
+
+```css aplayer.css
+#footer {
+  padding-bottom: 32px;
+}
+```
+
+如果您需要直接使用 APlayer ，您可以这样引入初始化配置文件：
+
+```js aplayer.js
+const ap = new APlayer({
+  container: document.getElementById('aplayer'),
+  fixed: true,
+  audio: [], // 这里加载您的音频配置
+});
+```
+
+如果您需要使用 [MetingJS](https://github.com/metowolf/MetingJS) ，您不需要引入上面这个文件。
+
+### 更新的配置项
+
+需要更新 `additional_injections` ，**加入**以下内容：
+
+```yml
+additional_injections:
+  head: |
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/APlayer.min.css">
+    <link rel="stylesheet" href="/widgets/aplayer.css">
+  after_footer: |
+    <script src="https://unpkg.com/[email protected]/dist/APlayer.min.js"></script>
+```
+
+如果您需要直接使用 APlayer ，您需要引入组件和初始化配置文件：
+
+```yml
+additional_injections:
+  footer: |
+    <div id="aplayer"></div>
+  after_footer: |
+    <script src="/widgets/aplayer.js"></script>
+```
+
+如果您需要使用 MetingJS ，您可以这样引入（请根据您的需要自行调整对应的配置参数）：
+
+```yml
+additional_injections:
+  footer: |
+    <meting-js server="netease" type="playlist" id="60198" fixed="true"></meting-js>
+  after_footer: |
+    <script src="https://unpkg.com/[email protected]/dist/Meting.min.js"></script>
+```
+
+假设您把上述的文件放置在 source 目录的 widgets 目录中，且您的站点配置为根目录模式，那么您应当可以通过上述的两个路径 `/widgets/aplayer.css` 和 `/widgets/aplayer.js` 访问到对应的文件。如果您使用的是其他配置，您需要对应调整这两个路径。
+
+当您配置完成后重启 Hexo ，您应当可以看见站点加载了 APlayer 播放器。预祝您使用愉快。