1. 新建文章

1.1 第一种方法 控制台创建文件

在控制台输入 hexo new "标题名" hexo 会在 /source/_posts/ 下自动创建一个 Markdown 文件，该文件会包含 Front-Matter

1.2 第二种方法 手动创建

自己在 /source/_posts/ 文件夹下创建一个 Markdown 文件，其中需要手动配置 Front-Matter 

1
2
3
4
5
6
---
title: Hexo 起步 && 配置 Butterfly 主题
date: 2026-03-11 14:06:59
tags: [Hexo, 笔记]
categories: 学习笔记
---

其中的 tags 和 categories 分别为标签和分类标识，之后在文章内也会有说明

2. 设置文章分类

2.1 为文章设置分类

在每个文章的 Front-Matter 里面的 categories 字段内可以设置文章的分类

1
2
3
4
5
单个文章分类直接写即可
categories: 笔记

多个文章分类使用列表
categories: [笔记，HEXO]

2.2 创建分类展示页面

在 /source 文件夹下创建 categories 文件夹，在里面新建 index.md 文件

创建的该页面为独立页面，用于展示本网站的所有分类

1
2
3
4
5
---
title: 分类
date: 2026-03-11 13:38:40
type: 'categories'
---

这样页面就创建好了，还需要修改一个地方才能展示到首页的导航栏中

在 Butterfly 的配置文件中找到 menu 配置并修改

1
2
3
4
5
menu:
   首页: / || fas fa-home
   分类: /categories/ || fas fa-th
   归档: /archives/ || fas fa-archive
   标签: /tags/ || fas fa-tags

这样在页面顶部的导航菜单处就能看到了

3. 设置文章标签

与上面的设置文章分类大致类似，也是分为在文章内部的 Front-Matter 添加 tags 字段

对于独立页面在 /source 创建 tags 文件夹，在里面创建 index.md 文件

该文件的配置如下

1
2
3
4
5
---
title: 标签云
date: 2026-03-11 14:06:02
type: 'tags'
---

然后再修改导航栏菜单即可，与创建标签一致

4. 修改字体

4.1 创建字体文件

  1. 在项目根目录的 /source 中创建 css 文件夹和 font 文件夹
  2. 在 font 文件夹中存放你的字体文件
  3. 在 css 文件夹中新建 font.css 文件
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
@font-face {
  font-family: 'MyFont';
  src: url('/font/font.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

/* 引入代码字体（shaonv.ttf） */
@font-face {
  font-family: 'MyCodeFont';
  src: url('/font/JetBrainsMono-Medium.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* 设置全局字体 */
body, .article-entry {
  font-family: 'MyFont', "Georgia", "Arial", sans-serif;
  font-size: 16px;
  line-height: 1.7;
}

.article-entry h1,
.article-entry h2,
.article-entry h3,
.article-entry h4,
.article-entry h5,
.article-entry h6 {
  font-family: 'MyFont', "Georgia", "Arial", sans-serif;
}

/* 设置代码字体 */
code, pre .article-entry code, .article-entry pre {
  font-family: 'MyCodeFont', "Fira Code", "Courier", monospace;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
}

4.2 引入文件

然后引入 css 文件

在 butterfly 的配置文件中找到 inject 和 font 设置

注意别忘了引入前面还有个 -

1
2
3
4
5
6
inject:
  head:
    # - <link rel="stylesheet" href="/xxx.css">
    - <link rel="stylesheet" href="/css/font.css">
  bottom:
    # - <script src="xxxx"></script>
1
2
3
4
5
font:
  global_font_size: 16px
  code_font_size: 16px
  font_family: MyFont, "Georgia", "Arial", sans-serif
  code_font_family: MyCodeFont, "Fira Code", "Courier", monospace

重启 hexo 即可

5. 设置全局音乐播放器

5.1 安装插件

1
npm install --save hexo-tag-aplayer

5.2 修改配置文件

在 HEXO 的配置文件 _config.yml 文件内添加下面内容，这个配置文件里面没有需要手动添加

1
2
3
aplayer:
  meting: true
  asset_inject: false

然后在 Butterfly 的配置文件 _condig.butterfly.yml 内修改

1
2
3
4
# Inject the css and script (aplayer/meting)
aplayerInject:
  enable: true
  per_page: true

然后在配置文件内添加播放器

1
2
3
4
inject:
  head:
  bottom:
    - <div class="aplayer no-destroy" data-id="60198" data-server="netease" data-type="playlist" data-fixed="true" data-autoplay="true"> </div>

如果发现音乐播放器不显示了，那么大概率是 APlayer 的 api 挂了，就需要手动换 api

在 _condig.butterfly.yml 该文件下找到 inject 字段，在不修改其他内容的情况下，添加下面的内容

1
2
3
inject:
  head:
    - <script> window.meting_api = "https://api.injahow.cn/meting/?server=:server&id=:id&type=:type&r=:r";</script>

这个网站如果失效的话，还可以进行更换

注意：是 https://api.injahow.cn/meting/ 而不是 https://api.injahow.cn/meting ，不能丢掉这个/

5.3 参数说明

参数 默认值 说明
data-id 必填 歌曲 ID / 歌单 ID / 专辑 ID / 搜索关键词
data-server 必填 音乐平台：netease、tencent、kugou、xiami、baidu
data-type 必填 类型：song、playlist、album、search、artist
data-fixed false 是否启用固定模式（页面底部播放器）
data-mini false 是否启用迷你模式
data-autoplay false 是否自动播放
data-theme #2980b9 播放器主题颜色
data-loop all 循环方式：all（列表循环）、one（单曲循环）、none（不循环）
data-order list 播放顺序：list（顺序播放）、random（随机播放）
data-preload auto 预加载方式：none、metadata、auto
data-volume 0.7 默认音量（播放器会记住用户设置，用户修改后此值不再生效）
data-mutex true 防止多个播放器同时播放，当前播放器播放时会暂停其他播放器
data-lrctype 0 歌词类型
data-listfolded false 是否默认折叠播放列表
data-listmaxheight 340px 播放列表最大高度
data-storagename metingjs localStorage 中保存播放器设置的键名

5.4 常见问题

音乐不能自动播放

对于 data-autoplay 这个参数，即使设置了 true 也会不能自动播放

现代浏览器（如 Google Chrome、Microsoft Edge、Safari）默认禁止页面自动播放带声音的音频。

所以不能自动播放也是正常的

但是有一个解决方法，就是使用 js 监听用户点击，当用户点击页面然后播放

具体实现方法如下

  1. 在 /source 下新建 js 文件夹，在文件夹内新建 autoplayer.js 文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// Butterfly 自动播放脚本
window.addEventListener("load", function () {

  // 定义触发播放函数
  function tryPlay() {
    if (window.aplayers && window.aplayers.length > 0) {
      window.aplayers.forEach(ap => {
        if (ap && typeof ap.play === "function") {
          try {
            ap.play() // 尝试播放
          } catch (err) {
            console.log("播放失败:", err)
          }
        }
      })
    }
  }

  // 用户第一次点击触发
  document.addEventListener("click", tryPlay, { once: true })
})
  1. 在 Butterfly 的配置文件中找到 inject 的 bottom 字段修改为
1
2
3
4
inject:
  bottom:
    # - <script src="xxxx"></script>
    - <script src="/js/autopalyer.js"></script>
  1. 使用 hexo clean 清除，然后重新启动服务即可

音乐播放一段自动切换

这是因为该音乐可能是 VIP 专享或者音乐平台无版权等原因

6. 设置文章卡片和侧面卡片毛玻璃效果

在 /source/css 下创建 custom.css 文件，如果有了直接在里面添加即可

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
/* 首页文章卡片 */
.recent-post-item {
  background: rgba(255,255,255,0.75) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* 文章页 */
#post {
  background: rgba(255,255,255,0.75) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* 归档页面 */
#archive {
  background: rgba(255,255,255,0.75) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* tags categories 页面 */
#page {
  background: rgba(255,255,255,0.75) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* 侧边栏卡片 */
#aside-content .card-widget {
  background: rgba(255,255,255,0.75) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* 清除侧边栏内部背景 */
#aside-content .card-widget > div {
  background: transparent !important;
}

/* 深色模式 */
[data-theme="dark"] .recent-post-item,
[data-theme="dark"] #post,
[data-theme="dark"] #archive,
[data-theme="dark"] #page,
[data-theme="dark"] #aside-content .card-widget {
  background: rgba(25,25,25,0.7) !important;
}

然后在 Butterfly 主题的配置文件内找到 inject 字段，并添加 css 文件

这个 font.css 文件是之前修改字体的文件，如果你没有这个文件就不需要写那一行了

1
2
3
4
5
inject:
  head:
    # - <link rel="stylesheet" href="/xxx.css">
    - <link rel="stylesheet" href="/css/font.css">
    - <link rel="stylesheet" href="/css/custom.css">

7. 设置 sitemap

为了便于网站进行 SEO 操作，需要使用到网站地图

安装插件

1
npm install hexo-generator-sitemap --save

在 HEXO 的配置文件 _config.yml 进行添加

我设置了不收录 css 和 js 文件，具体需要请自行配置

1
2
3
4
5
6
7
8
9
10
11
12
sitemap:
  path: sitemap.xml
  rel: false
  tags: false
  categories: false
  include:
    - /posts/*
    - /
  exclude:
    - /js/*
    - /css/*
    - /images/*

对于某些文章不想进行收录，可以配置

1
2
3
4
5
---
title: lorem ipsum
date: 2026-01-02
sitemap: false
---

然后访问 https://你的域名/sitemap.xml 就能看到你的网站地图了