博客新增小功能

为了提升博客的趣味性和交互体验，今天给博客添加了一些小功能。本文记录了这些功能的实现方法，主要通过修改 static/js/custom.js 和相关模板文件实现。

1. 网站运行时间 (Site Running Time)

在页脚显示博客已经安全运行了多久，给访客一种持久运营的信任感。

实现效果：页脚显示 “本站已安全运行 XX 天 XX 小时 XX 分 XX 秒”。

代码片段：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


function runtime() {
    window.setTimeout("runtime()", 1000);
    let startTime = new Date('01/01/2024 00:00:00'); // 修改为你的建站时间
    let endTime = new Date();
    let timeDiff = endTime.getTime() - startTime.getTime();
    // ... 计算天、时、分、秒 ...
    let timeDisplay = document.getElementById("run-time");
    if(timeDisplay) {
        timeDisplay.innerHTML = `本站已安全运行 ${days} 天 ${hours} 小时 ${minutes} 分 ${seconds} 秒`;
    }
}
runtime();

2. 网页标题动态变化 (Dynamic Title)

当用户切换到其他标签页时，网页标题会卖萌；切回来时，又会变回来。为了增加趣味性，设置了随机语录。

实现效果：

离开页面：随机显示 “(つェ⊂) 我藏好了哦~"、“看不见我…” 等。
回到页面：随机显示 “(´∇｀) 被你发现啦~"、"(OwO) 抓到你了” 等。

代码片段：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


const hiddenTitles = ["(つェ⊂) 我藏好了哦~", "看不见我...", "( .•́ _ʖ •̀.) 等你回来", "404 Not Found"];
const visibleTitles = ["(*´∇｀*) 被你发现啦~", "(OwO) 抓到你了", "欢迎回来！", "(HzH) 嘻嘻"];

document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
        document.title = getRandomItem(hiddenTitles);
    } else {
        document.title = getRandomItem(visibleTitles);
        setTimeout(() => { document.title = originTitle; }, 2000);
    }
});

3. 鼠标点击爱心特效 (Click Heart Effect)

点击页面任意位置，会弹出随机颜色的爱心动画，增加点击反馈。

实现原理：监听 click 事件，在鼠标点击坐标处创建一个 div 元素，应用 CSS 动画使其向上浮动并消失。

4. 复制成功提示 (Copy Toast)

当用户复制博客内容时，不再是无声无息，而是弹出一个友好的提示框。

实现效果：屏幕上方弹出黑色半透明提示框：“复制成功！转载请注明出处哦~"。

代码片段：

1
2
3
4
5
6


document.addEventListener('copy', function() {
    const toast = document.createElement('div');
    toast.innerText = '复制成功！转载请注明出处哦~';
    // ... 设置样式和动画 ...
    document.body.appendChild(toast);
});

5. 侧边栏打字机特效 (Typewriter Effect)

让侧边栏的个人简介（Subtitle）像打字机一样逐字显示，比静态文字更有灵动感。

实现原理：

修改 layouts/partials/sidebar/left.html，将副标题内容放入 data-text 属性。
使用 JS 递归函数 typeWriter 逐个字符读取并添加到 innerHTML 中。

6. 全局悬浮音乐播放器 (MetingJS)

在页面左下角添加一个悬浮的音乐播放器，直接同步网易云歌单，无需手动维护歌曲链接。

实现步骤：

在 layouts/partials/head/custom.html 引入 APlayer 的样式：

1

<link rel="stylesheet" href="https://unpkg.com/aplayer@1.10.1/dist/APlayer.min.css" crossorigin="anonymous">

在 layouts/partials/footer/footer.html 引入 APlayer 和 MetingJS 脚本：

1
2


<script src="https://unpkg.com/aplayer@1.10.1/dist/APlayer.min.js" crossorigin="anonymous" defer></script>
<script src="https://unpkg.com/meting@2.0.1/dist/Meting.min.js" crossorigin="anonymous" defer></script>

在 layouts/partials/sidebar/left.html 的末尾添加 MetingJS 标签（开启 fixed="true"）：

1
2
3
4
5
6
7
8
9


<!-- 悬浮音乐播放器 (MetingJS) -->
<meting-js 
    server="netease" 
    type="playlist" 
    id="17556275859"
    fixed="true"
    list-folded="true"
    theme="#2980b9">
</meting-js>

优势：

自动解析：MetingJS 会自动处理网易云音乐的防盗链和真实地址解析。
全局悬浮：播放器固定在左下角，不占用页面布局空间，且随时可控。
实时同步：在网易云 APP 里更新歌单，博客上也会自动更新。

关于音乐中断问题：由于博客是静态网站（多页架构），每次点击链接跳转都会重新加载页面，因此音乐会中断。这是静态网站的特性。

7. 暗色模式滑动开关 (Dark Mode Slider)

将原本单调的暗色模式切换按钮（月亮/太阳图标）升级为更现代的滑动开关样式。

实现效果：

外观：采用圆角胶囊形状，内部包含太阳和月亮图标。
动画：点击切换时，滑块平滑移动，背景色和图标颜色随之渐变。
交互：太阳和月亮图标在激活状态下会有缩放和变色效果（太阳变橙色，月亮变金色）。

实现原理：

HTML 结构：修改 layouts/partials/sidebar/left.html，将原来的简单 li 标签替换为包含轨道、滑块和图标的复杂结构。
CSS 样式：在 assets/scss/custom.scss 中添加样式。利用 :root[data-scheme="dark"] 选择器来区分深色和浅色模式下的样式，通过 transition 属性实现平滑过渡动画。
逻辑保持：保留原有的 colorScheme.ts 逻辑，点击事件依然绑定在父容器上，确保功能不受影响。