小知识，大挑战！本文正在参与“程序员必备小知识”创作活动
在使用Hexo作为个人博客网站后，就会经常光顾自己的博客页面并输出一些内容，平时在浏览自己的博客文章时可能会比较枯燥，因此就想着在自己的Hexo博客中添加可以播放的歌单，一边听歌一边学习，得劲！
1. 背景知识
想到要为自己的Hexo博客添加播放音乐的功能，首先就是去搜索查询一些大佬们是怎么实现的，在大佬们的基础上完成自己博客中的音乐播放功能。
博客中添加音乐时的一些基本要素：
- Hexo + GitHub Pages部署的博客
- Hexo博客是matery的主题
- 音乐使用网易云播放器中自己的收藏歌单
2. 文章中添加音乐
我们是要添加网易云音乐中的音乐，就需要打开网页版网易云音乐，登录网易云账户，找到需要添加的音乐，点击生成外链播放器，在使用网易云音乐插件中生成的HTML代码粘贴到md文章中即可。
如下为音乐生成的html代码
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=418603442&auto=1&height=66"></iframe>
复制代码将代码复制到博客的md文件中，会自动解析成为选择的歌曲信息。
该方法仅适用于将一首音乐加入文章中，如果希望为博客添加音乐播放列表，则需要使用另一种方法来实现。
2. 博客添加音乐模块
文章中添加音乐是只可以在查看当前文章时播放，且生成的外链仅针对一首歌曲，如果想要在博客中添加一个歌单中的多首歌曲，就是为博客添加一个音乐模块。
2.1 博客音乐模块配置
maery主题中自身就带有了控制音乐播放的功能，在博客主题对应的配置文件，/_config.xml文件中搜索music配置项，找到音乐相关的配置信息
# Whether to display the musics.
# 是否在首页显示音乐.
music:
enable: true
title: #非吸底模式有效
enable: true
show: 听听音乐
autoHide: true # hide automaticaly
server: netease #require music platform: netease, tencent, kugou, xiami, baidu
type: playlist #require song, playlist, album, search, artist
id: 2621145115 #require song id / playlist id / album id / search keyword
fixed: true # 开启吸底模式
autoplay: false # 是否自动播放
theme: '#42b983'
loop: 'all' # 音频循环播放, 可选值: 'all', 'one', 'none'
order: 'random' # 音频循环顺序, 可选值: 'list', 'random'
preload: 'auto' # 预加载，可选值: 'none', 'metadata', 'auto'
volume: 0.5 # 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
listFolded: true # 列表默认折叠
hideLrc: true # 隐藏歌词
复制代码2.2博客中显示音乐模块
在网易云音乐中，点开自己的歌单，将歌单进行分享，将分享连接中的id赋值到主题配置文件中的music.id属性即可。
手机端和web端网易云音乐分享连接内容：
# 手机移动端分享连接，id=621145115
http://music.163.com/playlist/2621145115/75636335/?userid=75636335
# 网页版网易云音乐，id=2621145115
https://music.163.com/#/my/m/music/playlist?id=2621145115
复制代码配置完成后，重新部署博客项目即可显示网易云歌单信息。
2.3 Aplayer 音乐插件
Hexo博客matery主题中添加音乐模块是使用Aplayer插件实现的，在实际使用时，如果已经为歌单生成了外链id并在博客配置中使用，那么之后歌单信息的更改不会同步到博客展示中。
对于该问题，我们可以使用以下方式进行解决：
- 可以通过重新创建新歌单的方式来更新博客歌曲信息
- 或者自己实现网易云歌单解析接口
3. 总结
Hexo+GitHub Pages实现博客看似简单，但是其扩展性很强，我们可以针对不同的主题设置博客实现各种丰富的功能。matery主题作者创建时便加入了许多功能，如音乐播放的配置只需要在配置文件中启用并传递id值即可。
浏览本文可以学到：
- 博客中添加音乐模块可以让我们在学习知识时倾听一些天籁，加快码字学习的步伐
- 既然添加了音乐模块，那么其他模块是不是也可以类似的进行使用呢，敬请期待。