不改主题源码，为 Hexo 博客做一个音乐时间流页面和首页轮播

前言

这篇文章把我现在这套音乐分享功能完整整理成一篇可复现的记录，目标就是在 不修改主题源码 的前提下，做出一个独立的音乐时间流页面，以及首页音乐轮播入口。

功能点包括：

• 独立音乐时间流页面
• 首页轮播入口
• 直链播放器
• 平台模式播放器
• 同步歌词显示
• 正文赏析区
• 移动端适配
• 暗黑模式适配

整套实现只动了博客根目录下的 templates、scripts、source 和 _config.butterfly.yml，没有改主题源码。

涉及文件

这套功能最终由下面 6 个部分组成：

1. source/_data/music.yml
2. scripts/music-page-generator.js
3. templates/music-page-content.ejs
4. source/js/home-music-entry.js
5. source/css/custom.css
6. _config.butterfly.yml 里的注入配置

更新方式

以后日常更新音乐时，通常只需要维护 source/_data/music.yml 这一份数据文件。

如果只是新增一首歌，流程一般就是：

1. 在 source/_data/music.yml 最前面新增一条记录
2. 执行 npm run build
3. 部署博客

后续补充

这篇文章同步的是当前最新版本实现，额外包含了这些后续修正：

• 首页轮播默认展示前 10 条音乐数据
• 移动端暗黑模式下，首条时间流日期卡片不会再发白
• 移动端点击播放按钮和点击黑胶都可以正常触发播放

完整代码

下面直接放当前项目里的完整代码，不再额外依赖别的文件。

1. 音乐数据文件

文件：source/_data/music.yml

# 音乐时间流数据
# 最新的一条请始终放在最前面
# 后续更新时，复制一个条目并修改字段即可
#
# 字段说明:
# id: 可选。每条记录的唯一标识；不写时会根据 dateLabel + title 自动生成
# dateLabel: 日期主字段，例如 "2026.04.04"
#            左侧日期卡片的 APR / 04 / Saturday 会根据它自动生成
# orderLabel: 时间流序号，例如 "Day 001"
# label: 歌名上方的小标签文案，例如 "TODAY'S PICK"
# title: 歌名
# artist: 歌手 / 艺人名
# intro: 歌名下方的一小段引导文字
# quote: 正文上方的引用句
# coverKicker: 播放卡片里的小标题，通常写 "Now Playing"
# writing.tag: 正文区域的小标签，例如 "今日文字"
# writing.title: 正文区域标题
# writing.paragraphs: 正文段落数组，按顺序往下写
#
# 播放来源二选一:
# 1. 直链模式: 填 audioSrc；audioType 可选，mp3 / m4a 一般会自动识别
# 2. 平台模式: 不填 audioSrc，改填 platform.server / platform.type / platform.id
# 3. 同步歌词: 直链模式下，若不手写 lyrics，构建时会尝试用 title + artist 去 LRCLIB 自动获取
#    - 手写 lyrics 优先级最高
#    - lyricsApi: false 可关闭单条自动获取
#    - lyricsTitle / lyricsArtist / lyricsAlbum / lyricsDuration 可覆盖自动查询条件
#
# 直链模式模板:
# - # id: 可不写；不写会自动生成
#   dateLabel: "2026.04.04"
#   orderLabel: "Day 001"
#   label: "TODAY'S PICK"
#   title: "歌名"
#   artist: "歌手"
#   intro: "这里写一句开场介绍。"
#   quote: "“这里写一句想放在正文上方的话。”"
#   coverKicker: "Now Playing"
#   coverSrc: "/music/cover/example.jpg"
#   audioSrc: "https://example.com/example.mp3"
#   # audioType: "audio/mp4"  # 可选；一般不用填，m4a / mp3 会自动识别
#   # lyricsApi: false       # 可选；关闭该条目的 LRCLIB 自动获取
#   # lyricsTitle: "歌名"     # 可选；覆盖自动查询用歌名
#   # lyricsArtist: "歌手"   # 可选；覆盖自动查询用歌手
#   # lyricsAlbum: "专辑名"  # 可选；提供给 LRCLIB 提高命中率
#   # lyricsDuration: 240    # 可选；歌曲秒数，提供给 LRCLIB 提高命中率
#   # lyrics: |              # 可选；手写同步歌词，使用 LRC 时间标签，优先级高于自动获取
#   #   [00:12.00]第一句歌词
#   #   [00:18.50]第二句歌词
#   writing:
#     tag: "今日文字"
#     title: "这里写正文标题"
#     paragraphs:
#       - "第一段正文。"
#       - "第二段正文。"
#       - "第三段正文。"
#
# 平台模式模板:
# - # id: 可不写；不写会自动生成
#   dateLabel: "2026.04.05"
#   orderLabel: "Day 002"
#   label: "TODAY'S PICK"
#   title: "歌名"
#   artist: "歌手"
#   intro: "这里写一句开场介绍。"
#   quote: "“这里写一句想放在正文上方的话。”"
#   coverKicker: "Now Playing"
#   # coverSrc: "/music/cover/example.jpg"  # 可选；不写时会尝试按 platform 信息自动抓封面
#   platform:
#     server: "netease"   # 平台，可写 netease / tencent 等
#     type: "song"        # 一般填 song；如果以后要接歌单，可改 playlist
#     id: "26321886"      # 平台歌曲 ID
#     # note: "可选：播放器下方补充说明"
#     # api: "可选：自建 Meting API 地址"
#   writing:
#     tag: "今日文字"
#     title: "这里写正文标题"
#     paragraphs:
#       - "第一段正文。"
#       - "第二段正文。"
#       - "第三段正文。"

- dateLabel: 2026.04.06
  orderLabel: Day 005
  label: TODAY'S PICK
  title: お姫様にはなれない
  artist: 『ユイカ』
  intro: 路口的灯刚亮起来时，晚霞已经退成很淡的一层灰粉色，像一句话说到一半，忽然没有继续。就是那几秒钟的停顿，让人想把这首歌轻轻放出来。
  quote: “有些情绪不需要被说得很满，只要在天色暗下来的时候，被轻轻听见就够了。”
  coverKicker: Now Playing
  coverSrc: https://img.520717.xyz/file/1775457877808_cover.jpg
  audioSrc: https://img.520717.xyz/file/1775454494749_01._お姫様にはなれない.mp3
  writing:
    tag: 今日文字
    title: 晚霞退下去之后
    paragraphs:
      - 『ユイカ』的《お姫様にはなれない》有一种很克制的柔软，不急着把情绪摊开，只是顺着旋律慢慢靠近。听进去的时候，会想起傍晚身上还没散尽的余温，和一些并不激烈、却真实停留过的心事。
      - 它并不把轻微感伤写得很重，反而像路灯下那一步短暂的停顿，像准备告别时又迟了一秒开口。那些没说完的话、没来得及解释的表情，被旋律安静地接住了，于是心里那点起伏，也有了可以安放的位置。
      - 等一首歌结束，天色往往已经更深一点，窗边的光也更安静一点。留下来的不是锋利的难过，而是一种很淡的回响，像傍晚退下去之后，空气里还留着一点温度，让人愿意再多停一会儿。
- dateLabel: 2026.04.05
  orderLabel: Day 004
  label: TODAY'S PICK
  title: 3月9日
  artist: レミオロメン
  intro: 今天想分享的是《3月9日》，一首很适合在安静时慢慢听完，也很容易把回忆轻轻带回来的歌。
  quote: “有些旋律不会急着说完情绪，只是在不经意的时候，把想念慢慢放回心里。”
  coverKicker: Now Playing
  platform:
    server: netease
    type: song
    id: "805204"
  writing:
    tag: 今日文字
    title: 把《3月9日》留给今天
    paragraphs:
      - 《3月9日》不是那种一开口就把情绪推到最满的歌，它更像夜里慢慢亮起的一盏灯，让人不知不觉安静下来，也不知不觉想起一些已经走远的时间。旋律很轻，情绪却留得很长。
      - 这首歌最打动人的地方，在于它把温柔和告别写得很轻。那种临近春天的空气感，像傍晚的风从身边经过，带着一点熟悉、一点迟缓，也带着一种舍不得说破的想念。
      - 有些时候我们反复听一首歌，并不是因为它替我们把一切都讲清楚了，而是因为它刚好替那些说不出口的情绪留出了一点位置。《3月9日》就是这样，安静地陪着人，把回忆慢慢翻开，又轻轻合上。
- dateLabel: 2026.04.04
  orderLabel: Day 003
  label: TODAY'S PICK
  title: 夏霞
  artist: あたらよ
  intro: 今天想分享的是《夏霞》，一首很适合在傍晚和夜色交界时慢慢听完的歌。
  quote: “像夏天晚霞退去前最后一点光，轻轻落下来，却把情绪留得很久。”
  coverKicker: Now Playing
  coverSrc: https://img.520717.xyz/file/1775352181317_cove.jpg
  audioSrc: https://img.520717.xyz/file/1775352040317_2._夏霞.mp3
  writing:
    tag: 今日文字
    title: 把晚霞留在耳边
    paragraphs:
      - 《夏霞》最打动人的地方，是它没有急着把情绪一下子推到最满，而是像傍晚的天色一样，慢慢铺开、慢慢落下。あたらよ的声音把那种将亮未暗的余温唱得很轻，却也很长，让人听着听着，就愿意把白天的喧闹暂时放远一点。
      - 这首歌有一种很特别的安静感，不是空白，也不是冷淡，而像站在天色将暗未暗的时候，望着晚霞一点点褪下去时心里生出的那种柔软。它不催促人立刻整理好情绪，只是把一个能安放心事的小角落先留出来。
      - 有时候我们喜欢一首歌，并不是因为它替我们说清了什么，而是因为它刚好保留了那些说不完整的部分。《夏霞》给我的感觉就是这样，它像把傍晚最后一点光留在耳边，让人能够带着一点迟缓的、温热的情绪，慢慢走进夜里。
- dateLabel: 2026.04.03
  orderLabel: Day 002
  label: TODAY'S PICK
  title: 相信 (苏打绿版)
  artist: 苏打绿
  intro: 今天想留下的是《相信 (苏打绿版)》，一首很适合在夜里慢慢听完的歌。
  quote: “有些歌不是为了证明什么，只是在想停一下的时候，刚好递来一点继续相信的力气。”
  coverKicker: Now Playing
  platform:
    server: netease
    type: song
    id: "2023994373"
    note: 先把这一首放进耳机里，再继续往下读今天的文字。
  writing:
    tag: 今日文字
    title: 把一句“相信”留给今天
    paragraphs:
      - 有些歌不会一下子把情绪推到最满，而是先留出一点空隙，让人愿意慢下来，把原本绷着的心一点点放松。《相信》给我的感觉就是这样，像夜里一盏不刺眼的灯，安静，但一直亮着。
      - 苏打绿的版本把这首歌唱得很柔软，也很有韧性。它不是那种高声宣告式的鼓励，更像有人在旁边轻轻说一句“没关系，再往前走一点”，所以越听越容易把白天积下来的疲惫慢慢卸下来。
      - "今天把它放在这里，其实也是想给自己留一句简单的话: 不一定什么时刻都要很坚定，但至少可以先把心安放好，再去相信接下来的路还会慢慢展开。"
- dateLabel: 2026.04.02
  orderLabel: Day 001
  label: TODAY'S PICK
  title: 「僕は...」
  artist: あたらよ
  intro: 今天想分享的是一首很适合安静时单曲循环的歌。
  quote: “有些情绪不必立刻说完，留一点空白，反而更容易在耳边停留。”
  coverKicker: Now Playing
  coverSrc: https://img.520717.xyz/file/1775353438827_223.jpg
  audioSrc: https://img.520717.xyz/file/1775353506006_僕は.mp3
  writing:
    tag: 今日文字
    title: 留给今天的一点注解
    paragraphs:
      - 这首歌最吸引人的地方，是它没有把情绪一下子推到最满，而是保留了一种克制感。曲名里的省略号像一段没有说完的话，也让整首歌多了一层轻轻悬着的余味。
      - 它不是那种第一秒就很炸裂的类型，反而更像会慢慢渗进情绪里的声音。越听越能把节奏放缓一点，让人把注意力从白天的喧闹里抽出来，安静地停一会儿。
      - "有些歌的好听，不在于它给了多明确的答案，而在于它愿意把空白留给听的人自己去填。这首《「僕は...」》给我的感觉就是这样: 不急着解释，不急着铺满，只是把情绪轻轻放在耳边，然后让人带着自己的心事继续听下去。"

2. 生成器脚本

文件：scripts/music-page-generator.js

'use strict'

const https = require('https')
const path = require('path')

const hasText = (value) => typeof value === 'string' && value.trim().length > 0
const LRCLIB_API_BASE = 'https://lrclib.net/api/'
const LYRICS_TIMEOUT_MS = 8000
const LYRICS_REDIRECT_LIMIT = 3
const METING_API_BASE = 'https://api.injahow.cn/meting/api?server=:server&type=:type&id=:id&r=:r'
const HOME_CAROUSEL_LIMIT = 10
const lyricsRequestCache = new Map()
const platformMetadataCache = new Map()

const slugify = (value) =>
  String(value || '')
    .toLowerCase()
    .replace(/['"]/g, '')
    .replace(/[^a-z0-9]+/g, '-')
    .replace(/^-+|-+$/g, '')

const toFiniteNumber = (value) => {
  if (typeof value === 'number' && Number.isFinite(value)) return value
  if (!hasText(value)) return null

  const parsed = Number(value)
  return Number.isFinite(parsed) ? parsed : null
}

const normalizeLookupText = (value) =>
  String(value || '')
    .normalize('NFKC')
    .toLowerCase()
    .replace(/[\s"'`’‘“”()[\]{}<>《》【】\-_.:;!?/\\|,+~@#$%^&*=]+/g, '')
    .trim()

const sanitizeLookupValue = (value) => {
  if (!hasText(value)) return ''

  const rawValue = value.trim()
  const sanitized = rawValue
    .replace(/^[\s"'`’‘“”「『【（(《〈]+/, '')
    .replace(/[\s"'`’‘“”」』】）)》〉]+$/, '')
    .trim()

  return hasText(sanitized) ? sanitized : rawValue
}

const buildApiUrl = (pathname, params) => {
  const url = new URL(pathname, LRCLIB_API_BASE)

  Object.entries(params || {}).forEach(([key, value]) => {
    if (typeof value === 'number' && Number.isFinite(value)) {
      url.searchParams.set(key, String(value))
      return
    }

    if (hasText(value)) {
      url.searchParams.set(key, value.trim())
    }
  })

  return url
}

const requestJson = (url, redirectCount = 0) =>
  new Promise((resolve) => {
    let settled = false
    const finish = (value) => {
      if (settled) return
      settled = true
      resolve(value)
    }

    const request = https.request(
      url,
      {
        method: 'GET',
        headers: {
          Accept: 'application/json',
          'Accept-Encoding': 'identity',
          'User-Agent': 'hexo-music-page/1.0 (+https://lrclib.net/docs)'
        }
      },
      (response) => {
        const statusCode = response.statusCode || 0

        if (statusCode >= 300 && statusCode < 400 && response.headers.location && redirectCount < LYRICS_REDIRECT_LIMIT) {
          response.resume()
          finish(requestJson(new URL(response.headers.location, url), redirectCount + 1))
          return
        }

        if (statusCode < 200 || statusCode >= 300) {
          response.resume()
          finish(null)
          return
        }

        let rawBody = ''
        response.setEncoding('utf8')
        response.on('data', (chunk) => {
          rawBody += chunk
        })
        response.on('end', () => {
          try {
            finish(JSON.parse(rawBody))
          } catch (error) {
            finish(null)
          }
        })
      }
    )

    request.on('error', () => finish(null))
    request.setTimeout(LYRICS_TIMEOUT_MS, () => {
      request.destroy()
      finish(null)
    })
    request.end()
  })

const pickField = (source, keys) => {
  if (!source || typeof source !== 'object') return ''

  for (const key of keys) {
    if (hasText(source[key])) return source[key].trim()
  }

  return ''
}

const getSyncedLyrics = (candidate) => pickField(candidate, ['syncedLyrics', 'synced_lyrics'])

const scoreLyricsCandidate = (query, candidate) => {
  const syncedLyrics = getSyncedLyrics(candidate)
  if (!hasText(syncedLyrics)) return Number.NEGATIVE_INFINITY

  const candidateTitle = normalizeLookupText(pickField(candidate, ['trackName', 'track_name', 'name']))
  const candidateArtist = normalizeLookupText(pickField(candidate, ['artistName', 'artist_name']))
  const candidateAlbum = normalizeLookupText(pickField(candidate, ['albumName', 'album_name']))
  const queryTitle = normalizeLookupText(query.trackName)
  const queryArtist = normalizeLookupText(query.artistName)
  const queryAlbum = normalizeLookupText(query.albumName)
  const candidateDuration = toFiniteNumber(candidate.duration)

  let score = 0

  if (queryTitle && candidateTitle) {
    if (candidateTitle === queryTitle) score += 8
    else if (candidateTitle.includes(queryTitle) || queryTitle.includes(candidateTitle)) score += 4
  }

  if (queryArtist && candidateArtist) {
    if (candidateArtist === queryArtist) score += 7
    else if (candidateArtist.includes(queryArtist) || queryArtist.includes(candidateArtist)) score += 3
  }

  if (queryAlbum && candidateAlbum) {
    if (candidateAlbum === queryAlbum) score += 2
    else if (candidateAlbum.includes(queryAlbum) || queryAlbum.includes(candidateAlbum)) score += 1
  }

  if (Number.isFinite(query.duration) && Number.isFinite(candidateDuration)) {
    const diff = Math.abs(candidateDuration - query.duration)
    if (diff <= 1) score += 4
    else if (diff <= 3) score += 3
    else if (diff <= 5) score += 2
    else if (diff <= 10) score += 1
    else score -= Math.min(4, diff / 15)
  }

  return score
}

const pickBestLyricsCandidate = (query, payload) => {
  if (!payload) return null

  const candidates = Array.isArray(payload) ? payload : [payload]
  let bestCandidate = null
  let bestScore = Number.NEGATIVE_INFINITY

  candidates.forEach((candidate) => {
    const score = scoreLyricsCandidate(query, candidate)
    if (score > bestScore) {
      bestScore = score
      bestCandidate = candidate
    }
  })

  return hasText(getSyncedLyrics(bestCandidate)) ? bestCandidate : null
}

const buildLyricsQuery = (entry) => {
  const trackName = sanitizeLookupValue(hasText(entry.lyricsTitle) ? entry.lyricsTitle : entry.title)
  const artistName = sanitizeLookupValue(hasText(entry.lyricsArtist) ? entry.lyricsArtist : entry.artist)
  const albumName = sanitizeLookupValue(entry.lyricsAlbum)
  const duration = toFiniteNumber(entry.lyricsDuration)

  return { trackName, artistName, albumName, duration }
}

const shouldFetchLyrics = (entry) =>
  !!(
    entry &&
    entry.lyricsApi !== false &&
    !hasText(entry.lyrics) &&
    hasText(entry.audioSrc) &&
    hasText(entry.title) &&
    hasText(entry.artist)
  )

const fetchLyricsFromLrclib = async (query) => {
  const cacheKey = JSON.stringify(query)
  if (lyricsRequestCache.has(cacheKey)) return lyricsRequestCache.get(cacheKey)

  const requestPromise = (async () => {
    const getPayload = await requestJson(
      buildApiUrl('get', {
        track_name: query.trackName,
        artist_name: query.artistName,
        album_name: query.albumName,
        duration: query.duration
      })
    )
    const exactCandidate = pickBestLyricsCandidate(query, getPayload)
    if (exactCandidate) return getSyncedLyrics(exactCandidate)

    const searchPayload = await requestJson(
      buildApiUrl('search', {
        track_name: query.trackName,
        artist_name: query.artistName,
        album_name: query.albumName
      })
    )
    const searchCandidate = pickBestLyricsCandidate(query, searchPayload)
    return searchCandidate ? getSyncedLyrics(searchCandidate) : ''
  })()

  lyricsRequestCache.set(cacheKey, requestPromise)
  return requestPromise
}

const withRemoteLyrics = async (entry) => {
  if (!shouldFetchLyrics(entry)) return entry

  const query = buildLyricsQuery(entry)
  if (!hasText(query.trackName) || !hasText(query.artistName)) return entry

  const lyrics = await fetchLyricsFromLrclib(query)
  if (!hasText(lyrics)) return entry

  return {
    ...entry,
    lyrics,
    lyricsFetchedFrom: 'lrclib'
  }
}

const getPlatformConfig = (entry) => {
  if (!entry || !entry.platform || typeof entry.platform !== 'object') return null

  const { platform } = entry
  const platformId = hasText(platform.id) || typeof platform.id === 'number' ? String(platform.id).trim() : ''
  if (!hasText(platform.server) || !hasText(platform.type) || !platformId) return null

  return {
    server: platform.server.trim(),
    type: platform.type.trim(),
    id: platformId,
    api: hasText(platform.api) ? platform.api.trim() : '',
    auth: hasText(platform.auth) ? platform.auth.trim() : ''
  }
}

const buildPlatformApiUrl = (platformConfig) => {
  const baseUrl = hasText(platformConfig.api) ? platformConfig.api : METING_API_BASE
  const hasTemplateToken = /:(server|type|id|auth|r)\b/.test(baseUrl)

  if (hasTemplateToken) {
    return new URL(
      baseUrl
        .replace(/:server\b/g, encodeURIComponent(platformConfig.server))
        .replace(/:type\b/g, encodeURIComponent(platformConfig.type))
        .replace(/:id\b/g, encodeURIComponent(platformConfig.id))
        .replace(/:auth\b/g, encodeURIComponent(platformConfig.auth || ''))
        .replace(/:r\b/g, String(Math.random()))
    )
  }

  const url = new URL(baseUrl)
  url.searchParams.set('server', platformConfig.server)
  url.searchParams.set('type', platformConfig.type)
  url.searchParams.set('id', platformConfig.id)
  if (hasText(platformConfig.auth)) url.searchParams.set('auth', platformConfig.auth)
  url.searchParams.set('r', String(Math.random()))
  return url
}

const pickPlatformCover = (payload) => {
  if (!payload) return ''

  const candidates = Array.isArray(payload) ? payload : [payload]
  for (const candidate of candidates) {
    const cover = pickField(candidate, ['pic', 'cover', 'image', 'artwork'])
    if (hasText(cover)) return cover
  }

  return ''
}

const fetchPlatformCover = async (platformConfig) => {
  const cacheKey = JSON.stringify(platformConfig)
  if (platformMetadataCache.has(cacheKey)) return platformMetadataCache.get(cacheKey)

  const requestPromise = (async () => {
    const payload = await requestJson(buildPlatformApiUrl(platformConfig))
    return pickPlatformCover(payload)
  })()

  platformMetadataCache.set(cacheKey, requestPromise)
  return requestPromise
}

const withPlatformCover = async (entry) => {
  if (hasText(entry.coverSrc)) return entry

  const platformConfig = getPlatformConfig(entry)
  if (!platformConfig) return entry

  const coverSrc = await fetchPlatformCover(platformConfig)
  if (!hasText(coverSrc)) return entry

  return {
    ...entry,
    coverSrc
  }
}

const parseDateLabel = (value) => {
  if (!hasText(value)) return null

  const match = value.trim().match(/^(\d{4})[./-](\d{1,2})[./-](\d{1,2})$/)
  if (!match) return null

  const year = Number(match[1])
  const month = Number(match[2])
  const day = Number(match[3])
  const date = new Date(Date.UTC(year, month - 1, day))

  if (
    Number.isNaN(date.getTime()) ||
    date.getUTCFullYear() !== year ||
    date.getUTCMonth() !== month - 1 ||
    date.getUTCDate() !== day
  ) {
    return null
  }

  return date
}

const fillId = (entry, index) => {
  if (hasText(entry.id)) return entry

  const datePart = hasText(entry.dateLabel) ? entry.dateLabel.replace(/[^\d]/g, '') : `entry${index + 1}`
  const titlePart = slugify(entry.title)
  const fallbackTitle = hasText(titlePart) ? titlePart : `item${index + 1}`

  return {
    ...entry,
    id: `day-${datePart}-${fallbackTitle}`
  }
}

const fillDateParts = (entry) => {
  const date = parseDateLabel(entry.dateLabel)
  if (!date) return entry

  const month = new Intl.DateTimeFormat('en-US', { month: 'short', timeZone: 'UTC' })
    .format(date)
    .toUpperCase()
  const day = String(date.getUTCDate()).padStart(2, '0')
  const weekday = new Intl.DateTimeFormat('en-US', { weekday: 'long', timeZone: 'UTC' }).format(date)

  return {
    ...entry,
    month: hasText(entry.month) ? entry.month : month,
    day: hasText(entry.day) ? entry.day : day,
    weekday: hasText(entry.weekday) ? entry.weekday : weekday
  }
}

const buildHomeCarouselItems = (entries) =>
  entries.slice(0, HOME_CAROUSEL_LIMIT).map((entry, index) => ({
    id: entry.id,
    dateLabel: hasText(entry.dateLabel) ? entry.dateLabel : '',
    orderLabel: hasText(entry.orderLabel) ? entry.orderLabel : `Day ${String(index + 1).padStart(3, '0')}`,
    label: hasText(entry.label) ? entry.label : 'MUSIC DIARY',
    title: hasText(entry.title) ? entry.title : '未命名歌曲',
    artist: hasText(entry.artist) ? entry.artist : '',
    intro: hasText(entry.intro) ? entry.intro : '',
    coverSrc: hasText(entry.coverSrc) ? entry.coverSrc : '',
    platform: getPlatformConfig(entry),
    linkPath: `music/#${entry.id}`
  }))

hexo.extend.generator.register('music-page', async function (locals) {
  const siteData =
    (hexo.locals && typeof hexo.locals.get === 'function' && hexo.locals.get('data')) ||
    (locals && typeof locals.get === 'function' && locals.get('data')) ||
    (locals && typeof locals.toObject === 'function' && (locals.toObject().data || {})) ||
    (locals && typeof locals === 'object' && (locals.data || {})) ||
    {}
  const rawEntries = Array.isArray(siteData.music)
    ? siteData.music.map((entry, index) => fillDateParts(fillId(entry, index)))
    : []
  const musicEntries = await Promise.all(
    rawEntries.map(async (entry) => withRemoteLyrics(await withPlatformCover(entry)))
  )
  const templatePath = path.join(hexo.base_dir, 'templates', 'music-page-content.ejs')
  const carouselItems = buildHomeCarouselItems(musicEntries)

  const content = hexo.render.renderSync({ path: templatePath }, { musicEntries })
  const carouselPayload = JSON.stringify(
    {
      generatedAt: new Date().toISOString(),
      items: carouselItems
    },
    null,
    2
  )

  return [
    {
      path: 'music/index.html',
      layout: ['page'],
      data: {
        title: '音乐分享',
        description: '每日分享一首最近反复回放的歌，再留下一点属于当天的听后感。',
        top_img: false,
        aside: false,
        content
      }
    },
    {
      path: 'music/home-carousel.json',
      data: carouselPayload
    }
  ]
})

3. 音乐页面模板

文件：templates/music-page-content.ejs

<%
const latestEntry = musicEntries[0] || null
const hasText = (value) => typeof value === 'string' && value.trim().length > 0
const escapeCssUrl = (value) =>
  encodeURI(String(value || ''))
    .replace(/'/g, '%27')
    .replace(/\(/g, '%28')
    .replace(/\)/g, '%29')
const parseLyrics = (lyrics) => {
  if (!hasText(lyrics)) return []

  return lyrics
    .split(/\r?\n/)
    .flatMap((line) => {
      const matches = [...line.matchAll(/\[(\d{2}):(\d{2})(?:\.(\d{1,3}))?\]/g)]
      const text = line.replace(/\[(\d{2}):(\d{2})(?:\.(\d{1,3}))?\]/g, '').trim()
      if (!matches.length || !text) return []

      return matches.map((match) => {
        const minutes = Number(match[1])
        const seconds = Number(match[2])
        const fractionRaw = match[3] || '0'
        const fraction = Number(`0.${fractionRaw.padEnd(3, '0')}`)
        const time = minutes * 60 + seconds + fraction

        return {
          time,
          label: `${match[1]}:${match[2]}.${fractionRaw}`,
          text
        }
      })
    })
    .sort((a, b) => a.time - b.time)
}
const getAudioMime = (src, audioType) => {
  if (hasText(audioType)) return audioType
  if (!hasText(src)) return 'audio/mpeg'

  if (/\.m4a([?#].*)?$/i.test(src)) return 'audio/mp4'
  if (/\.aac([?#].*)?$/i.test(src)) return 'audio/aac'
  if (/\.ogg([?#].*)?$/i.test(src)) return 'audio/ogg'
  if (/\.wav([?#].*)?$/i.test(src)) return 'audio/wav'
  if (/\.flac([?#].*)?$/i.test(src)) return 'audio/flac'

  return 'audio/mpeg'
}
%>

<div class="music-daily-page">
  <section class="music-daily-hero">
    <div class="music-daily-intro">
      <span class="music-daily-kicker">Daily Music</span>
      <h1>把每天反复回放的一首歌，写成一条会继续向下生长的时间流。</h1>
      <p>把某一天反复回放的一首歌留在这里，也把那一刻的情绪和听后感一起存档。时间慢慢往前走，这一页也会像一册关于声音的日记，安静地继续写下去。</p>
    </div>
    <div class="music-daily-badge">
      <span>Latest Day</span>
      <strong><%= latestEntry ? latestEntry.dateLabel : '尚未更新' %></strong>
      <small><%= musicEntries.length %> 篇记录</small>
    </div>
  </section>

  <section class="music-stream">
    <% if (!musicEntries.length) { %>
      <article class="music-daily-entry music-daily-empty">
        <span class="music-daily-label">EMPTY</span>
        <h2>这里还没有新的音乐记录</h2>
        <p>去 <code>source/_data/music.yml</code> 新增第一条数据后，这个页面就会自动生成时间流。</p>
      </article>
    <% } %>

    <% musicEntries.forEach((entry, index) => { %>
      <% const hasDirectAudio = hasText(entry.audioSrc) %>
      <% const lyricLines = parseLyrics(entry.lyrics) %>
      <% const hasLyrics = lyricLines.length > 0 %>
      <% const platform = entry.platform && typeof entry.platform === 'object' ? entry.platform : null %>
      <% const hasPlatformAudio = !!(platform && hasText(platform.server) && hasText(platform.type) && (hasText(platform.id) || typeof platform.id === 'number')) %>
      <% const playerMode = hasDirectAudio ? 'direct' : hasPlatformAudio ? 'platform' : 'empty' %>
      <% const audioMime = getAudioMime(entry.audioSrc, entry.audioType) %>
      <% const platformTheme = hasText(platform && platform.theme) ? platform.theme : '#8c593b' %>
      <% const platformAutoplay = platform && platform.autoplay === true ? 'true' : 'false' %>
      <% const platformApi = hasText(platform && platform.api) ? platform.api : '' %>
      <% const platformAuth = hasText(platform && platform.auth) ? platform.auth : '' %>
      <% const platformNote = hasText(platform && platform.note) ? platform.note : '' %>
      <article id="<%= entry.id %>" class="music-stream-item <%= index === 0 ? 'is-current' : '' %>">
        <div class="music-stream-axis">
          <div class="music-stream-date">
            <span class="music-stream-month"><%= entry.month %></span>
            <strong><%= entry.day %></strong>
            <small><%= entry.weekday %></small>
          </div>
          <span class="music-stream-marker" aria-hidden="true"></span>
          <span class="music-stream-order"><%= entry.orderLabel %></span>
        </div>

        <div class="music-stream-body">
          <article class="music-daily-entry">
            <div class="music-daily-entry-head">
              <div>
                <span class="music-daily-label"><%= entry.label %></span>
                <h2><%= entry.title %></h2>
                <p><%= entry.intro %></p>
              </div>
            </div>

            <div class="music-daily-entry-main">
              <% if (playerMode === 'direct') { %>
                <div
                  class="music-daily-cover"
                  data-daily-player
                  data-player-mode="direct"
                  style="<%= hasText(entry.coverSrc) ? `--music-cover-image: url('${escapeCssUrl(entry.coverSrc)}');` : '' %>">
                  <audio class="music-daily-audio" preload="metadata">
                    <source src="<%= entry.audioSrc %>" type="<%= audioMime %>">
                    你的浏览器暂不支持音频播放。
                  </audio>
                  <% if (hasLyrics) { %>
                    <script type="application/json" data-player-lyrics-source><%- JSON.stringify(lyricLines) %></script>
                  <% } %>
                  <button class="music-daily-vinyl-trigger" type="button" data-player-toggle aria-label="播放 <%= entry.title %>">
                    <div class="music-daily-art-stack">
                      <div class="music-daily-vinyl">
                        <div class="music-daily-artwork" role="img" aria-label="<%= `${entry.title} 封面` %>">
                          <img
                            class="music-daily-artwork-image"
                            src="<%= entry.coverSrc %>"
                            alt="<%= `${entry.title} 封面` %>"
                            loading="eager"
                            decoding="async"
                            referrerpolicy="no-referrer"
                          >
                          <span class="music-daily-artwork-overlay" aria-hidden="true"></span>
                          <span class="music-daily-artwork-outline" aria-hidden="true"></span>
                        </div>
                      </div>
                      <span class="music-daily-vinyl-badge" data-player-icon>
                        <i class="fa-solid fa-play" aria-hidden="true"></i>
                      </span>
                    </div>
                  </button>
                  <div class="music-daily-cover-copy">
                    <span><%= entry.coverKicker %></span>
                    <strong><%= entry.title %></strong>
                    <small><%= entry.artist %></small>
                    <% if (hasLyrics) { %>
                      <em class="music-daily-cover-lyric is-placeholder" data-player-lyric></em>
                    <% } %>
                    <em class="music-daily-cover-status" data-player-status aria-hidden="true"></em>
                  </div>
                </div>
              <% } else if (playerMode === 'platform') { %>
                <div class="music-daily-cover music-daily-cover--platform" data-player-mode="platform">
                  <div class="music-daily-platform-meta">
                    <span><%= entry.coverKicker %></span>
                    <strong><%= entry.title %></strong>
                    <small><%= entry.artist %></small>
                  </div>
                  <div class="music-daily-platform-player" data-platform-player>
                    <div
                      class="aplayer music-daily-platform-aplayer"
                      data-id="<%= platform.id %>"
                      data-server="<%= platform.server %>"
                      data-type="<%= platform.type %>"
                      data-theme="<%= platformTheme %>"
                      data-mutex="true"
                      data-preload="none"
                      data-autoplay="<%= platformAutoplay %>"
                      data-list-folded="true"
                      data-list-max-height="220px"
                      <% if (platformApi) { %>data-api="<%= platformApi %>"<% } %>
                      <% if (platformAuth) { %>data-auth="<%= platformAuth %>"<% } %>>
                    </div>
                  </div>
                  <% if (hasText(platformNote)) { %>
                    <em class="music-daily-cover-status music-daily-cover-status--platform"><%= platformNote %></em>
                  <% } %>
                </div>
              <% } else { %>
                <div class="music-daily-cover music-daily-cover--empty">
                  <div class="music-daily-platform-meta">
                    <span><%= entry.coverKicker %></span>
                    <strong><%= entry.title %></strong>
                    <small><%= entry.artist %></small>
                  </div>
                  <em class="music-daily-cover-status music-daily-cover-status--platform">这条记录暂时还没有可播放的音源。</em>
                </div>
              <% } %>
            </div>

            <section class="music-daily-writing">
              <p class="music-daily-quote"><%= entry.quote %></p>
              <article class="music-daily-writing-article">
                <span class="music-daily-card-tag"><%= entry.writing.tag %></span>
                <h3><%= entry.writing.title %></h3>
                <% entry.writing.paragraphs.forEach((paragraph) => { %>
                  <p><%= paragraph %></p>
                <% }) %>
              </article>
            </section>
          </article>
        </div>
      </article>
    <% }) %>

    <% if (musicEntries.length) { %>
      <div class="music-stream-tail">
        <span>Time Flow Continues</span>
        <p>下一首歌，下一天，再往下补一条就好。</p>
      </div>
    <% } %>
  </section>
</div>

<script data-pjax>
  (() => {
    const clamp = (value, min, max) => Math.min(max, Math.max(min, value))

    const formatTime = (time) => {
      if (!Number.isFinite(time) || time < 0) return '--:--'
      const minutes = Math.floor(time / 60)
      const seconds = Math.floor(time % 60)
      return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`
    }

    const rgbToHsl = (r, g, b) => {
      const red = r / 255
      const green = g / 255
      const blue = b / 255
      const max = Math.max(red, green, blue)
      const min = Math.min(red, green, blue)
      const lightness = (max + min) / 2
      const delta = max - min

      if (!delta) return [0, 0, lightness]

      const saturation = lightness > 0.5 ? delta / (2 - max - min) : delta / (max + min)
      let hue = 0

      switch (max) {
        case red:
          hue = (green - blue) / delta + (green < blue ? 6 : 0)
          break
        case green:
          hue = (blue - red) / delta + 2
          break
        default:
          hue = (red - green) / delta + 4
      }

      return [hue * 60, saturation, lightness]
    }

    const hslToRgb = (h, s, l) => {
      const hue = ((h % 360) + 360) % 360
      const chroma = (1 - Math.abs(2 * l - 1)) * s
      const segment = hue / 60
      const x = chroma * (1 - Math.abs((segment % 2) - 1))
      let red = 0
      let green = 0
      let blue = 0

      if (segment >= 0 && segment < 1) {
        red = chroma
        green = x
      } else if (segment < 2) {
        red = x
        green = chroma
      } else if (segment < 3) {
        green = chroma
        blue = x
      } else if (segment < 4) {
        green = x
        blue = chroma
      } else if (segment < 5) {
        red = x
        blue = chroma
      } else {
        red = chroma
        blue = x
      }

      const match = l - chroma / 2
      return [red + match, green + match, blue + match].map((channel) => Math.round(channel * 255))
    }

    const toRgba = (rgb, alpha) => `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${alpha})`

    const extractDominantColor = (image) => {
      if (!image || !image.naturalWidth || !image.naturalHeight) return null

      const size = 36
      const canvas = document.createElement('canvas')
      canvas.width = size
      canvas.height = size

      const context = canvas.getContext('2d', { willReadFrequently: true })
      if (!context) return null

      context.drawImage(image, 0, 0, size, size)

      let pixels
      try {
        pixels = context.getImageData(0, 0, size, size).data
      } catch (error) {
        return null
      }

      const buckets = new Map()

      for (let index = 0; index < pixels.length; index += 16) {
        const red = pixels[index]
        const green = pixels[index + 1]
        const blue = pixels[index + 2]
        const alpha = pixels[index + 3]
        if (alpha < 140) continue

        const max = Math.max(red, green, blue)
        const min = Math.min(red, green, blue)
        const saturation = max === 0 ? 0 : (max - min) / max
        const brightness = (red * 299 + green * 587 + blue * 114) / 1000
        if (brightness < 18 || brightness > 245) continue

        const bucketRed = Math.round(red / 24) * 24
        const bucketGreen = Math.round(green / 24) * 24
        const bucketBlue = Math.round(blue / 24) * 24
        const key = `${bucketRed},${bucketGreen},${bucketBlue}`
        const weight = 1 + saturation * 2.2 + (1 - Math.abs(brightness - 132) / 132) * 0.6
        const entry = buckets.get(key) || { score: 0, totalRed: 0, totalGreen: 0, totalBlue: 0, count: 0 }

        entry.score += weight
        entry.totalRed += red * weight
        entry.totalGreen += green * weight
        entry.totalBlue += blue * weight
        entry.count += weight
        buckets.set(key, entry)
      }

      let best = null
      buckets.forEach((entry) => {
        if (!best || entry.score > best.score) best = entry
      })

      if (!best || !best.count) return null

      return [
        Math.round(best.totalRed / best.count),
        Math.round(best.totalGreen / best.count),
        Math.round(best.totalBlue / best.count)
      ]
    }

    const applyCoverPalette = (cover, rgb) => {
      if (!cover || !Array.isArray(rgb)) return

      const [hue, saturation, lightness] = rgbToHsl(rgb[0], rgb[1], rgb[2])
      const bgStart = hslToRgb(hue, clamp(saturation * 0.72 + 0.08, 0.18, 0.76), clamp(lightness * 0.4, 0.16, 0.32))
      const bgEnd = hslToRgb(hue + 12, clamp(saturation * 0.64 + 0.08, 0.18, 0.72), clamp(lightness * 0.58, 0.26, 0.46))
      const glow = hslToRgb(hue - 8, clamp(saturation * 0.9 + 0.04, 0.18, 0.84), clamp(lightness * 0.86, 0.34, 0.64))
      const panel = hslToRgb(hue, clamp(saturation * 0.38 + 0.04, 0.08, 0.42), clamp(lightness * 0.52, 0.22, 0.42))
      const badgeStart = hslToRgb(hue, clamp(saturation * 0.9 + 0.08, 0.24, 0.88), clamp(lightness * 0.84, 0.34, 0.56))
      const badgeEnd = hslToRgb(hue + 18, clamp(saturation * 0.76 + 0.06, 0.22, 0.82), clamp(lightness * 0.96, 0.42, 0.66))

      cover.style.setProperty('--music-cover-bg-start', toRgba(bgStart, 0.96))
      cover.style.setProperty('--music-cover-bg-end', toRgba(bgEnd, 0.9))
      cover.style.setProperty('--music-cover-glow', toRgba(glow, 0.42))
      cover.style.setProperty('--music-cover-panel', toRgba(panel, 0.22))
      cover.style.setProperty('--music-cover-panel-border', toRgba(glow, 0.18))
      cover.style.setProperty('--music-cover-badge-start', `rgb(${badgeStart[0]}, ${badgeStart[1]}, ${badgeStart[2]})`)
      cover.style.setProperty('--music-cover-badge-end', `rgb(${badgeEnd[0]}, ${badgeEnd[1]}, ${badgeEnd[2]})`)
      cover.style.setProperty('--music-cover-badge-shadow', toRgba(bgStart, 0.34))
    }

    const loadPaletteImage = (src) => new Promise((resolve, reject) => {
      if (!src) {
        reject(new Error('missing image src'))
        return
      }

      const image = new Image()
      image.crossOrigin = 'anonymous'
      image.decoding = 'async'
      image.referrerPolicy = 'no-referrer'
      image.onload = () => resolve(image)
      image.onerror = () => reject(new Error('palette image load failed'))
      image.src = src
    })

    const syncCoverPalette = async (cover, artworkImage) => {
      if (!cover || !artworkImage || cover.dataset.paletteBound === 'true') return
      cover.dataset.paletteBound = 'true'

      const paint = async () => {
        const inlineColor = extractDominantColor(artworkImage)
        if (inlineColor) {
          applyCoverPalette(cover, inlineColor)
          return
        }

        try {
          const proxyImage = await loadPaletteImage(artworkImage.currentSrc || artworkImage.src)
          const proxyColor = extractDominantColor(proxyImage)
          if (proxyColor) applyCoverPalette(cover, proxyColor)
        } catch (error) {
          cover.dataset.paletteBound = 'fallback'
        }
      }

      if (artworkImage.complete && artworkImage.naturalWidth > 0) {
        paint()
        return
      }

      artworkImage.addEventListener('load', paint, { once: true })
    }

    const initDailyPlayer = (player) => {
      if (!player || player.dataset.ready === 'true') return
      player.dataset.ready = 'true'

      const audio = player.querySelector('.music-daily-audio')
      const toggleBtn = player.querySelector('[data-player-toggle]')
      const icon = player.querySelector('[data-player-icon]')
      const status = player.querySelector('[data-player-status]')
      const lyricDisplay = player.querySelector('[data-player-lyric]')
      const lyricSource = player.querySelector('[data-player-lyrics-source]')
      const cover = player.closest('.music-daily-cover')
      const artworkImage = player.querySelector('.music-daily-artwork-image')
      const defaultLyricText = lyricDisplay ? lyricDisplay.textContent.trim() : ''
      let lyricLines = []

      if (lyricSource) {
        try {
          const parsedLyrics = JSON.parse(lyricSource.textContent || '[]')
          lyricLines = Array.isArray(parsedLyrics) ? parsedLyrics : []
        } catch (error) {
          lyricLines = []
        }
      }

      if (!audio || !toggleBtn || !icon || !cover) return

      syncCoverPalette(cover, artworkImage)

      const renderLyric = (text) => {
        if (!lyricDisplay) return

        const nextText = typeof text === 'string' && text.trim().length ? text.trim() : defaultLyricText
        lyricDisplay.textContent = nextText
        lyricDisplay.classList.toggle('is-placeholder', nextText === defaultLyricText)
      }

      const updateLyrics = () => {
        if (!lyricDisplay || !lyricLines.length) return

        if (audio.currentTime <= 0 && audio.paused) {
          player.dataset.activeLyricIndex = ''
          renderLyric('')
          return
        }

        let activeIndex = -1

        for (let i = 0; i < lyricLines.length; i += 1) {
          const currentTime = Number(lyricLines[i].time || 0)
          if (audio.currentTime >= currentTime) {
            activeIndex = i
          } else {
            break
          }
        }

        if (activeIndex < 0) {
          player.dataset.activeLyricIndex = ''
          renderLyric('')
          return
        }

        if (player.dataset.activeLyricIndex === String(activeIndex)) return
        player.dataset.activeLyricIndex = String(activeIndex)
        renderLyric(lyricLines[activeIndex] && lyricLines[activeIndex].text)
      }

      const updatePlayState = () => {
        const isPlaying = !audio.paused && !audio.ended
        cover.classList.toggle('is-playing', isPlaying)
        icon.innerHTML = isPlaying
          ? '<i class="fa-solid fa-pause" aria-hidden="true"></i>'
          : '<i class="fa-solid fa-play" aria-hidden="true"></i>'
        toggleBtn.setAttribute('aria-label', isPlaying ? '暂停播放' : '播放')
        if (status) {
          status.textContent = ''
        }
        updateLyrics()
      }

      toggleBtn.addEventListener('click', async () => {
        try {
          if (audio.paused) {
            document.querySelectorAll('.music-daily-audio').forEach((otherAudio) => {
              if (otherAudio !== audio) otherAudio.pause()
            })
            if (Array.isArray(window.aplayers)) {
              window.aplayers.forEach((player) => player.pause && player.pause())
            }
            await audio.play()
          } else {
            audio.pause()
          }
        } catch (error) {
          status.textContent = '播放失败，请稍后重试。'
        }
      })

      audio.addEventListener('loadedmetadata', updatePlayState)
      audio.addEventListener('timeupdate', updatePlayState)
      audio.addEventListener('durationchange', updatePlayState)
      audio.addEventListener('play', updatePlayState)
      audio.addEventListener('pause', updatePlayState)
      audio.addEventListener('ended', () => {
        audio.currentTime = 0
        updatePlayState()
      })

      updatePlayState()
    }

    const bindPlatformMutex = () => {
      if (!Array.isArray(window.aplayers)) return

      window.aplayers.forEach((player) => {
        if (!player || player.__musicDailyBound) return
        player.__musicDailyBound = true
        player.on('play', () => {
          document.querySelectorAll('.music-daily-audio').forEach((audio) => audio.pause())
        })
      })
    }

    const initPlatformPlayers = () => {
      const hasPlatformPlayers = document.querySelector('.music-daily-platform-aplayer')
      if (!hasPlatformPlayers) return

      let tries = 0
      const tick = () => {
        bindPlatformMutex()
        tries += 1

        if (tries < 16 && (!Array.isArray(window.aplayers) || window.aplayers.length === 0)) {
          window.setTimeout(tick, 250)
        }
      }

      tick()
    }

    document.querySelectorAll('[data-daily-player]').forEach(initDailyPlayer)
    initPlatformPlayers()
  })()
</script>

4. 首页轮播脚本

文件：source/js/home-music-entry.js

(() => {
  const state = window.__homeMusicEntryState || (window.__homeMusicEntryState = {})
  const CAROUSEL_DATA_PATH = 'music/home-carousel.json'
  const MUSIC_PAGE_PATH = 'music/'
  const DEFAULT_METING_API = 'https://api.injahow.cn/meting/api?server=:server&type=:type&id=:id&r=:r'
  const AUTO_PLAY_INTERVAL = 5600

  const normalizeRoot = (value) => {
    if (typeof value !== 'string' || !value.trim()) return '/'
    const trimmed = value.trim()
    return trimmed.endsWith('/') ? trimmed : `${trimmed}/`
  }

  const joinRootPath = (root, path) => {
    const safeRoot = normalizeRoot(root)
    const safePath = String(path || '').replace(/^\/+/, '')
    return `${safeRoot}${safePath}`
  }

  const getSiteRoot = () => {
    if (window.GLOBAL_CONFIG && typeof window.GLOBAL_CONFIG.root === 'string') {
      return normalizeRoot(window.GLOBAL_CONFIG.root)
    }

    return '/'
  }

  const escapeHtml = (value) =>
    String(value ?? '')
      .replace(/&/g, '&')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#39;')

  const escapeCssUrl = (value) =>
    encodeURI(String(value || ''))
      .replace(/'/g, '%27')
      .replace(/\(/g, '%28')
      .replace(/\)/g, '%29')

  const getCoverInitial = (title) => {
    const text = String(title || '').trim()
    return text ? text.slice(0, 1).toUpperCase() : 'M'
  }

  const pickPlatformCover = (payload) => {
    const candidates = Array.isArray(payload) ? payload : [payload]
    for (const candidate of candidates) {
      if (!candidate || typeof candidate !== 'object') continue

      const cover = [candidate.pic, candidate.cover, candidate.image, candidate.artwork].find(
        (value) => typeof value === 'string' && value.trim()
      )

      if (cover) return cover.trim()
    }

    return ''
  }

  const buildPlatformApiUrl = (platform) => {
    if (!platform || typeof platform !== 'object') return ''
    if (!platform.server || !platform.type || (!platform.id && platform.id !== 0)) return ''

    const baseUrl = typeof platform.api === 'string' && platform.api.trim() ? platform.api.trim() : DEFAULT_METING_API
    const platformId = String(platform.id).trim()
    const platformAuth = typeof platform.auth === 'string' ? platform.auth.trim() : ''
    const hasTemplateToken = /:(server|type|id|auth|r)\b/.test(baseUrl)

    if (hasTemplateToken) {
      return baseUrl
        .replace(/:server\b/g, encodeURIComponent(String(platform.server).trim()))
        .replace(/:type\b/g, encodeURIComponent(String(platform.type).trim()))
        .replace(/:id\b/g, encodeURIComponent(platformId))
        .replace(/:auth\b/g, encodeURIComponent(platformAuth))
        .replace(/:r\b/g, String(Math.random()))
    }

    try {
      const url = new URL(baseUrl, window.location.origin)
      url.searchParams.set('server', String(platform.server).trim())
      url.searchParams.set('type', String(platform.type).trim())
      url.searchParams.set('id', platformId)
      if (platformAuth) url.searchParams.set('auth', platformAuth)
      url.searchParams.set('r', String(Math.random()))
      return url.toString()
    } catch (error) {
      return ''
    }
  }

  const fetchPlatformCover = async (platform) => {
    if (!state.platformCoverCache) state.platformCoverCache = new Map()

    const cacheKey = JSON.stringify(platform || {})
    if (state.platformCoverCache.has(cacheKey)) return state.platformCoverCache.get(cacheKey)

    const requestPromise = (async () => {
      const requestUrl = buildPlatformApiUrl(platform)
      if (!requestUrl) return ''

      try {
        const response = await fetch(requestUrl)
        if (!response.ok) return ''
        return pickPlatformCover(await response.json())
      } catch (error) {
        return ''
      }
    })()

    state.platformCoverCache.set(cacheKey, requestPromise)
    return requestPromise
  }

  const clearMountedCarousel = () => {
    if (typeof state.cleanup === 'function') {
      state.cleanup()
      state.cleanup = null
    }

    document.querySelector('[data-home-music-entry]')?.remove()
  }

  if (!state.bound) {
    document.addEventListener('pjax:send', clearMountedCarousel)
    window.addEventListener('beforeunload', clearMountedCarousel)
    state.bound = true
  }

  const fetchCarouselPayload = async () => {
    if (state.payload) return state.payload
    if (state.payloadPromise) return state.payloadPromise

    const requestUrl = joinRootPath(getSiteRoot(), CAROUSEL_DATA_PATH)
    state.payloadPromise = fetch(requestUrl, {
      credentials: 'same-origin'
    })
      .then((response) => (response.ok ? response.json() : null))
      .then((payload) => {
        state.payload = payload && Array.isArray(payload.items) ? payload : { items: [] }
        return state.payload
      })
      .catch(() => {
        state.payload = { items: [] }
        return state.payload
      })
      .finally(() => {
        state.payloadPromise = null
      })

    return state.payloadPromise
  }

  const buildSlideMarkup = (item, index, root) => {
    const title = escapeHtml(item.title || '未命名歌曲')
    const artist = escapeHtml(item.artist || '')
    const intro = escapeHtml(item.intro || '')
    const label = escapeHtml(item.label || 'MUSIC DIARY')
    const dateLabel = escapeHtml(item.dateLabel || '')
    const orderLabel = escapeHtml(item.orderLabel || '')
    const href = escapeHtml(joinRootPath(root, item.linkPath || MUSIC_PAGE_PATH))
    const hasCover = typeof item.coverSrc === 'string' && item.coverSrc.trim().length > 0
    const coverMarkup = hasCover
      ? `<img class="home-music-slide-image" src="${escapeHtml(item.coverSrc)}" alt="${title} 封面" loading="${index === 0 ? 'eager' : 'lazy'}" decoding="async" referrerpolicy="no-referrer">`
      : `<span class="home-music-slide-fallback" aria-hidden="true">${escapeHtml(getCoverInitial(item.title))}</span>`
    const coverStyle = hasCover ? ` style="--home-music-cover: url('${escapeCssUrl(item.coverSrc)}');"` : ''

    return `
      <a class="home-music-slide${index === 0 ? ' is-active' : ''}" href="${href}" data-home-music-slide data-slide-index="${index}" aria-hidden="${index === 0 ? 'false' : 'true'}" tabindex="${index === 0 ? '0' : '-1'}"${coverStyle}>
        <span class="home-music-slide-bg" aria-hidden="true"></span>
        <span class="home-music-slide-glow" aria-hidden="true"></span>
        <span class="home-music-slide-media">
          ${coverMarkup}
        </span>
        <span class="home-music-slide-copy">
          <span class="home-music-slide-label">${label}</span>
          <strong class="home-music-slide-title">${title}</strong>
          <span class="home-music-slide-artist">${artist}</span>
          <span class="home-music-slide-intro">${intro}</span>
          <span class="home-music-slide-meta">
            <span>${dateLabel}</span>
            <span>${orderLabel}</span>
          </span>
          <span class="home-music-slide-cta">进入音乐时间流</span>
        </span>
      </a>
    `
  }

  const applyPlatformCover = (slide, item, coverSrc) => {
    if (!slide || !coverSrc) return

    slide.style.setProperty('--home-music-cover', `url('${escapeCssUrl(coverSrc)}')`)

    const media = slide.querySelector('.home-music-slide-media')
    if (!media) return

    const existingImage = media.querySelector('.home-music-slide-image')
    if (existingImage) {
      existingImage.src = coverSrc
      return
    }

    media.innerHTML = `<img class="home-music-slide-image" src="${escapeHtml(coverSrc)}" alt="${escapeHtml(item.title || '音乐封面')} 封面" loading="lazy" decoding="async" referrerpolicy="no-referrer">`
  }

  const hydratePlatformCovers = (section, items) => {
    items.forEach(async (item, index) => {
      const hasCover = typeof item.coverSrc === 'string' && item.coverSrc.trim().length > 0
      if (hasCover || !item.platform) return

      const coverSrc = await fetchPlatformCover(item.platform)
      if (!coverSrc) return

      const slide = section.querySelector(`[data-home-music-slide][data-slide-index="${index}"]`)
      applyPlatformCover(slide, item, coverSrc)
    })
  }

  const renderCarousel = (items) => {
    const recentPosts = document.getElementById('recent-posts')
    const recentPostItems = recentPosts?.querySelector('.recent-post-items')
    const pageType = window.GLOBAL_CONFIG_SITE && window.GLOBAL_CONFIG_SITE.pageType

    clearMountedCarousel()

    if (!recentPosts || !recentPostItems || pageType !== 'home' || !items.length) return

    const root = getSiteRoot()
    const musicPageHref = joinRootPath(root, MUSIC_PAGE_PATH)
    const section = document.createElement('section')
    section.className = 'home-music-entry'
    section.setAttribute('data-home-music-entry', '')
    section.innerHTML = `
      <div class="home-music-entry-head">
        <div class="home-music-entry-titlebox">
          <span class="home-music-entry-kicker">Music Diary</span>
          <h2>把今天想循环播放的一首歌，继续留在音乐时间流里。</h2>
        </div>
        <a class="home-music-entry-link" href="${escapeHtml(musicPageHref)}">查看全部</a>
      </div>
      <div class="home-music-carousel">
        <div class="home-music-carousel-stage">
          ${items.map((item, index) => buildSlideMarkup(item, index, root)).join('')}
        </div>
        ${
          items.length > 1
            ? `<div class="home-music-carousel-dots" role="tablist" aria-label="音乐分享轮播切换">
                ${items
                  .map(
                    (item, index) => `
                      <button
                        class="home-music-carousel-dot${index === 0 ? ' is-active' : ''}"
                        type="button"
                        data-home-music-dot
                        data-slide-index="${index}"
                        role="tab"
                        aria-selected="${index === 0 ? 'true' : 'false'}"
                        aria-label="切换到 ${escapeHtml(item.title || `第 ${index + 1} 条`)}">
                      </button>
                    `
                  )
                  .join('')}
              </div>`
            : ''
        }
      </div>
    `

    recentPosts.insertBefore(section, recentPostItems)

    const slides = Array.from(section.querySelectorAll('[data-home-music-slide]'))
    const dots = Array.from(section.querySelectorAll('[data-home-music-dot]'))
    let activeIndex = 0
    let timerId = 0
    const shouldAutoplay =
      slides.length > 1 &&
      !(window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches)

    const syncSlides = (nextIndex) => {
      activeIndex = (nextIndex + slides.length) % slides.length

      slides.forEach((slide, slideIndex) => {
        const isActive = slideIndex === activeIndex
        slide.classList.toggle('is-active', isActive)
        slide.setAttribute('aria-hidden', String(!isActive))
        slide.tabIndex = isActive ? 0 : -1
      })

      dots.forEach((dot, dotIndex) => {
        const isActive = dotIndex === activeIndex
        dot.classList.toggle('is-active', isActive)
        dot.setAttribute('aria-selected', String(isActive))
      })
    }

    const stopAutoplay = () => {
      if (!timerId) return
      window.clearInterval(timerId)
      timerId = 0
    }

    const startAutoplay = () => {
      if (!shouldAutoplay) return
      stopAutoplay()
      timerId = window.setInterval(() => {
        syncSlides(activeIndex + 1)
      }, AUTO_PLAY_INTERVAL)
    }

    dots.forEach((dot) => {
      dot.addEventListener('click', () => {
        const slideIndex = Number(dot.getAttribute('data-slide-index'))
        if (!Number.isFinite(slideIndex)) return
        syncSlides(slideIndex)
        startAutoplay()
      })
    })

    section.addEventListener('mouseenter', stopAutoplay)
    section.addEventListener('mouseleave', startAutoplay)
    section.addEventListener('focusin', stopAutoplay)
    section.addEventListener('focusout', () => {
      window.setTimeout(() => {
        if (!section.matches(':focus-within')) startAutoplay()
      }, 0)
    })

    syncSlides(0)
    startAutoplay()
    hydratePlatformCovers(section, items)

    state.cleanup = () => {
      stopAutoplay()
    }
  }

  const initHomeMusicEntry = async () => {
    const pageType = window.GLOBAL_CONFIG_SITE && window.GLOBAL_CONFIG_SITE.pageType
    if (pageType !== 'home') {
      clearMountedCarousel()
      return
    }

    const payload = await fetchCarouselPayload()
    const items = Array.isArray(payload?.items) ? payload.items.filter((item) => item && item.id) : []
    renderCarousel(items)
  }

  initHomeMusicEntry()
})()

5. 自定义样式

文件：source/css/custom.css

@font-face {
    /* 为载入的字体取名字(随意) */
    font-family: 'nainao';
    /* 字体文件地址(相对或者绝对路径都可以) */
    src: url(/font/nainao.woff2);
    /* 定义加粗样式(加粗多少) */
    font-weight: normal;
    /* 定义字体样式(斜体/非斜体) */
    font-style: normal;
    /* 定义显示样式 */
    font-display: swap;
}

.music-daily-page {
    display: grid;
    gap: 28px;
    margin-top: 8px;
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
}

.music-daily-page * {
    box-sizing: border-box;
}

.music-daily-hero,
.music-daily-entry,
.music-daily-card {
    border: 1px solid rgba(123, 92, 74, 0.12);
    border-radius: 28px;
    background: var(--card-bg);
    box-shadow: 0 22px 54px rgba(26, 32, 44, 0.08);
}

.music-daily-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) 220px;
    gap: 24px;
    align-items: center;
    padding: 32px;
    min-width: 0;
    max-width: 100%;
    background:
        radial-gradient(circle at top left, rgba(214, 175, 123, 0.18), transparent 32%),
        linear-gradient(135deg, rgba(254, 248, 239, 0.98), rgba(246, 241, 235, 0.98));
}

.music-daily-intro,
.music-daily-badge,
.music-stream,
.music-stream-item,
.music-stream-axis,
.music-stream-date,
.music-stream-body,
.music-daily-entry,
.music-daily-entry-main,
.music-daily-writing,
.music-stream-tail {
    min-width: 0;
    max-width: 100%;
}

.music-daily-kicker,
.music-daily-label,
.music-daily-card-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(120, 75, 48, 0.1);
    color: #8c593b;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.music-daily-intro h1,
.music-daily-entry-head h2,
.music-daily-card h3 {
    margin: 14px 0 0;
    color: var(--font-color);
    line-height: 1.24;
}

.music-daily-intro h1 {
    font-size: clamp(2rem, 4vw, 3.3rem);
    min-width: 0;
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.music-daily-intro p,
.music-daily-entry-head p,
.music-daily-note,
.music-daily-card p,
.music-daily-quote,
.music-daily-meta span,
.music-daily-cover-copy small,
.music-daily-badge span,
.music-daily-badge small {
    color: rgba(31, 45, 61, 0.74);
}

.music-daily-intro p {
    max-width: 60ch;
    margin: 16px 0 0;
    line-height: 1.9;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.music-daily-badge {
    display: grid;
    gap: 10px;
    align-content: center;
    min-height: 180px;
    border-radius: 24px;
    padding: 24px;
    background: rgba(255, 255, 255, 0.66);
    text-align: center;
}

.music-daily-badge strong {
    color: var(--font-color);
    font-size: clamp(1.6rem, 3vw, 2rem);
    line-height: 1.2;
    min-width: 0;
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.music-stream {
    position: relative;
    display: grid;
    gap: 34px;
}

.music-stream::before {
    content: "";
    position: absolute;
    left: 58px;
    top: 18px;
    bottom: 88px;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(190, 132, 92, 0.38), rgba(140, 89, 59, 0.12));
}

.music-stream-item {
    position: relative;
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.music-stream-axis {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 10px;
    padding-top: 4px;
}

.music-stream-date {
    display: grid;
    justify-items: center;
    gap: 4px;
    width: min(100%, 92px);
    padding: 14px 10px;
    border: 1px solid rgba(123, 92, 74, 0.12);
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255, 251, 245, 0.98), rgba(248, 242, 235, 0.98));
    box-shadow: 0 18px 36px rgba(26, 32, 44, 0.08);
}

.music-stream-month,
.music-stream-order {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    min-width: 0;
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.music-stream-month {
    color: #8c593b;
}

.music-stream-date strong {
    color: var(--font-color);
    font-size: clamp(1.9rem, 4vw, 2.4rem);
    line-height: 1;
}

.music-stream-date small,
.music-stream-order {
    color: rgba(31, 45, 61, 0.6);
}

.music-stream-marker {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #87583d, #d39a6f);
    box-shadow:
        0 0 0 7px rgba(245, 233, 221, 0.9),
        0 14px 24px rgba(135, 88, 61, 0.24);
}

.music-stream-item.is-current .music-stream-date {
    background:
        linear-gradient(180deg, rgba(255, 248, 241, 1), rgba(252, 242, 230, 1));
}

.music-stream-item.is-current .music-stream-marker {
    box-shadow:
        0 0 0 8px rgba(248, 236, 224, 0.95),
        0 16px 28px rgba(135, 88, 61, 0.28);
}

.music-stream-body {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.music-daily-entry {
    position: relative;
    padding: 24px;
    background:
        radial-gradient(circle at top right, rgba(214, 175, 123, 0.08), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.78));
}

.music-daily-entry::before {
    content: "";
    position: absolute;
    left: 28px;
    right: 28px;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(191, 131, 92, 0.45), rgba(191, 131, 92, 0));
}

.music-daily-entry-head {
    display: block;
    min-width: 0;
    max-width: 100%;
}

.music-daily-entry-head h2 {
    font-size: clamp(1.85rem, 3vw, 2.35rem);
    min-width: 0;
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.music-daily-entry-head p {
    margin: 10px 0 0;
    line-height: 1.85;
    max-width: 42ch;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.music-daily-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    gap: 10px;
}

.music-daily-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid rgba(120, 75, 48, 0.12);
    border-radius: 999px;
    background: rgba(120, 75, 48, 0.05);
    font-size: 0.92rem;
}

.music-daily-entry-main {
    display: block;
    margin-top: 18px;
}

.music-daily-cover {
    border-radius: 24px;
    overflow: hidden;
}

.music-daily-cover {
    position: relative;
    --music-cover-image: none;
    --music-cover-bg-start: rgba(52, 36, 27, 0.96);
    --music-cover-bg-end: rgba(119, 84, 59, 0.88);
    --music-cover-glow: rgba(214, 175, 123, 0.28);
    --music-cover-panel: rgba(255, 248, 242, 0.08);
    --music-cover-panel-border: rgba(255, 248, 242, 0.12);
    --music-cover-badge-start: rgba(255, 248, 242, 0.18);
    --music-cover-badge-end: rgba(255, 248, 242, 0.1);
    --music-cover-badge-shadow: rgba(0, 0, 0, 0.22);
    width: min(100%, 380px);
    margin: 0 auto;
    aspect-ratio: 1 / 1;
    padding: 22px 22px 20px;
    background:
        linear-gradient(160deg, var(--music-cover-bg-start), var(--music-cover-bg-end)),
        linear-gradient(120deg, var(--music-cover-glow), transparent 70%);
    transition: background 0.35s ease, box-shadow 0.35s ease;
}

.music-daily-cover[data-player-mode='direct'] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    isolation: isolate;
}

.music-daily-cover[data-player-mode='direct']::before {
    content: "";
    position: absolute;
    inset: -10%;
    z-index: 0;
    background-image: var(--music-cover-image);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    filter: blur(36px) saturate(1.2);
    transform: scale(1.08);
    opacity: 0.5;
    pointer-events: none;
}

.music-daily-cover[data-player-mode='direct']::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 50% 22%, rgba(255, 255, 255, 0.08), transparent 40%),
        linear-gradient(180deg, rgba(18, 14, 12, 0.16), rgba(18, 14, 12, 0.28));
    pointer-events: none;
}

.music-daily-cover[data-player-mode='direct'] > * {
    position: relative;
    z-index: 1;
}

.music-daily-cover--platform,
.music-daily-cover--empty {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 18px;
    aspect-ratio: auto;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
}

.music-daily-platform-meta {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 4px;
    color: #fffaf5;
    min-width: 0;
    max-width: 100%;
}

.music-daily-platform-meta span {
    font-size: 0.82rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.72;
}

.music-daily-platform-meta strong {
    font-size: 1.28rem;
    line-height: 1.25;
    min-width: 0;
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.music-daily-platform-meta small {
    color: rgba(255, 250, 245, 0.68);
    min-width: 0;
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.music-daily-platform-player {
    position: relative;
    z-index: 2;
    width: 100%;
    min-width: 0;
}

.music-daily-platform-aplayer {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 96px;
    border-radius: 20px;
    overflow: hidden;
    background: rgba(255, 248, 242, 0.08);
}

.music-daily-platform-player .aplayer {
    margin: 0;
    width: 100%;
    max-width: 100%;
    border-radius: 20px;
    overflow: hidden;
    background: rgba(255, 248, 242, 0.94);
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.18);
}

.music-daily-platform-player .aplayer .aplayer-body,
.music-daily-platform-player .aplayer .aplayer-info,
.music-daily-platform-player .aplayer .aplayer-info .aplayer-music,
.music-daily-platform-player .aplayer .aplayer-info .aplayer-controller,
.music-daily-platform-player .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap {
    max-width: 100%;
    min-width: 0;
}

.music-daily-platform-player .aplayer .aplayer-body,
.music-daily-platform-player .aplayer .aplayer-list {
    background: transparent;
}

.music-daily-platform-player .aplayer .aplayer-info {
    border-bottom: 0;
}

.music-daily-platform-player .aplayer .aplayer-info .aplayer-music .aplayer-title,
.music-daily-platform-player .aplayer .aplayer-info .aplayer-music .aplayer-author,
.music-daily-platform-player .aplayer .aplayer-lrc p {
    color: #2f241c;
}

.music-daily-cover-status--platform {
    display: block;
    margin-top: 0;
    min-width: 0;
    max-width: 100%;
    line-height: 1.7;
    min-height: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.music-daily-vinyl-trigger {
    position: relative;
    display: block;
    width: 100%;
    margin-bottom: 18px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
    text-align: inherit;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.music-daily-art-stack {
    position: relative;
    display: grid;
    place-items: center;
    align-self: center;
    width: min(250px, 74%);
    aspect-ratio: 1 / 1;
    margin: 16px auto 0;
}

.music-daily-cover[data-player-mode='direct'] .music-daily-vinyl-trigger {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    margin: 0;
}

.music-daily-cover[data-player-mode='direct'] .music-daily-art-stack {
    width: min(292px, 78%);
    margin: 0;
    transform: none;
}

.music-daily-vinyl {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, rgba(255, 245, 232, 0.06) 0 18%, transparent 18.5%),
        repeating-radial-gradient(circle at center, #0f0f10 0 8px, #151515 8px 12px);
    box-shadow:
        0 18px 34px rgba(0, 0, 0, 0.36),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.music-daily-vinyl::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: #2f241c;
    box-shadow: 0 0 0 5px rgba(255, 245, 232, 0.08);
}

.music-daily-vinyl::after {
    content: "";
    position: absolute;
    inset: 12% auto auto 72%;
    z-index: 2;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    filter: blur(6px);
}

.music-daily-cover.is-playing .music-daily-vinyl {
    animation: music-daily-spin 7.2s linear infinite;
}

.music-daily-vinyl-badge {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--music-cover-badge-start), var(--music-cover-badge-end));
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff8f2;
    box-shadow: 0 14px 24px var(--music-cover-badge-shadow);
    backdrop-filter: blur(14px) saturate(1.35);
    transform: translate(-50%, -50%);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    pointer-events: none;
}

.music-daily-vinyl-trigger:hover .music-daily-vinyl-badge {
    transform: translate(-50%, -50%) scale(1.03);
    box-shadow: 0 18px 28px rgba(0, 0, 0, 0.24);
}

.music-daily-artwork {
    position: absolute;
    inset: 16%;
    z-index: 1;
    display: block;
    overflow: hidden;
    border-radius: 50%;
    background: var(--music-cover-panel);
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.16);
}

.music-daily-artwork-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    filter: saturate(1.02) contrast(1.02);
}

.music-daily-artwork-overlay {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0.96;
    background: radial-gradient(circle at 50% 46%, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 62%, rgba(0, 0, 0, 0.24) 100%);
    pointer-events: none;
}

.music-daily-artwork-outline {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: 50%;
    border: 1px solid rgba(255, 248, 242, 0.18);
    pointer-events: none;
}

.music-daily-cover-copy {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 18px;
    display: grid;
    gap: 4px;
    color: #fffaf5;
    z-index: 4;
}

.music-daily-cover[data-player-mode='direct'] .music-daily-cover-copy {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 20px;
    width: auto;
    margin-top: 0;
    transform: none;
    pointer-events: none;
}

.music-daily-cover-copy span {
    font-size: 0.82rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.72;
}

.music-daily-cover-copy strong {
    font-size: 1.28rem;
    line-height: 1.25;
}

.music-daily-cover-copy small {
    color: rgba(255, 250, 245, 0.68);
}

.music-daily-cover-lyric {
    display: block;
    min-height: 0;
    margin-top: 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: rgba(255, 250, 245, 0.9);
    font-size: 0.92rem;
    font-style: normal;
    line-height: 1.7;
    word-break: break-word;
    overflow-wrap: anywhere;
    backdrop-filter: none;
    transition: color 0.35s ease;
}

.music-daily-cover-lyric.is-placeholder {
    color: rgba(255, 250, 245, 0.62);
}

.music-daily-cover-status {
    display: block;
    margin-top: 8px;
    color: rgba(255, 250, 245, 0.76);
    font-size: 0.88rem;
    font-style: normal;
    line-height: 1.6;
    min-height: 1.6em;
    max-width: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.music-daily-cover[data-player-mode='direct'] .music-daily-cover-status {
    display: none;
}

.music-daily-audio {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.music-daily-writing {
    display: grid;
    gap: 18px;
    margin-top: 18px;
    padding: 22px 24px;
    border: 1px solid rgba(123, 92, 74, 0.12);
    border-radius: 24px;
    background: rgba(255, 249, 243, 0.72);
}

.music-daily-quote {
    margin: 0;
    padding: 14px 16px;
    border-left: 4px solid rgba(140, 89, 59, 0.32);
    border-radius: 16px;
    background: rgba(140, 89, 59, 0.06);
    font-size: 0.98rem;
    line-height: 1.85;
}

.music-daily-writing-article {
    display: grid;
    gap: 12px;
}

.music-daily-note {
    margin: 0;
    line-height: 1.85;
}

.music-daily-card {
    padding: 24px;
}

.music-daily-card h3 {
    font-size: 1.35rem;
}

.music-daily-card p {
    margin: 14px 0 0;
    line-height: 1.9;
}

.music-daily-writing-article h3 {
    margin: 0;
    color: var(--font-color);
    font-size: 1.2rem;
    line-height: 1.35;
}

.music-daily-writing-article p {
    margin: 0;
    color: rgba(31, 45, 61, 0.74);
    line-height: 1.9;
}

.music-daily-card.wide {
    grid-column: 1 / -1;
}

.music-stream-tail {
    margin-left: 116px;
    padding: 22px 26px;
    border: 1px dashed rgba(140, 89, 59, 0.26);
    border-radius: 24px;
    background: rgba(255, 248, 241, 0.72);
}

.music-stream-tail span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(140, 89, 59, 0.08);
    color: #8c593b;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    min-width: 0;
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.music-stream-tail p {
    margin: 14px 0 0;
    color: rgba(31, 45, 61, 0.68);
    line-height: 1.85;
    min-width: 0;
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: anywhere;
}

@keyframes music-daily-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

[data-theme='dark'] .music-daily-hero,
[data-theme='dark'] .music-daily-entry,
[data-theme='dark'] .music-daily-card {
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: none;
}

[data-theme='dark'] .music-daily-hero {
    background:
        radial-gradient(circle at top left, rgba(214, 175, 123, 0.12), transparent 32%),
        linear-gradient(135deg, rgba(28, 24, 22, 0.98), rgba(22, 20, 20, 0.98));
}

[data-theme='dark'] .music-daily-kicker,
[data-theme='dark'] .music-daily-label,
[data-theme='dark'] .music-daily-card-tag,
[data-theme='dark'] .music-stream-tail span {
    background: rgba(214, 175, 123, 0.1);
    color: #e3bf96;
    border-color: rgba(214, 175, 123, 0.12);
}

[data-theme='dark'] .music-daily-intro p,
[data-theme='dark'] .music-daily-entry-head p,
[data-theme='dark'] .music-daily-note,
[data-theme='dark'] .music-daily-card p,
[data-theme='dark'] .music-daily-writing-article p,
[data-theme='dark'] .music-daily-quote,
[data-theme='dark'] .music-stream-date small,
[data-theme='dark'] .music-stream-order,
[data-theme='dark'] .music-stream-tail p,
[data-theme='dark'] .music-daily-cover-status,
[data-theme='dark'] .music-daily-cover-copy small,
[data-theme='dark'] .music-daily-platform-meta small,
[data-theme='dark'] .music-daily-badge span,
[data-theme='dark'] .music-daily-badge small {
    color: rgba(255, 255, 255, 0.72);
}

[data-theme='dark'] .music-daily-cover-lyric {
    color: rgba(255, 255, 255, 0.84);
}

[data-theme='dark'] .music-daily-cover-lyric.is-placeholder {
    color: rgba(255, 255, 255, 0.58);
}

[data-theme='dark'] .music-stream::before {
    background: linear-gradient(180deg, rgba(214, 175, 123, 0.32), rgba(214, 175, 123, 0.06));
}

[data-theme='dark'] .music-stream-date {
    border-color: rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(34, 29, 27, 0.98), rgba(25, 22, 22, 0.98));
    box-shadow: none;
}

[data-theme='dark'] .music-stream-item.is-current .music-stream-date {
    background: linear-gradient(180deg, rgba(34, 29, 27, 0.98), rgba(25, 22, 22, 0.98));
}

[data-theme='dark'] .music-stream-month {
    color: #ebc8a2;
}

[data-theme='dark'] .music-stream-marker {
    box-shadow:
        0 0 0 7px rgba(33, 29, 27, 0.96),
        0 12px 24px rgba(0, 0, 0, 0.28);
}

[data-theme='dark'] .music-stream-item.is-current .music-stream-marker {
    box-shadow:
        0 0 0 8px rgba(33, 29, 27, 0.96),
        0 16px 28px rgba(0, 0, 0, 0.28);
}

[data-theme='dark'] .music-daily-badge,
[data-theme='dark'] .music-daily-writing {
    background: rgba(255, 255, 255, 0.04);
}

[data-theme='dark'] .music-daily-entry {
    background:
        radial-gradient(circle at top right, rgba(214, 175, 123, 0.08), transparent 28%),
        linear-gradient(180deg, rgba(30, 27, 26, 0.96), rgba(24, 22, 21, 0.96));
}

[data-theme='dark'] .music-daily-quote {
    background: rgba(214, 175, 123, 0.08);
    border-left-color: rgba(214, 175, 123, 0.26);
}

[data-theme='dark'] .music-daily-writing {
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme='dark'] .music-daily-platform-aplayer {
    background: rgba(255, 255, 255, 0.06);
}

[data-theme='dark'] .music-daily-platform-player .aplayer {
    background: rgba(30, 27, 26, 0.96);
    box-shadow: none;
}

[data-theme='dark'] .music-daily-platform-player .aplayer .aplayer-info .aplayer-music .aplayer-title,
[data-theme='dark'] .music-daily-platform-player .aplayer .aplayer-info .aplayer-music .aplayer-author,
[data-theme='dark'] .music-daily-platform-player .aplayer .aplayer-lrc p {
    color: rgba(255, 255, 255, 0.82);
}

[data-theme='dark'] .music-daily-vinyl-badge {
    box-shadow: 0 16px 26px rgba(0, 0, 0, 0.32);
}

[data-theme='dark'] .music-stream-tail {
    border-color: rgba(214, 175, 123, 0.18);
    background: rgba(255, 255, 255, 0.03);
}

@media (max-width: 900px) {
    .music-daily-hero {
        grid-template-columns: 1fr;
    }

    .music-stream::before {
        left: 23px;
        top: 104px;
        bottom: 78px;
    }

    .music-stream-item {
        grid-template-columns: 1fr;
        gap: 16px;
        padding-left: 50px;
    }

    .music-stream-axis {
        justify-items: start;
    }

    .music-stream-date {
        width: auto;
        min-width: 90px;
    }

    .music-stream-marker {
        position: absolute;
        left: -32px;
        top: 34px;
    }

    .music-daily-badge {
        min-height: auto;
    }

    .music-stream-tail {
        margin-left: 50px;
    }
}

@media (max-width: 640px) {
    .music-daily-hero,
    .music-daily-entry,
    .music-daily-card,
    .music-daily-writing {
        padding: 20px;
        border-radius: 24px;
    }

    .music-daily-cover {
        border-radius: 20px;
    }

    .music-stream::before {
        left: 19px;
        top: 96px;
        bottom: 64px;
    }

    .music-stream-item {
        padding-left: 40px;
    }

    .music-stream-date {
        padding: 12px 10px;
        border-radius: 18px;
    }

    .music-stream-date strong {
        font-size: 1.8rem;
    }

    .music-stream-marker {
        left: -27px;
        top: 32px;
        width: 16px;
        height: 16px;
    }

    .music-stream-tail {
        margin-left: 40px;
        padding: 18px 20px;
        border-radius: 20px;
    }

    .music-daily-cover {
        width: 100%;
        padding: 18px 18px 16px;
    }

    .music-daily-cover[data-player-mode='direct'] {
        aspect-ratio: 1 / 1;
        min-height: clamp(280px, 84vw, 360px);
        padding-bottom: 16px;
    }

    .music-daily-intro h1,
    .music-daily-entry-head h2 {
        font-size: 1.9rem;
    }

    .music-daily-art-stack {
        width: min(220px, 76%);
    }

    .music-daily-cover[data-player-mode='direct'] .music-daily-art-stack {
        width: min(248px, 72vw);
        margin: 0;
        transform: none;
    }

    .music-daily-vinyl-badge {
        width: 42px;
        height: 42px;
    }

    .music-daily-cover-copy {
        left: 18px;
        right: 18px;
        bottom: 14px;
    }

    .music-daily-cover[data-player-mode='direct'] .music-daily-cover-copy {
        position: absolute;
        left: 18px;
        right: 18px;
        bottom: 16px;
        margin-top: 0;
        padding: 0;
        transform: none;
    }

    .music-daily-platform-meta strong {
        font-size: 1.16rem;
    }

    .music-daily-platform-meta,
    .music-daily-platform-meta strong,
    .music-daily-platform-meta small,
    .music-daily-cover-status--platform {
        max-width: 100%;
        min-width: 0;
    }

    .music-daily-cover-copy strong {
        font-size: 1.16rem;
    }

    .music-daily-cover-status {
        margin-top: 6px;
        font-size: 0.82rem;
    }

    .music-daily-cover-status--platform {
        font-size: 0.8rem;
        line-height: 1.65;
    }

    .music-daily-cover-lyric {
        font-size: 0.88rem;
    }

    .music-daily-platform-aplayer,
    .music-daily-platform-player .aplayer {
        border-radius: 18px;
    }

    .music-daily-cover--platform,
    .music-daily-cover--empty {
        gap: 14px;
        padding-bottom: 18px;
    }

    .music-daily-platform-player .aplayer.aplayer-withlrc .aplayer-body,
    .music-daily-platform-player .aplayer.aplayer-arrow .aplayer-body,
    .music-daily-platform-player .aplayer.aplayer-mobile .aplayer-body {
        display: flex;
        align-items: stretch;
        width: 100%;
        overflow: hidden;
    }

    .music-daily-platform-player .aplayer.aplayer-withlrc .aplayer-pic,
    .music-daily-platform-player .aplayer.aplayer-arrow .aplayer-pic,
    .music-daily-platform-player .aplayer.aplayer-mobile .aplayer-pic {
        float: none;
        flex: 0 0 72px;
        width: 72px;
        min-width: 72px;
        height: 72px;
    }

    .music-daily-platform-player .aplayer.aplayer-withlrc .aplayer-info,
    .music-daily-platform-player .aplayer.aplayer-arrow .aplayer-info,
    .music-daily-platform-player .aplayer.aplayer-mobile .aplayer-info {
        flex: 1 1 auto;
        margin-left: 0;
        height: auto;
        width: calc(100% - 72px);
        padding: 10px 10px 8px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden;
        box-sizing: border-box;
    }

    .music-daily-platform-player .aplayer.aplayer-withlrc .aplayer-info .aplayer-music,
    .music-daily-platform-player .aplayer.aplayer-arrow .aplayer-info .aplayer-music,
    .music-daily-platform-player .aplayer.aplayer-mobile .aplayer-info .aplayer-music {
        margin: 0 0 8px;
        height: auto;
        min-width: 0;
        overflow: hidden;
    }

    .music-daily-platform-player .aplayer.aplayer-withlrc .aplayer-info .aplayer-music .aplayer-title,
    .music-daily-platform-player .aplayer.aplayer-withlrc .aplayer-info .aplayer-music .aplayer-author,
    .music-daily-platform-player .aplayer.aplayer-arrow .aplayer-info .aplayer-music .aplayer-title,
    .music-daily-platform-player .aplayer.aplayer-arrow .aplayer-info .aplayer-music .aplayer-author,
    .music-daily-platform-player .aplayer.aplayer-mobile .aplayer-info .aplayer-music .aplayer-title,
    .music-daily-platform-player .aplayer.aplayer-mobile .aplayer-info .aplayer-music .aplayer-author {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .music-daily-platform-player .aplayer.aplayer-withlrc .aplayer-info .aplayer-controller,
    .music-daily-platform-player .aplayer.aplayer-arrow .aplayer-info .aplayer-controller,
    .music-daily-platform-player .aplayer.aplayer-mobile .aplayer-info .aplayer-controller {
        align-items: center;
        gap: 6px;
        min-width: 0;
        overflow: hidden;
    }

    .music-daily-platform-player .aplayer.aplayer-withlrc .aplayer-info .aplayer-controller .aplayer-bar-wrap,
    .music-daily-platform-player .aplayer.aplayer-arrow .aplayer-info .aplayer-controller .aplayer-bar-wrap,
    .music-daily-platform-player .aplayer.aplayer-mobile .aplayer-info .aplayer-controller .aplayer-bar-wrap {
        margin: 0;
    }

    .music-daily-platform-player .aplayer.aplayer-withlrc .aplayer-info .aplayer-controller .aplayer-time,
    .music-daily-platform-player .aplayer.aplayer-arrow .aplayer-info .aplayer-controller .aplayer-time,
    .music-daily-platform-player .aplayer.aplayer-mobile .aplayer-info .aplayer-controller .aplayer-time {
        padding-left: 0;
        white-space: nowrap;
        flex: 0 0 auto;
    }

    .music-daily-platform-player .aplayer.aplayer-withlrc .aplayer-lrc,
    .music-daily-platform-player .aplayer.aplayer-arrow .aplayer-lrc,
    .music-daily-platform-player .aplayer.aplayer-mobile .aplayer-lrc {
        display: none;
    }

}

@media (max-width: 420px) {
    .music-daily-cover[data-player-mode='direct'] .music-daily-art-stack {
        width: min(226px, 70vw);
    }

    .music-daily-cover[data-player-mode='direct'] .music-daily-cover-copy {
        right: 16px;
        left: 16px;
        bottom: 14px;
        padding-right: 0;
        transform: none;
    }

    .music-daily-cover--platform,
    .music-daily-cover--empty {
        gap: 12px;
    }

    .music-daily-cover-status--platform {
        font-size: 0.78rem;
        line-height: 1.6;
    }

    .music-daily-platform-player .aplayer.aplayer-withlrc .aplayer-pic,
    .music-daily-platform-player .aplayer.aplayer-arrow .aplayer-pic,
    .music-daily-platform-player .aplayer.aplayer-mobile .aplayer-pic {
        flex-basis: 64px;
        width: 64px;
        min-width: 64px;
        height: 64px;
    }

    .music-daily-platform-player .aplayer.aplayer-withlrc .aplayer-info,
    .music-daily-platform-player .aplayer.aplayer-arrow .aplayer-info,
    .music-daily-platform-player .aplayer.aplayer-mobile .aplayer-info {
        width: calc(100% - 64px);
        padding: 8px 8px 6px;
    }

    .music-daily-platform-player .aplayer.aplayer-withlrc .aplayer-info .aplayer-music,
    .music-daily-platform-player .aplayer.aplayer-arrow .aplayer-info .aplayer-music,
    .music-daily-platform-player .aplayer.aplayer-mobile .aplayer-info .aplayer-music {
        margin-bottom: 6px;
    }

    .music-daily-platform-player .aplayer.aplayer-withlrc .aplayer-info .aplayer-controller .aplayer-time,
    .music-daily-platform-player .aplayer.aplayer-arrow .aplayer-info .aplayer-controller .aplayer-time,
    .music-daily-platform-player .aplayer.aplayer-mobile .aplayer-info .aplayer-controller .aplayer-time {
        font-size: 10px;
    }
}

.home-music-entry {
    position: relative;
    margin-bottom: 30px;
    padding: 24px;
    border-radius: 28px;
    overflow: hidden;
    background: linear-gradient(135deg, #1f1814 0%, #34261d 52%, #594030 100%);
    box-shadow: 0 24px 48px rgba(34, 24, 17, 0.16);
}

.home-music-entry::before {
    content: "";
    position: absolute;
    left: -72px;
    top: -96px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 241, 230, 0.16), transparent 72%);
    pointer-events: none;
}

.home-music-entry-head,
.home-music-carousel {
    position: relative;
    z-index: 1;
}

.home-music-entry-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.home-music-entry-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    border: 1px solid rgba(255, 245, 238, 0.16);
    border-radius: 999px;
    background: rgba(255, 245, 238, 0.08);
    color: rgba(255, 243, 235, 0.82);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.home-music-entry-titlebox h2 {
    margin: 10px 0 0;
    max-width: 26ch;
    color: #fff6f0;
    font-size: clamp(1.35rem, 2.6vw, 1.95rem);
    line-height: 1.35;
}

.home-music-entry-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid rgba(255, 246, 240, 0.14);
    border-radius: 999px;
    background: rgba(255, 246, 240, 0.08);
    color: #fff5ee !important;
    font-weight: 600;
    white-space: nowrap;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.home-music-entry-link:hover {
    background: rgba(255, 246, 240, 0.14);
    transform: translateY(-1px);
}

.home-music-carousel-stage {
    display: grid;
}

.home-music-slide {
    position: relative;
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: minmax(140px, 196px) minmax(0, 1fr);
    gap: 24px;
    align-items: center;
    overflow: hidden;
    min-width: 0;
    padding: 24px;
    border: 1px solid rgba(255, 245, 238, 0.08);
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(19, 15, 13, 0.84), rgba(19, 15, 13, 0.62));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    color: inherit;
    text-decoration: none !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity 0.45s ease, transform 0.45s ease, visibility 0.45s ease;
}

.home-music-slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.home-music-slide-bg,
.home-music-slide-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.home-music-slide-bg {
    background-image:
        linear-gradient(110deg, rgba(19, 15, 13, 0.88) 0%, rgba(19, 15, 13, 0.76) 42%, rgba(19, 15, 13, 0.34) 100%),
        var(--home-music-cover, linear-gradient(135deg, #5f4634, #2d2119));
    background-position: center;
    background-size: cover;
    transform: scale(1.06);
}

.home-music-slide-glow {
    left: auto;
    right: -34px;
    top: 50%;
    bottom: auto;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 205, 159, 0.22), transparent 70%);
    transform: translateY(-50%);
}

.home-music-slide-media,
.home-music-slide-copy {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.home-music-slide-media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(255, 244, 236, 0.16), rgba(255, 244, 236, 0.06));
    box-shadow: 0 18px 36px rgba(10, 8, 7, 0.24);
}

.home-music-slide-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-music-slide-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: rgba(255, 246, 240, 0.92);
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    font-weight: 700;
    letter-spacing: 0.08em;
}

.home-music-slide-copy {
    display: grid;
    gap: 10px;
}

.home-music-slide-label,
.home-music-slide-meta span {
    color: rgba(255, 241, 232, 0.72);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.home-music-slide-label {
    font-size: 0.76rem;
    font-weight: 700;
}

.home-music-slide-title {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: #fff8f2;
    font-size: clamp(1.7rem, 4vw, 2.45rem);
    line-height: 1.14;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.home-music-slide-artist {
    display: block;
    color: rgba(255, 240, 230, 0.84);
    font-size: 1rem;
    font-weight: 600;
}

.home-music-slide-intro {
    display: -webkit-box;
    overflow: hidden;
    color: rgba(255, 241, 232, 0.74);
    line-height: 1.75;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.home-music-slide-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 2px;
}

.home-music-slide-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255, 246, 240, 0.08);
    font-size: 0.72rem;
    font-weight: 700;
}

.home-music-slide-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 38px;
    margin-top: 4px;
    padding: 0 16px;
    border-radius: 999px;
    background: rgba(255, 246, 240, 0.92);
    color: #4d3728;
    font-size: 0.9rem;
    font-weight: 700;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.home-music-slide:hover .home-music-slide-cta {
    background: #fffaf6;
    transform: translateY(-1px);
}

.home-music-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
}

.home-music-carousel-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 245, 238, 0.26);
    cursor: pointer;
    transition: width 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}

.home-music-carousel-dot.is-active {
    width: 28px;
    background: rgba(255, 245, 238, 0.9);
}

@media (max-width: 900px) {
    .home-music-slide {
        grid-template-columns: 128px minmax(0, 1fr);
        gap: 18px;
        padding: 20px;
    }

    .home-music-slide-title {
        font-size: clamp(1.45rem, 5vw, 2rem);
    }

    .home-music-slide-intro {
        -webkit-line-clamp: 2;
    }
}

@media (max-width: 680px) {
    .home-music-entry {
        margin-bottom: 24px;
        padding: 18px;
        border-radius: 24px;
    }

    .home-music-entry-head {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        margin-bottom: 14px;
    }

    .home-music-entry-titlebox h2 {
        max-width: none;
        font-size: 1.2rem;
    }

    .home-music-entry-link {
        width: fit-content;
    }

    .home-music-slide {
        grid-template-columns: 84px minmax(0, 1fr);
        gap: 14px;
        padding: 16px;
        border-radius: 20px;
    }

    .home-music-slide-media {
        border-radius: 18px;
    }

    .home-music-slide-copy {
        gap: 7px;
    }

    .home-music-slide-artist {
        font-size: 0.92rem;
    }

    .home-music-slide-intro {
        font-size: 0.92rem;
        line-height: 1.65;
    }

    .home-music-slide-meta {
        gap: 8px;
    }

    .home-music-slide-meta span {
        min-height: 24px;
        font-size: 0.68rem;
    }

    .home-music-slide-cta {
        min-height: 34px;
        padding: 0 14px;
        font-size: 0.84rem;
    }
}

6. Butterfly 注入配置

文件：_config.butterfly.yml

inject:
  head:
    - <link rel="stylesheet" href="/css/custom.css?14">
  bottom:
    - <script data-pjax src="/js/home-music-entry.js?2"></script>

最后

这套做法最关键的一点，就是把功能都放在主题外层完成：页面模板放在 templates，生成逻辑放在 scripts，数据放在 source/_data，样式和脚本通过配置注入。这样后面即使主题升级，也不用回头去手工改主题源码。