1.安装hexo插件

音乐界面使用了插件 hexo-tag-aplayer

1
npm install --save hexo-tag-aplayer

2.配置配置文件

首先在Hexo根目录_config里配置asset_inject为false

1
2
3
aplayer:
  meting: true
  asset_inject: false

在主题的配置文件中，enable 设为 true 和 per_page 设为 true

1
2
3
aplayerInject:
  enable: true
  per_page: true

3.添加全局吸底Aplayer

把 aplayer代码 插入到主题配置文件的 inject.bottom 去

1
2
3
4
5
inject:
  head:
    # - <link rel="stylesheet" href="/xxx.css">
  bottom:
    - <div class="aplayer no-destroy" data-id="60198" data-server="netease" data-type="playlist" data-fixed="true" data-autoplay="true"> </div>

如果你想切换页面时，音乐不会中断,修改主题配置文件如下：

1
2
pjax:
  enable: true

4. 文章添加播放器

1
{% meting "2063487880" "netease" "song" "theme:#555" "mutex:true" "listmaxheight:340px" "preload:auto" %}

有关参数描述如下：

选项 默认值 描述
id 必须值 歌曲 id / 播放列表 id / 相册 id / 搜索关键字
server 必须值 音乐平台: netease, tencent, kugou, xiami, baidu
type 必须值 song, playlist, album, search, artist
fixed false 开启固定模式
mini false 开启迷你模式
loop all 列表循环模式：all, one,none
order list 列表播放模式： list, random
volume 0.7 播放器音量
lrctype 0 歌词格式类型
listfolded false 指定音乐播放列表是否折叠
storagename metingjs LocalStorage 中存储播放器设定的键名
autoplay true 自动播放，移动端浏览器暂时不支持此功能
mutex true 该选项开启时，如果同页面有其他 aplayer 播放，该播放器会暂停
listmaxheight 340px 播放列表的最大长度
preload auto 音乐文件预载入模式，可选项： none, metadata, auto
theme #ad7a86 播放器风格色彩设置

5. 创建音乐页面

希望在导航条添加音乐页面链接

  1. 在命令行执行新建music页面命令：

    1
    hexo new page music

    ​

  2. 执行完命令之后，/source 文件夹下会生成一个music文件夹，打开里面的index.md，修改如下：

1
2
3
title: 音乐
date: 2023-08-02 06:55:16
type: "music"
  1. 新建菜单的音乐链接
1
2
3
4
5
6
menu:
   主页: / || fas fa-home
   归档: /archives/ || fas fa-archive
   标签: /tags/ || fas fa-tags
   分类: /categories/ || fas fa-folder-open
   音乐: /music/ || fas fa-music