音乐星球页面使用示例

🎵 音乐星球功能简介

Demius 主题的音乐星球功能为您提供了一个优雅的音乐分享和展示方案。基于 MetingJS，支持多个音乐平台，您可以轻松分享来自网易云音乐、QQ音乐、酷狗音乐等平台的歌单、专辑、单曲和歌手作品。

主要特性

🎧 多平台支持：网易云音乐、QQ音乐、酷狗音乐、虾米音乐、百度音乐
📻 多种类型：单曲、播放列表、专辑、歌手、搜索
🎨 卡片展示：精美的卡片式布局，支持自定义徽章颜色
🎵 本地音乐：支持上传本地音乐文件
🎹 在线播放：内置音乐播放器，支持在线播放
📱 响应式设计：完美适配各种设备
🌙 暗色模式：自动适配明暗主题
⚡ 无需配置API：MetingJS 自动处理，无需复杂的 API 配置

🚀 快速开始

1. 创建音乐星球页面

在 content/ 目录下创建 music-planet.md 文件：

---
title: "音乐星球"
slug: music-planet
date: 2025-10-30T12:00:00+08:00
lastmod: 2025-10-30T12:00:00+08:00
type: music-planet
layout: music-planet
description: "不同平台的歌单与专辑分享，支持网易云、QQ音乐等。"
---

2. 配置音乐星球数据

在项目根目录的 data/ 文件夹下创建 music-planet.yaml 文件：

sections:
  - title: "🎧 网易云音乐 · 歌单"
    badge: violet
    items:
      - server: netease
        type: playlist
        id: "4977885420"

3. 访问音乐星球

构建网站后，访问 /music-planet 路径即可查看您的音乐星球页面。

📝 配置详解

分类结构

每个分类（section）包含以下字段：

字段	类型	必填	说明
`title`	string	❌	分类标题（支持 emoji）
`badge`	string	❌	徽章颜色（violet/cyan/gold/pink/blue等）
`items`	array	✅	音乐项目列表

音乐项目数据结构

在线音乐平台（MetingJS）

每个在线音乐项目包含以下字段：

字段	类型	必填	说明
`server`	string	✅	音乐平台（netease/tencent/kugou/xiami/baidu）
`type`	string	✅	类型（song/playlist/album/artist/search）
`id`	string	✅	音乐ID或搜索关键词

本地音乐文件

每个本地音乐项目包含以下字段：

字段	类型	必填	说明
`server`	string	✅	必须为 `local`
`name`	string	✅	歌曲名称
`artist`	string	✅	歌手名称
`url`	string	✅	音乐文件 URL
`cover`	string	❌	封面图片 URL

支持的平台

netease：网易云音乐
tencent：QQ音乐
kugou：酷狗音乐
xiami：虾米音乐
baidu：百度音乐

支持的类型

song：单曲
playlist：播放列表（歌单）
album：专辑
artist：歌手
search：搜索关键词

徽章颜色

violet：紫色
cyan：青色
gold：金色
pink：粉色
blue：蓝色
其他颜色：可根据主题 CSS 自定义

💡 使用示例

示例 1：网易云音乐歌单

sections:
  - title: "🎧 网易云音乐 · 歌单"
    badge: violet
    items:
      - server: netease
        type: playlist
        id: "4977885420"
      
      - server: netease
        type: song
        id: "27583305"  # 单曲示例

示例 2：QQ音乐歌单

sections:
  - title: "🎧 QQ音乐 · 歌单"
    badge: cyan
    items:
      - server: tencent
        type: playlist
        id: "8532242530"
      
      - server: tencent
        type: song
        id: "0039MnYb0qxYhV"  # 单曲MID

示例 3：网易云音乐专辑

sections:
  - title: "💿 网易云音乐 · 专辑"
    badge: gold
    items:
      - server: netease
        type: album
        id: "16937"

示例 4：网易云音乐歌手

sections:
  - title: "👤 网易云音乐 · 歌手精选"
    badge: pink
    items:
      - server: netease
        type: artist
        id: "2118"

示例 5：本地音乐文件

sections:
  - title: "📁 自建本地歌单"
    badge: blue
    items:
      - server: local
        name: "示例音乐"
        artist: "Demius"
        url: "/audio/demo.mp3"
        cover: "/img/default-cover.jpg"

示例 6：混合配置

sections:
  # 网易云音乐分类
  - title: "🎧 网易云音乐 · 歌单"
    badge: violet
    items:
      - server: netease
        type: playlist
        id: "4977885420"
      - server: netease
        type: song
        id: "27583305"

  # QQ音乐分类
  - title: "🎧 QQ音乐 · 歌单"
    badge: cyan
    items:
      - server: tencent
        type: playlist
        id: "8532242530"

  # 专辑分类
  - title: "💿 网易云音乐 · 专辑"
    badge: gold
    items:
      - server: netease
        type: album
        id: "16937"

  # 本地音乐分类
  - title: "📁 自建本地歌单"
    badge: blue
    items:
      - server: local
        name: "示例音乐"
        artist: "Demius"
        url: "/audio/demo.mp3"
        cover: "/img/default-cover.jpg"

🎨 样式特性

卡片布局

网格布局，响应式适配
每个分类显示为一个卡片
支持自定义徽章颜色标识分类

徽章颜色

每个分类卡片顶部有一个彩色徽章，用于标识分类类型：

紫色（violet）：常用于网易云音乐
青色（cyan）：常用于QQ音乐
金色（gold）：常用于专辑
粉色（pink）：常用于歌手
蓝色（blue）：常用于本地音乐

播放器样式

基于 MetingJS 的音乐播放器
支持歌词显示
支持播放列表折叠/展开
支持循环播放、随机播放等模式

📱 响应式支持

音乐星球页面完全支持响应式设计：

桌面端：多列网格布局（2-3列）
平板端：2列网格布局
手机端：单列布局，优化触摸体验

🌙 暗色模式

音乐星球页面自动适配明暗主题：

亮色模式：清新的卡片样式
暗色模式：优雅的深色背景

🔍 如何获取音乐ID

网易云音乐

打开网易云音乐网页版或客户端
找到您要分享的歌单、专辑或单曲
复制链接，URL 中包含的 ID 就是音乐ID
- 歌单：https://music.163.com/#/playlist?id=4977885420 → ID 为 4977885420
- 专辑：https://music.163.com/#/album?id=16937 → ID 为 16937
- 单曲：https://music.163.com/#/song?id=27583305 → ID 为 27583305
- 歌手：https://music.163.com/#/artist?id=2118 → ID 为 2118

QQ音乐

打开QQ音乐网页版或客户端
找到您要分享的歌单、专辑或单曲
复制链接，URL 中包含的 ID 就是音乐ID
- 歌单：https://y.qq.com/n/ryqq/playlist/8532242530 → ID 为 8532242530
- 单曲：https://y.qq.com/n/ryqq/songDetail/0039MnYb0qxYhV → ID 为 0039MnYb0qxYhV

酷狗音乐、虾米音乐、百度音乐

类似地，从相应的网页版或客户端获取音乐 ID。

💡 使用技巧

1. 分类组织

按音乐平台分类（网易云、QQ音乐等）
按类型分类（歌单、专辑、单曲等）
使用 emoji 图标和颜色徽章标识分类

2. 本地音乐

将音乐文件上传到 static/audio/ 目录
使用相对路径引用：/audio/your-song.mp3
提供封面图片提升视觉效果
支持常见的音频格式（MP3、WAV、OGG等）

3. 混合配置

可以在一个分类中混合多个音乐项目
支持不同平台的音乐混合展示
本地音乐和在线音乐可以放在一起

4. 搜索功能

使用 type: search 可以搜索关键词
适用于不确定具体音乐ID的情况
搜索会显示相关结果供选择

🔧 自定义配置

修改页面内容

编辑 content/music-planet.md 文件，可以添加页面描述：

---
title: "音乐星球"
slug: music-planet
date: 2025-10-30T12:00:00+08:00
lastmod: 2025-10-30T12:00:00+08:00
type: music-planet
layout: music-planet
description: "不同平台的歌单与专辑分享，支持网易云、QQ音乐等。"
---

可以在页面下方添加更多介绍文字，支持 Markdown 格式。

在文章中使用音乐播放器

除了音乐星球页面，您也可以在普通文章中使用音乐播放器 shortcode：

# 网易云音乐单曲
{{< music server="netease" type="song" id="27583305" >}}

# QQ音乐歌单
{{< music server="tencent" type="playlist" id="8532242530" >}}

# 本地音乐
{{< music name="歌曲名" artist="歌手" url="/audio/song.mp3" cover="/img/cover.jpg" >}}

📋 完整示例

# data/music-planet.yaml

sections:
  # 网易云音乐歌单
  - title: "🎧 网易云音乐 · 歌单"
    badge: violet
    items:
      - server: netease
        type: playlist
        id: "4977885420"
      - server: netease
        type: song
        id: "27583305"

  # QQ音乐歌单
  - title: "🎧 QQ音乐 · 歌单"
    badge: cyan
    items:
      - server: tencent
        type: playlist
        id: "8532242530"
      - server: tencent
        type: song
        id: "0039MnYb0qxYhV"

  # 网易云音乐专辑
  - title: "💿 网易云音乐 · 专辑"
    badge: gold
    items:
      - server: netease
        type: album
        id: "16937"

  # 网易云音乐歌手
  - title: "👤 网易云音乐 · 歌手精选"
    badge: pink
    items:
      - server: netease
        type: artist
        id: "2118"

  # 本地音乐
  - title: "📁 自建本地歌单"
    badge: blue
    items:
      - server: local
        name: "示例音乐"
        artist: "Demius"
        url: "/audio/demo.mp3"
        cover: "/img/default-cover.jpg"

❓ 常见问题

Q: 如何添加新的音乐分类？

A: 在 data/music-planet.yaml 文件中的 sections 数组下添加新的分类对象。

Q: 如何获取音乐ID？

A: 打开对应音乐平台的网页版或客户端，从链接 URL 中获取音乐 ID。详见"如何获取音乐ID"章节。

Q: 支持哪些音乐平台？

A: 目前支持网易云音乐（netease）、QQ音乐（tencent）、酷狗音乐（kugou）、虾米音乐（xiami）、百度音乐（baidu）。

Q: 如何添加本地音乐？

A: 将音乐文件上传到 static/audio/ 目录，在配置中使用 server: local，并提供 name、artist、url 字段。

Q: 音乐无法播放怎么办？

检查音乐ID是否正确
确认网络连接正常
某些音乐可能因为版权限制无法播放
本地音乐检查文件路径是否正确

Q: 可以在文章中使用音乐播放器吗？

A: 可以，使用 {{< music >}} shortcode 即可在文章中嵌入音乐播放器。详见"在文章中使用音乐播放器"章节。

Q: 如何自定义徽章颜色？

A: 在配置中设置 badge 字段，可以使用预定义的颜色（violet/cyan/gold/pink/blue），或通过自定义 CSS 添加新颜色。

Q: 音乐播放器支持哪些功能？

A: 基于 MetingJS，支持歌词显示、播放列表、循环播放、随机播放、音量控制等功能。

🔗 相关文档

📚 技术说明

MetingJS

音乐星球功能基于 MetingJS 实现，这是一个强大的音乐播放器组件，支持多个音乐平台，无需复杂的 API 配置即可使用。

特性

✅ 无需配置 API
✅ 支持多个音乐平台
✅ 自动获取歌词、封面等信息
✅ 支持歌词滚动显示
✅ 响应式设计
✅ 主题定制

希望这个音乐星球功能能够帮助您更好地分享音乐和歌单！🎵