添加背景音樂（截圖爲APlayer播放器）
簡單版：網易雲外鏈
參考：
步驟：
1.到網易雲官網獲取音樂外鏈：搜索音樂–>生成外鏈播放器（使用iframe插件形式）–>複製代碼
2.打開路徑 themes/yilia/layout/_partial/left-col.ejs，在最後一個</nav>上面添加代碼，就像下面這樣。注意是否需要自動播放，建議不要設置爲自動播放（src中的auto=0表示不自動播放，如果是1就自動播放）。
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=228 height=86
src="//music.163.com/outchain/player?type=2&id=1371939273&auto=0&height=66"></iframe>
</nav>
3.根據需要設置寬高屬性，寬建議228。
4.爲了方便起見，設置成能夠在主題的配置文件中開啓和關閉的形式：
<!-- 《左側邊欄添加--網易雲音樂插件 -->
<!-- https://www.writebug.site/2018/04/21/hexo-yilia個性化之-添加背景音樂/ -->
<% if(theme.simple_163_music && theme.simple_163_music.enable){ %>
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=228 height=86 src="//music.163.com/outchain/player?type=2&id=1371939273&auto=0&height=66"></iframe>
<% } %>
<!-- 網易雲音樂插件》-->
同時需要在主題的配置文件themes/yilia/_config.yml中開啓：
# 音樂
# 簡單的網易雲音樂
simple_163_music:
enable: true
如需關閉設置爲false。
複雜版：APlayer音樂播放器
參考：
- Hexo全局添加APlayer音樂播放器
- APlayer官網：https://aplayer.js.org
- github倉庫：https://github.com/MoePlayer/APlayer
- 使用說明：https://aplayer.js.org/#/zh-Hans/
安裝步驟
1.打開路徑 themes/yilia/layout/_partial/left-col.ejs，在最後一個</nav>上面添加代碼，就像下面這樣。
<!-- 《左側邊欄添加--APlayer音樂播放器 -->
<% if(theme.aplayer.enable) { %>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.css">
<!-- // 這裏div的樣式是筆者自己修改過的，你可以直接使用APlayer官方的原配置：<div id="aplayer"></div> -->
<div id="aplayer" style="position:absolute;left;0;bottom:0;"></div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/src/color-thief.js"></script>
<script>
const ap = new APlayer({
container: document.getElementById('aplayer'),
autoplay: false,
listFolded: true,
listMaxHeight: 90,
order: 'list',
loop: 'all',
theme: '#b7daff',
preload: 'none',
mutex: true,
lrcType: 3,
volume: 0.7,
fixed: true,
audio: [{
name: '親愛的旅人啊（Cover：木村弓）',
artist: '周深',
lrc: '/music/lrc/親愛的旅人啊（Cover：木村弓）-周深.lrc',
cover: 'http://p1.music.126.net/1YrCPOBV314i-mTtlDg8mQ==/109951164148664637.jpg?param=300x300',
url: 'http://m10.music.126.net/20191102134206/7c499bc0065a03c980aa04817b2b7b2b/ymusic/555f/525a/5258/b5f91cd86ce0046a6f70e249d0802a1e.mp3'
},
{
name: '陳情令：無羈',
artist: 'Silu Wang',
lrc: '',
cover: 'http://p2.music.126.net/8eL7nls1F8o48_umy0uqBQ==/109951164361652548.jpg?param=300x300',
url: 'http://m10.music.126.net/20191102144314/e85a4a99852144dced7bc7eace047ecc/ymusic/015d/550f/5152/67f6f0756ebe8bd362f5f85c507acf68.mp3'
}
]
});
<!-- 根據封面自適應主題色 -->
const colorThief = new ColorThief();
const setTheme = (index) => {
if (!ap.list.audios[index].theme) {
colorThief.getColorAsync(ap.list.audios[index].cover, function(color) {
ap.theme(`rgb(${color[0]}, ${color[1]}, ${color[2]})`, index);
});
}
};
setTheme(ap.list.index);
ap.on('listswitch', (data) => {
setTheme(data.index);
});
</script>
<% } %>
<!-- 左側邊欄添加--APlayer音樂播放器》 -->
2.同時需要在主題的配置文件themes/yilia/_config.yml中開啓：
# 添加APlayer音樂播放器，官網：https://aplayer.js.org
# github: https://github.com/MoePlayer/APlayer
aplayer:
enable: true
如需關閉設置爲false。
說明
1.存在問題：fixed: true模式下，歌曲列表高度listMaxHeight好像無效。
2.使用：音樂直鏈搜索：https://music.liuzhijin.cn/ 查找的歌曲好像有限制，就是如果使用太頻繁，會被拒絕訪問（響應碼403，有點像禁爬蟲）。可以使用七牛雲存儲對應MP3文件。（歌詞好像是沒有顯示的）
3.對於有些歌曲沒有歌詞的情況（如上面的第二首歌），不建議直接置爲空lrc: '',，這樣會出現問題：一開始可能沒有問題，如果設置循環，第二次時就會報錯–找不到歌詞。建議：添加同名歌詞文件，如/music/lrc/無羈 - Silu Wang-陳情令.lrc，歌詞內容置爲空，如：[00:00.00] 暫無歌詞，這樣就不會出現類似問題。
補充🐛
上面說到的歌曲列表高度listMaxHeight問題，應該是一個bug，詳見：listMaxHeight does not work and no scroll in Fixed mode，但是可以不進行設置，因爲它有一個默認值250px。
更新
將配置分開，方便修改。
<!-- 《左側邊欄添加--APlayer音樂播放器：詳見：https://aplayer.js.org/#/zh-Hans/ -->
<% if(theme.aplayer.enable) { %>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.css">
<div id="aplayer" style="text-align:left"></div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/src/color-thief.js"></script>
<!-- 爲方便修改，添加一個配置文件，修改時直接修改配置文件即可。 -->
<script type="text/javascript" src="<%- url_for('js/APlayer_config.js') %>"></script>
<!-- 根據封面自適應主題色，主要是作用於進度條 -->
<script type="text/javascript">
const colorThief = new ColorThief();
const setTheme = (index) => {
if (!ap.list.audios[index].theme) {
colorThief.getColorAsync(ap.list.audios[index].cover, function(color) {
ap.theme(`rgb(${color[0]}, ${color[1]}, ${color[2]})`, index);
});
}
};
setTheme(ap.list.index);
ap.on('listswitch', (data) => {
setTheme(data.index);
});
</script>
<% } %>
<!-- 左側邊欄添加--APlayer音樂播放器》 -->
配置文件H:\Hexo\themes\yilia\source\js\APlayer_config.js:
const ap = new APlayer({
container: document.getElementById('aplayer'),
fixed: true,
autoplay: false,
theme: '#b7daff',
loop: 'all',
order: 'list',
preload: 'auto',
volume: 0.5,
lrcType: 3,
mutex: true,
listFolded: false,
audio: [{
name: '一直很安靜',
artist: '阿桑',
lrc: '/music/lrc/一直很安靜 - 阿桑.lrc',
cover: 'https://p1.music.126.net/SpovasHBud2A1qXXADXsBg==/109951163167455610.jpg?param=300x300',
url: 'http://q0fzyzixq.bkt.clouddn.com/audio/mp3/一直很安靜 - 阿桑.mp3'
},
{
name: '親愛的旅人啊（Cover：木村弓）',
artist: '周深',
lrc: '/music/lrc/親愛的旅人啊（Cover：木村弓）-周深.lrc',
cover: 'https://p1.music.126.net/1YrCPOBV314i-mTtlDg8mQ==/109951164148664637.jpg?param=300x300',
url: 'http://q0fzyzixq.bkt.clouddn.com/audio/mp3/親愛的旅人啊（Cover：木村弓） - 周深.mp3'
}
]
});
分開後，如果需要更新歌曲，只需要更新音樂的配置文件APlayer_config.js就可以了，而不是修改主題的佈局文件。
文章首發於：hexo+yilia添加背景音樂
