博客一眼看过去，感觉还是单调了些，于是就有了在博客里添加播放器的冲动（虽然加播放器也改变不了多少）。

看了下 APlayer的文档，发现似乎还是可行的，然后就动手改了，顺便上了 pjax 来避免切换页面导致音乐播放停止。

我是直接在主题文件（hexo-theme-landscape）里改的，但有缺点：如果要在其他设备写博客或修改博客，都要用到被修改的主题文件；改 js 有点麻烦。所以可能还是直接装插件更好些。大致修改如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- 在 hexo-theme-landscape/layout/_partial/head.ejs 引入 APlayer.min.css -->
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.css">
    <style>
      /* from blog.saop.cc/p/8dc9/#全局吸底伸缩 */
      @media (max-width: 960px) {
        .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
          left:-66px!important
        }
        .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {
          left:0!important
        }
      }
    </style>
......
</head>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!-- 文件 hexo-theme-landscape/layout/layout.ejs -->
<!DOCTYPE html>
<html>

<!-- layout.ejs 原主体部分 -->
<%- partial('_partial/head') %>
<body>
  <div id="container">
    <div id="wrap">
      <%- partial('_partial/header', null, {cache: !config.relative_link}) %>
      <div class="outer">
        <section id="main"><%- body %></section>
        <% if (theme.sidebar && theme.sidebar !== 'bottom'){ %>
          <%- partial('_partial/sidebar', null, {cache: !config.relative_link}) %>
        <% } %>
      </div>
      <%- partial('_partial/footer', null, {cache: !config.relative_link}) %>
    </div>
    <%- partial('_partial/mobile-nav', null, {cache: !config.relative_link}) %>
    <%- partial('_partial/after-footer') %>
  </div>
</body>

<!-- 使用 PJAX 避免播放中断 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/jquery.pjax.min.js"></script>
<script>$(document).pjax('a[target!=_blank]', '#container', {timeout:3000, fragment:'#container'});</script>

<!-- 添加 APlayer.min.js 以及播放列表，或者可以在 hexo-theme-landscape/source 内添加 js 播放列表 -->
<div id="aplayerallpages">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.js"></script>
<script>
const apall = new APlayer({
    container: document.getElementById('aplayerallpages'),
    fixed: true,
    autoplay: false,
    loop: 'all',
    order: 'list',
    preload: 'metadata',
    volume: 0.5,
    mutex: true,
    listFolded: false,
    audio: [
    {
        name: "01",
        artist: 'a1',
        url: '01.flac',
        theme: '#9F604C'
    },
    {
        name: "02",
        artist: 'a2',
        url: '02.flac',
        theme: '#9F604C'
    }
    ]
});
</script>
</div>
</html>

2024.02.20更新
现在的话使用了 butterfly 主题，直接在主题的配置文件修改就行，详情见文档