开启 Pjax 无感刷新：点击链接不跳转页面

这个配置能让博客内点击链接时 无刷新切换页面 ，浏览体验更丝滑。

操作路径：修改 [Blogroot]/_config.butterfly.yml 的以下配置

1
2
3
4
5
6
7
8
9
10
11
12
# Pjax无刷新页面切换（参考文档：https://github.com/MoOx/pjax）
pjax:
  # 是否启用：设为true即可开启全局无感刷新
  enable: true
  # 排除不使用Pjax的页面（比如音乐页等，按需添加）
  exclude:
  # - /xxxxxx/

# 自定义CDN加速（可选，让Pjax资源加载更快）
CDN:
  option:
    pjax: https://cdn.jsdmirror.com/npm/[email protected]/pjax.min.js

配置侧边折叠音乐插件：美观不占地

通过 Aplayer+Meting 实现侧边折叠式音乐播放器（默认只露箭头，hover 展开），兼顾氛围与页面整洁。

步骤 1：开启 Hexo 的 Aplayer 插件

操作路径：在 [Blogroot]/_config.yml 末尾添加（无则新增）

1
2
3
4
5
# APlayer（音乐播放器依赖，需先开启）
# 文档：https://github.com/MoePlayer/hexo-tag-aplayer/blob/master/docs/README-zh_cn.md
aplayer:
  meting: true  # 启用Meting（对接网易云/QQ音乐等平台）
  asset_inject: false

步骤 2：在 Butterfly 主题中配置播放器

操作路径：修改 [Blogroot]/_config.butterfly.yml 的以下配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 注入Aplayer相关资源（必须启用）
aplayerInject:
  enable: true    # 总开关：开
  per_page: true  # 所有页面都加载播放器

# 注入自定义样式+播放器容器
inject:
  head:
    # 引入自己写的播放器折叠样式（后面会贴代码）
    - <link rel="stylesheet" href="/css/aplayer.css">
  bottom:
    # 网易云歌单配置：data-id填你的歌单ID，其他参数按需调
#    - <div class="aplayer no-destroy" data-id="7510894589" data-server="netease" data-type="playlist" data-fixed="true" data-mini="true" data-listFolded="false" data-order="random" data-preload="none" data-autoplay="false" muted></div>
    - <meting-js class="aplayer no-destroy" server="netease" type="playlist" id="7510894589" fixed="true" mini="true" list-folded="false" list-max-height="300px" autoplay="false" theme="#ff7e79" loop="all" order="random" preload="none" muted="false"></meting-js>

# 配置CDN加速音乐播放器资源
CDN:
  option:
    aplayer_css: https://cdn.jsdmirror.com/npm/aplayer/dist/APlayer.min.css
    aplayer_js: https://cdn.jsdmirror.com/npm/aplayer/dist/APlayer.min.js
    meting_js: https://cdn.jsdmirror.com/npm/meting@2/dist/Meting.min.js

步骤 3：添加 “侧边折叠” 样式

操作路径：新建 [Blogroot]/source/css/aplayer.css ，写入以下代码

（作用：让播放器默认缩在左侧只露箭头，鼠标悬浮时完整展开）

1
2
3
4
5
6
7
8
9
10
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
    left: -66px !important;
    /* 默认情况下缩进左侧66px，只留一点箭头部分 */
}

.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {
    left: 0 !important;
    /* 鼠标悬停是左侧缩进归零，完全显示按钮 */
}

我的 CDN 配置参考（加速资源加载）

如果觉我的 CDN 加载速度不错，可以直接复用这个 CDN 配置（修改[Blogroot]/_config.butterfly.yml）

1
2
3
4
5
6
7
8
9
10
11
12
13
# CDN设置（内部+第三方资源加速）
CDN:
  internal_provider: local
  third_party_provider: jsdelivr
  version: true
  option:
    aplayer_css: https://cdn.jsdmirror.com/npm/aplayer/dist/APlayer.min.css
    aplayer_js: https://cdn.jsdmirror.com/npm/aplayer/dist/APlayer.min.js
    meting_js: https://cdn.jsdmirror.com/npm/meting@2/dist/Meting.min.js
    fontawesome: https://cdn.bootcdn.net/ajax/libs/font-awesome/7.0.1/css/all.min.css
    pjax: https://cdn.jsdmirror.com/npm/[email protected]/pjax.min.js
    waline_css: https://cdn.bootcdn.net/ajax/libs/waline/3.6.0/waline.min.css
    waline_js: https://cdn.bootcdn.net/ajax/libs/waline/3.6.0/waline.min.js