偶尔搜文章的时候发现有个 Blog 也是 Hexo, 但是有背景音乐呀。于是我也准备搞一下。
本方法主要参考了这两篇博客 [1][2]。
编辑 hexo 的主题 Next 中的 layout 文件夹中的_layout.swig。在 body 中插入以下依赖。
1
2
3
4
5
6
| <!-- 引用依赖 -->
<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>
<script src="https://cdn.jsdelivr.net/npm/meting@1.2.0/dist/Meting.min.js"></script>
|
然后在 body 后面插入以下文件，具体参数可以看 Aplayer 的 wiki。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <!-- 我使用的APlayer本体 -->
<div class="aplayer"
data-list-folded="true"
data-fixed="true"
data-mini="false"
data-autoplay="true"
data-order="random"
data-volume="0.55"
data-theme="#cc543a"
data-preload="auto"
data-id="1402462271"
data-server="netease"
data-type="song"
>
</div>
<!--如果将本体放在body里面导致页面加载出现问题，请尝试放到body体后面-->
|
当然，要是想在各页面中无缝切换需要在_config.yaml 中将 pjax 改为 true。
最后执行以下代码：
1
2
| hexo clean
hexo generate
|