Hexo博客美化教程 - AnZhiYu主题配置

Hexo博客美化教程 - AnZhiYu主题配置

在上一篇文章中，我们介绍了如何搭建一个基础的Hexo博客。今天，我将为大家带来AnZhiYu主题的安装和配置教程。AnZhiYu是一款美观、功能丰富的Hexo主题，通过本教程，你将能够让你的博客焕然一新，拥有更加个性化的外观和功能。

1. 安装安知鱼主题

1.1. Git 安装

在博客根目录执行以下命令安装最新版主题：

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

第一次使用需要安装 pug 以及 stylus 的渲染器：

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

1.2. 应用主题

修改 hexo 配置文件_config.yml，把主题改为anzhiyu：

1
theme: anzhiyu

1.3. 覆盖配置

覆盖配置可以使主题配置放置在 anzhiyu 目录之外，避免在更新主题时丢失自定义的配置。

Linux系统执行以下命令：

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

Windows系统手动将/themes/anzhiyu/_config.yml复制到根目录下并重命名为_config.anzhiyu.yml，或使用以下命令：

1
2
# 在博客根目录下执行
cp themes/anzhiyu/_config.yml _config.anzhiyu.yml

注意事项：

  • 只要存在于 _config.anzhiyu.yml 的配置都是高优先级，修改原 _config.yml 是无效的
  • 每次更新主题可能存在配置变更，请注意更新说明
  • 可通过 hexo g --debug 查看覆盖配置是否生效
  • 如果想将某些配置覆盖为空，不要把主键删掉，否则无法覆盖

1.4. 本地预览与部署

1
2
3
4
5
# 本地预览
hexo cl; hexo s

# 推送更新上线
hexo cl; hexo g; hexo d

1.5. 生成标签页和分类页

生成标签页：

1
hexo new page tags

修改 source/tags/index.md：

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

生成分类页：

1
hexo new page categories

修改 source/categories/index.md：

1
2
3
4
5
6
7
---
title: 分类
date: 2025-07-21 12:00:00
type: "categories"
comments: false
top_img: false
---

2. 配置文章模版

2.1. post.md模版参考

在scaffolds/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: https://img.090227.xyz/file/ae62475a131f3734a201c.png #【可选】文章缩略图(如果没有设置 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>

2.2. page.md模版参考

在scaffolds/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: #【可选】部分页面的顶部模块背景图片
---

3. 主题基本配置

3.1. 菜单配置

菜单配置决定了网站顶部的导航栏内容，可以根据自己的需求进行调整：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
menu:
  文章:
    隧道: /archives/ || anzhiyu-icon-box-archive
    分类: /categories/ || anzhiyu-icon-shapes
    标签: /tags/ || anzhiyu-icon-tags
  友链:
    友人帐: /link/ || anzhiyu-icon-link
    朋友圈: /fcircle/ || anzhiyu-icon-artstation
    留言板: /comments/ || anzhiyu-icon-envelope
  我的:
    音乐馆: /music/ || anzhiyu-icon-music
    相册集: /album/ || anzhiyu-icon-images
    小空调: /air-conditioner/ || anzhiyu-icon-fan
  关于:
    关于本人: /about/ || anzhiyu-icon-paper-plane
    闲言碎语: /essay/ || anzhiyu-icon-lightbulb
    随便逛逛: javascript:toRandomPost() || anzhiyu-icon-shoe-prints1

格式为：页面名称: 链接地址 || 图标，其中图标使用的是AnZhiYu主题内置的图标库。

3.2. 社交链接配置

在侧边栏展示你的社交媒体链接：

1
2
3
4
5
6
social:
  Github: https://github.com/你的用户名 || anzhiyu-icon-github
  BiliBili: https://space.bilibili.com/你的ID || anzhiyu-icon-bilibili
  QQ: tencent://Message/?Uin=你的QQ号 || anzhiyu-icon-qq
  微博: https://weibo.com/你的用户名 || anzhiyu-icon-weibo
  知乎: https://www.zhihu.com/people/你的ID || anzhiyu-icon-zhihu

3.3. 头像配置

设置你的个人头像：

1
2
3
avatar:
  img: /img/avatar/Avatar.jpg
  effect: true  # 是否开启头像特效

3.4. 首页封面配置

配置首页顶部的封面图片和标题：

1
2
3
4
5
banner:
  tips: 个人博客
  title: 我的博客标题
  image: /img/4CB4B9060DB50206C98341C4CD589637.jpg
  link: /

3.5. 网站图标配置

设置网站的favicon图标：

1
favicon: /favicon.ico

4. 更多功能配置

4.1. 新建文章

新建博文命令：

1
hexo new post "文章标题"

新建标签页命令：

1
hexo new page "页面名称"

4.2. 文章置顶

安装插件：

1
2
npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save

设置置顶，在文章Front-matter中添加：

1
2
3
4
---
title: 文章标题
top: 1  # 数值越大越靠前
---

4.3. 开启本地搜索

安装插件：

1
npm install hexo-generator-searchdb --save

在站点配置文件_config.yml中添加：

1
2
3
4
5
search:
  path: search.xml
  field: post
  content: true
  format: html

在主题配置文件_config.anzhiyu.yml中设置：

1
2
3
4
local_search:
  enable: true
  preload: false
  CDN:

参数说明：

  • enable: 是否开启本地搜索
  • preload: 预加载，开启后进入网页会自动加载搜索文件
  • CDN: 搜索文件的CDN地址（默认使用本地链接）

4.4. 添加任意文件

如需在网站根目录添加文件（如ads.txt），只需在/source文件夹下放置该文件即可。

5. 进阶配置

5.1. 自定义样式

如果你想添加自定义CSS，可以在source/css目录下创建custom.css文件，然后在_config.anzhiyu.yml中引入：

1
2
3
inject:
  head:
    - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">

5.2. 自定义脚本

同样，你可以添加自定义JavaScript：

1
2
3
inject:
  bottom:
    - <script src="/js/custom.js"></script>

5.3. PWA支持

配置渐进式Web应用(PWA)支持：

1
2
3
4
5
6
7
8
9
pwa:
  enable: true
  manifest: /manifest.json
  theme_color: var(--anzhiyu-main)
  mask_icon: /img/siteicon/apple-icon-180.png
  apple_touch_icon: /img/siteicon/apple-icon-180.png
  bookmark_icon: /img/siteicon/apple-icon-180.png
  favicon_32_32: /img/siteicon/32.png
  favicon_16_16: /img/siteicon/16.png

5.4. 图片懒加载

配置图片懒加载以提高页面加载速度：

1
2
3
4
5
lazyload:
  enable: true
  field: site  # site或post
  placeholder:
  blur: true

5.5. 页面特效

配置各种页面特效：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 鼠标点击效果
fireworks:
  enable: true
  zIndex: 9999
  mobile: false

# 打字效果
activate_power_mode:
  enable: true
  colorful: true
  shake: true
  mobile: false

# 网站运行时间
runtimeshow:
  enable: true
  publish_date: 07/20/2023 00:00:00

# 深色模式
darkmode:
  enable: true
  button: true
  autoChangeMode: 1  # 1:跟随系统, 2:在特定时间切换, false:关闭自动切换

6. 常见问题解决

6.1. 图片路径问题

在AnZhiYu主题中，图片可以放在以下位置：

  1. 站点图片：放在source/img/目录下
  2. 文章图片：可以放在source/img/post/文章名/目录下，或者使用相对路径

6.2. 主题更新问题

更新AnZhiYu主题时，可以使用以下命令：

1
2
# 在themes/anzhiyu目录下执行
git pull

然后重新生成和部署网站。

6.3. 自定义页面问题

如果你想创建自定义页面（如友链页面），可以使用以下命令：

1
2
# 创建友链页面
hexo new page link

然后编辑source/link/index.md文件，添加以下内容：

1
2
3
4
5
---
title: 友情链接
date: 2025-07-21 12:00:00
type: "link"
---

7. 主题美化技巧

7.1. 添加网站动画

AnZhiYu主题支持多种网站动画效果，可以在配置文件中启用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 彩带背景
canvas_ribbon:
  enable: true
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: false
  mobile: false

# 动态彩带
canvas_fluttering_ribbon:
  enable: true
  mobile: false

# 粒子效果
canvas_nest:
  enable: true
  color: "0,0,255"
  opacity: 0.7
  zIndex: -1
  count: 99
  mobile: false

7.2. 自定义鼠标样式

可以通过CSS自定义鼠标指针样式：

1
2
3
4
5
6
7
8
/* 在source/css/custom.css中添加 */
body {
  cursor: url('/img/cursor/normal.cur'), auto;
}

a, button, .button, #article-container a.btn, input[type="button"], input[type="reset"], input[type="submit"] {
  cursor: url('/img/cursor/pointer.cur'), auto !important;
}

然后将自定义鼠标图标放在source/img/cursor/目录下。

7.3. 添加网站背景

设置网站背景图片：

1
2
3
4
# 在_config.anzhiyu.yml中添加
background:
  url: /img/background.jpg
  opacity: 1

8. 参考资源

9. 总结

通过本教程，我们详细介绍了AnZhiYu主题的安装和配置方法。从基本配置到进阶设置，每一步都有详细的说明和示例。通过这些配置，你可以打造一个独具个性的博客网站。

AnZhiYu主题功能丰富，配置灵活，适合各种类型的个人博客。希望这篇教程能帮助你顺利配置出一个美观、实用的个人博客！

如果你在配置过程中遇到任何问题，欢迎在评论区留言讨论。祝你的博客之旅愉快！