博客核心功能实现原理记录

一、 音乐播放系统：APlayer 与自动化歌单

左下角的吸底播放器主要基于 hexo-tag-aplayer 插件实现，并通过主题配置将其注入页面。

  • 注入机制：在页面底部注入 APlayer 容器。关键参数包括：
    • data-fixed="true"：使播放器固定在左下角悬浮。
    • no-destroy：配合 PJAX 局部刷新技术，确保在切换页面时音频播放不中断，容器不被销毁。
  • 数据解析：播放器本身不存储音乐，而是依赖 Meting API。它作为一个中间件，根据提供的网易云歌单 ID，实时向音乐平台请求音频直链、封面图和歌词。
  • 自动化更新：为了同步展示个人的“每周听歌排行”，00利用 GitHub Actions 设置了 Cron 定时任务。脚本会每天抓取最新数据，选择播放最多的10首歌放入歌单，从而确保时效性，同步听歌喜好和心情。

二、 右下角终端对话框：指令解析与 AI 交互

右下角的终端窗口是一个通过原生 JavaScript 编写的交互组件。

  • 命令处理系统：内置了一个指令解析器，通过匹配用户输入的字符串来执行不同函数。例如 help 调用指令列表，clear 执行清屏。当输入以 / 开头的指令（如 /ai）时，系统会切换至 AI 模式。
  • AI 流式对话：
    • 后端支撑：调用部署在 Cloudflare Workers 上的 API 接口，后端负责与 AI 大模型（本站使用minimax）进行通信。
    • 流式响应：利用 Web Streams API 获取响应体。前端通过 reader.read() 逐步解析 SSE（Server-Sent Events）格式的数据流，实现 AI 内容的“逐字打印”效果。
  • 上下文保持：会话 ID 存储于浏览器的 localStorage 中，这使得用户在刷新页面或跳转链接后，仍能保持之前的对话语境。

三、 访客墙：基于 Waline 的数据可视化

访客墙功能位于独立页面，其数据核心来源于 Waline 评论系统。

  • 数据聚合与去重：
    • 通过访问 Waline 开放的 API 接口获取特定路径下的评论数据。
    • 由于同一访客可能多次留言，脚本会根据 nick（昵称）进行去重处理，确保每个访客在墙上仅显示一个头像。
    • 对于未设置自定义头像的访客，系统接入了 DiceBear API，通过昵称作为种子生成唯一的风格化头像。
  • 多重初始化策略：由于访客墙对 DOM 渲染依赖较高，为了兼容 PJAX 局部刷新，系统采用了组合式初始化触发机制，同时监听 DOMContentLoaded 和 pjax:complete 事件。