🎵 音乐胶囊模块使用说明
本仓库提供了一个可集成到 Hexo 主题 liushen 的音乐胶囊播放器模块。模块包含四个主要部分：
- 主题配置文件
- 布局模板文件
- 样式文件
- 前端脚本
本文档将详细介绍它们的放置位置、引用方式和变量配置。
1️⃣ 配置文件（根目录）
文件： _config.liushen.yml
位置： 项目根目录（blog/_config.liushen.yml），不是主题根目录。
该文件用于存放音乐模块的相关配置（如是否启用、播放列表、API 接口等）。 示例（按需调整）：
# 页脚音乐胶囊
capsule:
enable: true
# 歌单 ID / 单曲 ID
id: 13597135963
# 服务商：netease / qq / xiami / kugou / baidu
server: netease
# 类型：playlist / song
type: playlist
meting_api: https://met.example.com/api?server=:server&type=:type&id=:id&r=:r
volume: 0.8
2️⃣ 布局模板文件
文件： music.pug
位置： blog/themes/liushen/layout/includes/third-party/music.pug
该文件用于渲染音乐胶囊播放器 UI，需要在 layout.pug 中手动引入。
在 blog/themes/liushen/layout/includes/layout.pug 底部 添加以下代码（保留现有内容，仅在末尾追加）：
if theme.capsule && theme.capsule.enable
include ./third-party/music.pug
📌 该判断会根据
_config.liushen.yml中的capsule.enable来决定是否加载播放器。
3️⃣ 样式文件
文件： music-capsule.styl
位置： blog/themes/liushen/source/css/__layout/music-capsule.styl
该位置的styl样式表会被自动整合到main.css
💡 样式变量对照表
音乐胶囊使用了一些 CSS 变量，这些变量在亮色与暗色模式下分别定义。
🌞 亮色模式（默认）
/* nav */
--liushen-nav-bg: rgba(255, 255, 255, 0.8);
--liushen-nav-shadow: rgba(133, 133, 133, 0.6) 0px 5px 6px -5px;
/* ai_summary */
--liushen-title-font-color: #0883b7;
--liushen-maskbg: rgba(255, 255, 255, 0.85);
--liushen-ai-bg: conic-gradient(from 1.5708rad at 50% 50%, #d6b300 0%, #42A2FF 54%, #d6b300 100%);
/* card */
--liushen-card-bg: #fff;
--liushen-card-secondbg: #f1f3f8;
--liushen-card-border: 1px solid #e3e8f7;
/* button */
--liushen-button-bg: #f1f3f8;
--liushen-button-hover-bg: $theme-color;
/* text */
--liushen-text: #4c4948;
--liushen-secondtext: #3c3c43cc;
/* snackbar */
--snackbar-bg: rgba(255, 255, 255, 0.809);
--snackbar-text: #4c4948;
--snackbar-border: 1px solid rgba(126, 126, 126, 0.527);
/* menu child */
--menu-child-bg: rgba(255,255,255,0.8);
/* fancybox */
--liushen-fancybox-bg: rgba(255,255,255,0.5);
--liushen-fancybox-button-color: #000000;
🌙 暗色模式
[data-theme='dark'] {
/* nav */
--liushen-nav-bg: rgba(18,18,18,.8);
--liushen-nav-shadow: rgba(133, 133, 133, 0) 0px 5px 6px -5px;
/* ai_summary */
--liushen-maskbg: rgba(0, 0, 0, 0.85);
--liushen-ai-bg: conic-gradient(from 1.5708rad at 50% 50%,rgba(214, 178, 0, 0.46) 0%,rgba(66, 161, 255, 0.53) 54%,rgba(214, 178, 0, 0.49) 100%);
/* card */
--liushen-card-bg: #2d2d2d;
--liushen-card-secondbg: #3e3f41;
--liushen-card-border: 1px solid #42444a;
/* button */
--liushen-button-bg: #30343f;
--liushen-button-hover-bg: $theme-color;
/* text */
--liushen-text: #ffffffb3;
--liushen-secondtext: #a1a2b8;
/* snackbar */
--snackbar-bg: rgba(48, 48, 48, 0.809);
--snackbar-text: #dfdfdf;
--snackbar-border: 1px solid #cfd4dc40;
/* menu child */
--menu-child-bg: rgba(18,18,18,0.8);
/* fancybox */
--liushen-fancybox-bg: rgba(0,0,0,0.5);
--liushen-fancybox-button-color: #ffffff;
}
你可以将这些变量整合到主题的全局变量文件中，或根据配色需求自行调整。
4️⃣ 前端脚本
文件： music.js
位置： 可放在主题的任意 JS 文件中（例如 blog/themes/liushen/source/js/music.js）或合并到 main.js 中。
引入方式一（单独文件）
在主题 layout.pug 的底部或 additional-js.pug 中添加：
script(src='/js/music.js')
引入方式二（合并代码）
将 music.js 中的代码直接复制到 main.js 或其他已加载的脚本文件中。
🔗 集成流程总结
- 将
_config.liushen.yml添加到 项目根目录 并配置capsule.enable: true。 - 将
music.pug放入blog/themes/liushen/layout/includes/third-party/。 - 编辑
layout.pug，在底部添加include ./third-party/music.pug（带条件判断）。 - 将
music-capsule.styl放入blog/themes/liushen/source/css/__layout/。 - 将
music.js放入 JS 目录并在页面加载时引入，或者可以添加到任意js文件中。 - 根据需要修改 CSS 变量配色。