Hexo-github搭建个人博客(5):添加背景音乐

使用Aplayer + MetingJS插件实现全局背景音乐

1.添加音乐

打开我们主题文件：themes\next\layout_macro\sidebar.swig找到sidebar-inner，复制下面代码粘贴到此<div class="sidebar-inner">标签后即可。

<aside class="sidebar">
  <div class="sidebar-inner">

 <!-- 新增背景音乐播放：require APlayer -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">
 <script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
 <!-- require MetingJS-->
 <script src="https://cdn.jsdelivr.net/npm/meting@1.2/dist/Meting.min.js"></script> 
 <!--网易云-->   
 <div class="aplayer" 
   data-id="4916164702" 
   data-server="netease" 
   data-type="playlist" 
   data-fixed="true" 
   data-autoplay="true" 
   data-list-folded="true"
   data-mutex="true"
   data-order="random" 
   data-loop="all"
   data-volume="0.4" 
   data-theme="#FADFA3" 
   date-preload="auto" > 
 </div>

如果采用外链插件形式，则插入外链代码即可：

1 2	<!--网易云--> <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=110 src="//music.163.com/outchain/player?type=0&id=31967223&auto=1&height=90"></iframe>

网易云音乐外链产生方式自己研究,自己替换上述的data-id, 其他具体属性请参考如下说明:

2.实现全局跳转页面不影响播放的音乐

在next配置文件_config.yml中找到如下两个字段进行设置:

1
2
3

pjax: true
...
pjax: //cdn.jsdelivr.net/gh/theme-next/theme-next-pjax@0/pjax.min.js

这个pjax如果不采用cdn站,也可以下载其仓库,具体参考说明:PJAX for NexT

3.隐藏歌词

歌词显示会影响文章阅读,歌词能不显示是最好的,将MetingJS URL替换一下即可解决:
将themes\next\layout\_macro\sidebar.swig文件中的如下URL:

1 2	<!-- 显示歌词的 MetingJS URL --> <script src="https://cdn.jsdelivr.net/npm/meting@1.2/dist/Meting.min.js"></script>

替换成隐藏歌词的URL:

1 2	<!-- 隐藏歌词的 MetingJS URL --> <script src="https://cdn.jsdelivr.net/gh/SerokSSR/cdn/meting.min.js"></script>