LiuShen / Butterfly-音乐胶囊实现

## 🎵 音乐胶囊模块使用说明 本仓库提供了一个可集成到 Hexo 主题 **liushen** 的音乐胶囊播放器模块。模块包含四个主要部分： * **主题配置文件** * **布局模板文件** * **样式文件** * **前端脚本** 本文档将详细介绍它们的放置位置、引用方式和变量配置。 --- ### 1️⃣ 配置文件（根目录） **文件：** `_config.liushen.yml` **位置：** 项目根目录（`blog/_config.liushen.yml`），**不是主题根目录**。 该文件用于存放音乐模块的相关配置（如是否启用、播放列表、API 接口等）。 示例（按需调整）： ```yaml # 页脚音乐胶囊 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` **底部** 添加以下代码（保留现有内容，仅在末尾追加）： ```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 变量，这些变量在亮色与暗色模式下分别定义。 ##### 🌞 亮色模式（默认） ```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; ``` ##### 🌙 暗色模式 ```css [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` 中添加： ```pug script(src='/js/music.js') ``` #### 引入方式二（合并代码） 将 `music.js` 中的代码直接复制到 `main.js` 或其他已加载的脚本文件中。 --- ### 🔗 集成流程总结 1. 将 `_config.liushen.yml` 添加到 **项目根目录** 并配置 `capsule.enable: true`。 2. 将 `music.pug` 放入 `blog/themes/liushen/layout/includes/third-party/`。 3. 编辑 `layout.pug`，在底部添加 `include ./third-party/music.pug`（带条件判断）。 4. 将 `music-capsule.styl` 放入 `blog/themes/liushen/source/css/__layout/`。 5. 将 `music.js` 放入 JS 目录并在页面加载时引入，或者可以添加到任意js文件中。 6. 根据需要修改 CSS 变量配色。

# 页脚音乐胶囊 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

@keyframes changeright 0%, 50%, 100% transform: rotate(0deg) scale(1.1) box-shadow: 0 0 2px #ffffff00 25%, 75% transform: rotate(90deg) scale(1.1) box-shadow: 0 0 14px #ffffff @keyframes playingShadow 0%, 100% box-shadow: 0 0px 12px -3px #00000000 50% box-shadow: 0 0px 12px 0px var(--default-bg-color) @keyframes lightBar 0%, 100% opacity: 0.1 60% opacity: 0.3 .aplayer.aplayer-narrow .aplayer-body, .aplayer-pic height: 66px width: 66px #nav-music display: flex align-items: center position: fixed z-index: 10000 bottom: 10px left: 10px cursor: pointer transition: all 0.5s, left 0s transform-origin: left bottom box-shadow: var(--liushen-nav-shadow) border-radius: 40px overflow: hidden &:active transform: scale(0.97) &.playing border: var(--liushen-card-border) box-shadow: 0 0px 12px -3px #00000000 animation: playingShadow 5s linear infinite .aplayer.aplayer-withlrc .aplayer-pic box-shadow: 0 0 14px #ffffffa6 transform: rotate(0deg) scale(1.1) border-color: white animation-play-state: running .aplayer-info color: white #nav-music-hoverTips width: 0 .aplayer background: var(--default-bg-color) border: var(--liushen-card-border) backdrop-filter: saturate(180%) blur(20px) transform: translateZ(0) .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played animation-play-state: running &:hover:not(.playing) #nav-music-hoverTips opacity: 1 .aplayer.aplayer-withlrc .aplayer-pic height: 25px width: 25px border-radius: 40px z-index: 1 transition: 0.3s transform: rotate(0deg) scale(1) border: var(--liushen-card-border) animation: changeright 24s linear infinite animation-play-state: paused .aplayer-info height: 100% color: var(--liushen-text) margin: 0 padding: 0 display: flex align-items: center #nav-music-hoverTips color: white background: var(--default-bg-color) width: 100% height: 100% position: absolute top: 0 left: 0 align-items: center justify-content: center display: flex border-radius: 40px opacity: 0 font-size: 12px z-index: 2 transition: 0.3s .aplayer background: var(--liushen-card-bg) border-radius: 60px height: 41px display: flex margin: 0 transition: 0.3s border: var(--liushen-card-border) box-shadow: none .aplayer-notice, .aplayer-miniswitcher, .aplayer-list display: none .aplayer-body position: relative display: flex align-items: center min-width: 180px .aplayer-info .aplayer-music margin: 0 display: flex align-items: center padding: 0 12px 0 8px cursor: pointer z-index: 1 height: 100% .aplayer-title cursor: pointer line-height: 1 display: inline-block white-space: nowrap max-width: 120px overflow: hidden text-overflow: ellipsis transition: 0.3s user-select: none .aplayer-controller position: absolute width: 100% height: 100% top: 0 left: 0 .aplayer-bar-wrap margin: 0 padding: 0 .aplayer-bar height: 100% background: 0 0 .aplayer-loaded display: none .aplayer-played height: 100% opacity: 0.1 background-color: white !important animation: lightBar 5s ease infinite animation-play-state: paused .aplayer-pic pointer-events: none .aplayer-button bottom: 50% right: 50% transform: translate(50%, 50%) margin: 0 transition: 0.3s pointer-events all &:has(.aplayer-button.aplayer-play) animation-play-state: paused transform: rotate(0deg) scale(1) !important margin-left: 8px .aplayer-info .aplayer-controller .aplayer-time, .aplayer-info .aplayer-music .aplayer-author display: none &.aplayer-withlist .aplayer-info border: none .aplayer-lrc width: 0 opacity: 0 transition: 0.3s margin-bottom: -26px p.aplayer-lrc-current color: white border: none min-height: 20px filter: none &:after, &:before display: none p color: #ffffffb3 filter: blur(.8px) @media screen and (min-width: 600px) #nav-music.stretch .aplayer.aplayer-withlrc .aplayer-lrc width: 200px margin-left: 8px opacity: 1 .aplayer-thumb width: 0 !important height: 0 !important

const liuMusic = { musicPlaying: false, isMusicBind: false, musicToggle(isMeting = true) { if (!this.isMusicBind) { this.musicBind(); } const $music = document.querySelector("#nav-music"); const $meting = document.querySelector("meting-js"); const $console = document.getElementById("consoleMusic"); this.musicPlaying = !this.musicPlaying; $music?.classList.toggle("playing", this.musicPlaying); $music?.classList.toggle("stretch", this.musicPlaying); $console?.classList.toggle("on", this.musicPlaying); if (isMeting) { this.musicPlaying ? $meting?.aplayer?.play() : $meting?.aplayer?.pause(); } }, musicBind() { const $music = document.querySelector("#nav-music"); const $name = document.querySelector("#nav-music .aplayer-music"); const $button = document.querySelector("#nav-music .aplayer-button"); $name?.addEventListener("click", () => { $music?.classList.toggle("stretch"); }); $button?.addEventListener("click", () => { this.musicToggle(false); }); this.isMusicBind = true; } };

div.needEndHide#nav-music #nav-music-hoverTips(onclick='liuMusic.musicToggle()')= __('music.hit') meting-js(id=theme.capsule.id server=theme.capsule.server type=theme.capsule.type mutex="true" preload="none" data-lrctype="0" order="random" volume=theme.capsule.volume api=theme.capsule.meting_api)