Hexo+Next搭建个人博客（添加网页音乐播放器）

前言

最近将博客从 Jekyll 迁移到 Hexo，在迁移的过程中也遇到一些问题，下面就简单记录一下 Hexo+NexT+Github Pages 的搭建步骤。

在上一章，我们为博客添加了一个萌萌的 Live2D 看板娘，在本章，我们将为博客添加一个网页音乐播放器。

给博客插入音乐的办法有很多，但效果相对理想的方案有两种：

使用音乐平台提供的插件
使用 hexo-tag-aplayer 插件

使用音乐平台提供的插件

以网易云为例，网页端点击生成外链播放器即可生成外链代码。

可以在自己博客页面中嵌入插件:

<iframe 
    frameborder="no" 
    border="0" 
    marginwidth="0" 
    marginheight="0" 
    width=330 
    height=450 
    src="//music.163.com/outchain/player?type=0&id=2205641361&auto=1&height=430" >
</iframe>

效果：

但是有相对非常多的音乐由于版权保护，没办法生成外链：

使用 hexo-tag-aplayer 插件

hexo-tag-aplayer 就是将 APlayer 内嵌入博客页面的 Hexo 插件。

安装执行：

script

1	$ npm install --save hexo-tag-aplayer

原先 hexo-tag-aplayer 不支持 MetingJS，使得需要图片url，音乐url等等参数，操作起来都很麻烦，需要去音乐网站扒音乐播放链接或者下载下来存储在七牛云或本地，要了解具体参数和使用可以查看其中文文档了解。

MeingJS 支持 (3.0 新功能)

MetingJS 是基于 Meting API 的 APlayer 衍生播放器，引入 MetingJS 后，播放器将支持对于 QQ音乐、网易云音乐、虾米、酷狗、百度等平台的音乐播放。

如果想在本插件中使用 MetingJS，请在 Hexo 配置文件 _config.yml 中设置：

script

1 2	aplayer: meting: true # Meting support, default: false

接着就可以在文章中使用 MetingJS 播放器了，例如打开网易云音乐网站找一个歌单，例如： https://music.163.com/#/playlist?id=3136952023，这个歌单的id就是3136952023，按下面格式即可使用：

1	{% meting "3136952023" "netease" "playlist" "theme:#FF4081" "mode:circulation" "mutex:true" "listmaxheight:340px" "preload:auto" %}

全局音乐插件

如果想在非 Post 页面使用插件功能，直接使用上面的方法修改 layout 的话会报以下错误

script

1	Error: Unexpected tag "meting"

所以我们只能使用另一种办法，创建 Hexo/source/_data/APlayer.swig 文件，添加以下内容。

script

{% if aplayer.enabled %}
  <!-- require APlayer -->
  <link rel="stylesheet" href="{{aplayer.cdn.css}}">
  <script src="{{aplayer.cdn.js}}"></script>
  <!-- require MetingJS -->
  <script src="{{aplayer.cdn.meting}}"></script>
  <meting-js
    server="{{aplayer.server}}"
    type="{{aplayer.type}}"
    fixed="{{aplayer.fixed}}"
    id="{{aplayer.id}}"
    auto="{{aplayer.auto}}"
    mini="{{aplayer.mini}}"
    autoplay="{{aplayer.autoplay}}"
    theme="{{aplayer.theme}}"
    loop="{{aplayer.loop}}"
    order="{{aplayer.order}}"
    preload="{{aplayer.preload}}"
    volume="{{aplayer.volume}}"
    mutex="{{aplayer.mutex}}"
    list-folded="{{aplayer.listfolded}}"
    list-max-height="{{aplayer.listmaxheight}}"
    storage-name="{{aplayer.storagename}}" >
  </meting-js>
{% endif %}

接着打开主题配置文件，在最底部添加

script

# --------------------------------------------------------------
# APlayer settings
# --------------------------------------------------------------
# enabled:  true/false   开启/关闭
# id: song id / playlist id / album id / search keyword   歌曲ID、歌单ID、关键字
# server: netease, tencent, kugou, xiami, baidu     音乐平台
# type: song, playlist, album, search, artist  类型
# auto: music link, support: netease, tencent, xiami
# fixed: true/false   吸底模式
# mini: true/false   迷你模式
# autoplay: true/false   自动播放
# theme: #eeeeee 主题颜色
# loop: values: 'all', 'one', 'none' 循环播放
# order: values: 'list', 'random' 是否随机播放
# preload: values: 'none', 'metadata', 'auto' 预载入
# volume:	0.7	默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
# mutex: true/false	互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
# list-folded:	true/false	列表默认折叠
# list-max-height:	340px	列表最大高度
# storage-name:	metingjs	存储播放器设置的 localStorage key
aplayer:
  enabled: true
  id: 3099335800
  server: netease
  type: playlist
  auto:
  fixed: true
  mini: true
  autoplay: true
  theme: #607d8b
  loop: 'all'
  order: 'random'
  preload: 'auto'
  volume: 0.7
  mutex: true
  listfolded: true
  listmaxheight: 340px
  storagename: metingjs
  cdn:
    css: https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css
    js: https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js
    meting: https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js

打开 hexo/scripts/plugins.js, 在 head 注入点注入 APlayer

hexo.extend.filter.register('theme_inject', function (injects) {
  .
  .
  .
  // 引入 APlayer
  injects.head.file('aplayer', 'source/_data/APlayer.swig', {aplayer: hexo.theme.config.aplayer});
  .
  .
  .
});

最后是 MetingJs 的参数详情：

参数名	默认	description
id	require	歌曲ID /播放列表ID /专辑ID /搜索关键字
server	require	音乐平台,可选值： ‘netease’，’tencent’，’kugou’，’xiami’，’baidu’
type	require	类型，可选值：’song’, ‘playlist’, ‘album’, ‘search’, ‘artist’
auto	options	音乐链接，支持： ‘netease’, ‘tencent’, ‘xiami’
fixed	false	开启吸底模式, 详情
mini	false	开启迷你模式, 详情
autoplay	false	音频自动播放
theme	#2980b9	主题色
loop	all	音频循环播放, 可选值: ‘all’, ‘one’, ‘none’
order	list	音频循环顺序, 可选值: ‘list’, ‘random’
preload	auto	预加载，可选值: ‘none’, ‘metadata’, ‘auto’
volume	0.7	默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
mutex	true	互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
lrc-type	0	详情
list-folded	false	列表默认折叠
list-max-height	340px	列表最大高度
storage-name	metingjs	存储播放器设置的 localStorage key