网站使用指南：功能、快捷键与操作说明

概述

本网站集博客、知识库与音乐播放器于一体。为了让所有功能都触手可及，我设计了一套完整的键盘快捷键体系和交互模式。本文档涵盖站点的所有功能和操作方式。

一、键盘快捷键

本博客支持键盘操作，让你在不同功能之间无缝切换，无需离开键盘。

全局快捷键

搜索内快捷键

当搜索框打开时：

音乐播放器快捷键

当音乐库面板打开时（点击左下角音乐按钮），以下快捷键生效：

提示：当右键菜单打开时，按 Esc 会先关闭菜单，再按一次才会关闭音乐库。

二、音乐播放器

音乐播放器是本网站功能最丰富的组件，包含三个交互层级。

2.1 FAB 浮动按钮

页面左下角的圆形浮动按钮，显示当前播放状态：

• 音符图标：音乐播放器待命中
• 绿色圆点脉冲：正在播放
• 点击：弹出迷你播放控制面板（再次点击或点其他地方关闭）

2.2 迷你控制面板

点击 FAB 按钮后弹出的紧凑面板：

| 元素 | 功能 | | --------------- | ------------------------- | --- | | 专辑封面 | 显示当前曲目封面 | | 歌曲信息 | 曲目名、艺术家、专辑 | | 进度条 | 可点击/拖拽跳转到指定位置 | | 播放/暂停按钮 | | | | 上一曲 / 下一曲 | | | | 音量滑块 | | | | DSP 指示器 | 显示当前信号处理链路状态 | | 格式标签 | 如 “FLAC · 96kHz · 24bit” |

2.3 音乐库浏览器

点击迷你面板右上角的展开按钮，进入全屏音乐库：

侧边栏导航

排序与筛选

• 搜索框：实时过滤曲目（按标题、艺术家、专辑匹配）
• 排序方式：标题、艺术家、专辑、年份、时长、比特率、格式、最近添加、最多播放
• 随机播放按钮：每个视图右上角的随机播放按钮

专辑详情

点击任意专辑封面进入详情页：

• 大尺寸专辑封面
• 完整曲目列表
• 按碟片编号分组显示（多碟专辑自动分碟）
• 可播放整张专辑或单曲
• 随机播放功能

迷你播放栏

音乐库底部始终显示当前播放曲目的信息条，包含封面、歌曲信息和播放进度。

右键菜单

在任意曲目上右键（或长按移动端），可执行：

• 播放
• 添加到队列
• 查看歌曲详情

2.4 沉浸式全屏播放器

在迷你面板中点击专辑封面，进入全屏沉浸播放模式：

• 背景：当前曲目 + 下一曲目的封面交替淡入淡出背景（毛玻璃模糊效果）
• 大尺寸封面：响应式封面展示
• 频谱可视化：Canvas 实时频谱柱状图
• 播放控制：毛玻璃半透明按钮
• 点击空白区：退出全屏模式

2.5 音频品质

音乐播放器使用 Web Audio API 构建，支持专业的音频信号处理：

1
信号链路：MediaElement → ReplayGain → Headroom(-3dB) → Compressor → Crossfeed → Analyser → Output

格式支持：FLAC、ALAC、WAV、AIFF、WavPack、Monkey’s Audio、TAK、TTA、MP3、AAC、Ogg Vorbis、Opus、Musepack 等 20+ 格式。

品质分级：

DSP 预设（信号处理音效）：

2.6 最近播放与播放历史

音乐播放器自动记录你听过的曲目：

• 最近播放列表保存在浏览器本地存储中
• 过期的曲目（已从音乐库中移除）会自动清理
• 切换设备后历史记录不共享（完全本地化）

三、主题系统

3.1 明暗主题

• 默认跟随系统主题偏好
• 手动切换（Ctrl+D 或设置面板）后，手动设置优先
• 页面间导航保持主题状态不变

3.2 动态色调

在设置面板中可以拖动色相滑块，改变全站的色调：

• 拖动范围 0-360（HSL 色相环）
• 所有 UI 元素实时跟随变化：按钮、链接、卡片、代码块、进度条等
• 基于 OKLCH 色彩空间，色调变化时亮度感知保持均匀

3.3 壁纸模式

在设置面板中开启壁纸模式后：

• 页面背景显示自定义壁纸轮播
• 所有卡片变为毛玻璃半透明效果（backdrop-filter: blur）
• 支持桌面版和移动版分别设置不同的壁纸
• 可在设置面板中调整毛玻璃参数（透明度、模糊度）

四、个性化设置

点击导航栏右侧的齿轮图标或搜索框旁的设置按钮，打开设置面板：

所有设置自动保存在浏览器本地存储中，刷新或重新打开不会丢失。

五、搜索

5.1 静态全文搜索

使用 Pagefind 引擎，在构建时生成索引：

• 支持中文分词
• 搜索结果高亮匹配关键词
• 显示文章标题和内容摘要
• 最多展示 20 条结果

5.2 搜索方式

• Ctrl+K — 快捷键（可在任何页面触发）
• / — 快速搜索（不能在输入框中触发）
• 导航栏搜索图标 — 鼠标点击

六、阅读功能

6.1 浮动目录

桌面端阅读文章时，右侧会出现浮动目录（Floating TOC）：

• 自动从文章标题生成层级目录
• 当前阅读位置高亮
• 点击跳转到对应章节
• 滚动时自动更新当前位置

6.2 页面进度条

页面顶部有一条细线进度条，显示当前页面的阅读进度。滚动到最底部时进度条填满。

6.3 回到顶部

右下角的回到顶部按钮，带环形进度指示器：

• 随着页面向下滚动逐渐出现
• 圆环填充程度 = 页面滚动百分比
• 点击平滑滚动回顶部

6.4 阅读位置恢复

切换页面后再返回，浏览器会自动恢复上次的滚动位置，无需手动寻找。

6.5 图片灯箱

点击文章中的图片可以放大查看：

• 打开：点击图片
• 关闭：点击背景、按 Esc、或点击关闭按钮
• 支持键盘导航

6.6 链接预览卡片

在部分页面中，悬停内部链接会显示目标页面的预览卡片，包含标题和摘要。

七、欢迎页

访问网站首页会看到一个交互式 3D 欢迎页。

7.1 交互方式

7.2 进入博客

• 点击 “开始阅读” 按钮或 GitHub 图标
• 向下滚动（有弹跳圆点提示）
• 页面过渡使用 View Transitions API，有淡入动画

八、文章功能

8.1 提示框

本博客支持 5 种提示框（admonitions），用于突出不同类型的信息：

• :::note — 蓝色信息提示
• :::tip — 绿色建议/技巧
• :::important — 橙色重要信息
• :::caution — 黄色警告
• :::warning — 红色严重警告

8.2 代码块

• 语法高亮：支持所有主流编程语言
• 行号：自动显示
• 复制按钮：悬停时出现在右上角
• 折叠：长代码块可折叠
• 明暗双主题：自动跟随系统主题

8.3 数学公式

使用 LaTeX 语法书写公式，支持 KaTeX 服务端渲染 + MathJax 3 客户端回退：

• 内联公式：$E = mc^2$
• 块级公式：$$\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}$$

8.4 Mermaid 图表

支持流程图、时序图、甘特图等：

• 主题自适应（跟随明暗模式切换）
• 双 CDN 回退链（jsdelivr → unpkg）

8.5 GitHub 仓库卡片

使用 :github[用户名/仓库名] 语法嵌入仓库信息卡片，自动获取 Stars、License、语言等信息。

九、标签与归档

9.1 标签系统

• 每篇文章可以打多个标签
• 标签页面按使用频率排序（标签云）
• 点击标签可筛选该标签下的所有文章
• Top 10 标签作为快速筛选芯片显示在文章列表页

9.2 文章归档

归档页按年份分组展示所有文章：

• 时间线样式（左侧竖线 + 年份徽章）
• 显示统计数字：总文章数、年份范围、最新年份、当年文章数

十、RSS 订阅

本博客提供 RSS 2.0 订阅源，可以使用任意 RSS 阅读器订阅：

• 订阅地址：https://soren-abt.github.io/rss.xml
• 包含文章全文（不是摘要）
• 自动更新（每次构建时重新生成）

十一、小贴士

高效使用建议

1. Ctrl+K 搜索是最快的导航方式 — 记不住某篇文章的位置？直接搜索
2. Ctrl+D 快速切换主题 — 晚上阅读时一键切暗色
3. 音乐播放器可以后台播放 — 浏览文章时音乐不会中断
4. ? 随时查看快捷键 — 忘记快捷键时按问号
5. 页面导航间音乐无缝衔接 — 利用 View Transitions API，不中断播放

浏览器兼容性

• 推荐使用最新版 Chrome、Edge、Firefox 或 Safari
• 需要启用 JavaScript（本站不使用任何跟踪脚本）
• Web Audio API 需要浏览器支持（所有现代浏览器均支持）

本文会随着网站功能的更新而不断补充。如果发现任何问题或有不明确的地方，欢迎通过 GitHub Issues 反馈。