Hexo博客安知鱼主题

【Hexo博客系列】No.2 美化Hexo博客

使用「安知鱼」主题，让你的博客瞬间好看起来！

主题推荐：安知鱼（AnZhiYu）
基于 Butterfly 深度美化 & 功能增强版本

这篇教程能帮你完成什么？

  • 安装并启用 安知鱼 主题
  • 使用覆盖配置文件（强烈推荐！）
  • 创建标签页、分类页
  • 修改文章默认模板（front-matter）
  • 实现文章置顶功能
  • 开启文章内本地搜索
  • 了解更多实用小技巧

一、安装安知鱼主题（两种方式任选）

方式一：通过 Git 克隆（推荐）

在博客根目录执行：

1
git clone -b main https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git themes/anzhiyu

方式二：手动下载（适合网络不稳定用户）

  1. 访问：https://github.com/anzhiyu-c/hexo-theme-anzhiyu
  2. 点击绿色「Code」按钮 → Download ZIP
  3. 解压后，将文件夹重命名为 anzhiyu，移动到 themes/ 目录下

必须安装的渲染器（只执行一次）

1
npm install hexo-renderer-pug hexo-renderer-stylus --save

二、启用主题 & 强烈推荐的覆盖配置方式

步骤1：修改主配置文件

打开 Hexo 根目录下的 _config.yml，找到 theme 一行，改为：

1
theme: anzhiyu

步骤2：创建高优先级覆盖配置文件（重要！）

为什么要用覆盖配置？
直接修改主题文件夹里的 _config.yml 会在下次 git pull 更新主题时被覆盖，导致自定义设置丢失。使用根目录的覆盖文件可以完美解决这个问题。

操作方法：

Linux / macOS 用户（推荐，一条命令搞定）：

1
cp -rf ./themes/anzhiyu/_config.yml ./_config.anzhiyu.yml

Windows 用户（手动操作）：

  1. 进入 themes/anzhiyu/ 文件夹
  2. 找到 _config.yml 文件
  3. 复制到博客根目录
  4. 重命名为：_config.anzhiyu.yml

以后所有主题相关的个性化设置，都建议写在这个 _config.anzhiyu.yml 文件里！

覆盖配置的优先级规则（必须记住）

  • _config.anzhiyu.yml 中的配置 > themes/anzhiyu/_config.yml
  • 更新主题后，务必对比官方更新日志，把新增的配置项同步到你的覆盖文件中（可以留空或注释，但不要直接删除键名）
  • 调试时可使用命令查看是否生效：
1
hexo g --debug

三、快速验证主题是否成功启用

1
2
3
4
5
6
7
8
9
10
// Git BASH终端
# 清理 + 启动本地服务器
hexo clean && hexo server
# 简写
hexo cl && hexo s

// 或者

// VSCODE终端
hexo cl; hexo s

浏览器打开：http://localhost:4000

看到全新的页面风格（而不是默认的 Landscape），说明主题已成功启用！

四、创建必要的独立页面

4.1 创建「标签」页面

1
hexo new page tags

打开 source/tags/index.md，完整修改为：

1
2
3
4
5
6
7
---
title: 标签
date: 2025-02-01 12:00:00
type: "tags"
comments: false
top_img: false
---

4.2 创建「分类」页面

1
hexo new page categories

打开 source/categories/index.md，完整修改为：

1
2
3
4
5
6
7
8
---
title: 分类
date: 2025-02-01 12:00:00
type: "categories"
comments: false
top_img: false
aside: false
---

保存后重新生成，就能看到导航栏或菜单中的标签页和分类页了。

五、优化文章默认模板（scaffolds）

Hexo 新建文章时会使用 /scaffolds/ 目录下的模板。

建议你打开以下两个文件做一些个性化预设（可按需修改）：

5.1 post.md模板

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
---
title: {{ title }} #【必需】页面标题
date: {{ date }} #【必需】页面创建日期
updated: #【可选】页面更新日期
tags: #【可选】文章标签
categories: #【可选】文章分类
keywords: #【可选】文章关键字
description: #【可选】文章描述
top: # 1 置顶
top_img: #【可选】文章顶部图片
comments: #【可选】显示文章评论模块(默认 true)
cover:   #【可选】文章缩略图(如果没有设置 top_img,文章页顶部将显示缩略图，可设为 false/图片地址/留空)
toc: #【可选】显示文章 TOC(默认为设置中 toc 的 enable 配置)
toc_number: #【可选】显示 toc_number(默认为设置中 toc 的 number 配置)
toc_style_simple: #【可选】显示 toc 简洁模式
copyright: #【可选】显示文章版权模块(默认为设置中 post_copyright 的 enable 配置)
copyright_author: #【可选】文章版权模块的文章作者
copyright_author_href: #【可选】文章版权模块的文章作者链接
copyright_url: #【可选】文章版权模块的文章作者链接
copyright_info: #【可选】文章版权模块的版权声明文字
mathjax: #【可选】显示 mathjax(当设置 mathjax 的 per_page: false 时，才需要配置，默认 false)
katex: #【可选】显示 katex(当设置 katex 的 per_page: false 时，才需要配置，默认 false)
aplayer: #【可选】在需要的页面加载 aplayer 的 js 和 css,请参考文章下面的音乐 配置
highlight_shrink: #【可选】配置代码框是否展开(true/false)(默认为设置中 highlight_shrink 的配置)
aside: #【可选】显示侧边栏 (默认 true)
swiper_index: 10 #【可选】首页轮播图配置 index 索引，数字越小越靠前
top_group_index: 10 #【可选】首页右侧卡片组配置, 数字越小越靠前
ai: #【可选】文章ai摘要
background: "#fff" #【可选】文章主色，必须是16进制颜色且有6位，不可缩减，例如#ffffff 不可写成#fff
---

<div class="video-container">
[up主专用，视频内嵌代码贴在这]
</div>

<style>
.video-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 aspect ratio (height/width = 9/16 * 100%) */
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>

5.2 page.md模板

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
---
title: {{ title }} #【必需】页面标题
date: {{ date }} #【必需】页面创建日期
type: #【必需】标签、分类、关于、音乐馆、友情链接、相册、相册详情、朋友圈、即刻页面需要配置
updated: #【可选】页面更新日期
comments: #【可选】显示页面评论模块(默认 true)
description: #【可选】页面描述
keywords: #【可选】页面关键字
top_img: https://img.090227.xyz/file/ae62475a131f3734a201c.png #【可选】页面顶部图片
mathjax: #【可选】显示 mathjax(当设置 mathjax 的 per_page: false 时，才需要配置，默认 false)
katex: #【可选】显示 katex(当设置 katex 的 per_page: false 时，才需要配置，默认 false)
aside: #【可选】显示侧边栏 (默认 true)
aplayer: #【可选】在需要的页面加载 aplayer 的 js 和 css,请参考文章下面的音乐 配置
highlight_shrink: #【可选】配置代码框是否展开(true/false)(默认为设置中 highlight_shrink 的配置)
top_single_background: #【可选】部分页面的顶部模块背景图片
---

六、实用功能快速开启

6.1 文章置顶（非常实用）

步骤：

  1. 安装置顶插件
1
npm install hexo-generator-topindex --save
  1. 在需要置顶的文章 front-matter 中添加：
1
2
3
4
5
6
7
8
9
---
title: 每天一个linux命令
date: 2017-01-23 11:41:48
top: 1          # 数字越大，置顶优先级越高
categories:
    - 运维
tags:
    - linux命令
---

6.2 开启本地搜索功能（强烈推荐）

  1. 安装搜索插件
1
npm install hexo-generator-search --save
  1. 在 _config.anzhiyu.yml 中添加/修改：
1
2
3
4
local_search:
  enable: true
  preload: false          # true = 进入页面就加载，false = 点击搜索框才加载
  CDN:                    # 留空使用本地文件

6.3 在网站根目录放置自定义文件

想放 robots.txt、ads.txt、favicon.ico 等文件？
直接 放到 source/ 目录下，Hexo 会自动复制到生成目录的根路径。

七、常用命令速查表

功能 命令简写 完整命令
清理缓存 hexo cl hexo clean
生成静态文件 hexo g hexo generate
本地预览 hexo s hexo server
部署 hexo d hexo deploy
新建文章 hexo n "标题" —
新建页面 hexo new page "页面名" —
清缓预览 hexo cl; hexo s —
发布更新 hexo cl; hexo g; hexo d —

参考资料

致谢