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. 覆盖配置

为了减少主题升级时的冲突，推荐使用覆盖配置的方式。

Linux 系统执行以下命令：

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

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

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

注意：

  • 不要把主题目录的 _config.yml 删掉
  • 以后只需要在 _config.anzhiyu.yml 进行配置就行
  • 如果使用了 _config.anzhiyu.yml，配置主题的 _config.yml 将不会有效果

1.4. 本地预览与部署

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

# 生成并部署
hexo cl; hexo g; hexo d

2. 创建必要页面

2.1. 标签页和分类页

生成标签页：

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
---

3. 配置文章模版

3.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
---
title: {{ title }}
date: {{ date }}
updated:
tags:
categories:
keywords:
description:
top:
top_img:
comments:
cover: https://img.090227.xyz/file/ae62475a131f3734a201c.png
toc:
toc_number:
toc_style_simple:
copyright:
copyright_author:
copyright_author_href:
copyright_url:
copyright_info:
mathjax:
katex:
aplayer:
highlight_shrink:
aside:
swiper_index: 10
top_group_index: 10
ai:
background: "#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>

3.2. page.md 模版参考

在scaffolds/page.md中配置以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
---
title: { { title } }
date: { { date } }
type:
updated:
comments:
description:
keywords:
top_img: https://img.090227.xyz/file/ae62475a131f3734a201c.png
mathjax:
katex:
aside:
aplayer:
highlight_shrink:
top_single_background:
---

4. 主题基本配置

4.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 主题内置的图标库。

4.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

4.3. 头像配置

设置你的个人头像：

1
2
3
avatar:
  img: /img/avatar/Avatar.jpg
  effect: true

4.4. 首页封面配置

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

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

4.5. 网站图标配置

设置网站的 favicon 图标：

1
favicon: /favicon.ico

5. 更多功能配置

5.1. 新建文章

使用以下命令创建新文章：

1
hexo new post "文章标题"

5.2. 文章封面

AnZhiYu 主题支持为每篇文章设置封面图片，在文章的 Front Matter 中添加：

1
cover: https://your-image-url.jpg

5.3. 文章置顶

在文章的 Front Matter 中添加：

1
top: true

5.4. 评论系统

AnZhiYu 主题支持多种评论系统，如 Gitalk、Valine 等。在主题配置文件中进行相应配置。

6. 高级配置

6.1. 自定义 CSS

创建 source/css/custom.css 文件，添加自定义样式：

1
2
3
4
5
/* 自定义样式 */
.custom-style {
  color: #333;
  font-size: 16px;
}

6.2. 自定义 JavaScript

创建 source/js/custom.js 文件，添加自定义脚本：

1
2
// 自定义脚本
console.log("Hello AnZhiYu!");

6.3. 背景设置

配置网站背景：

1
2
3
background:
  url: /img/background.jpg
  opacity: 1

7. 部署与优化

7.1. 生成静态文件

1
hexo generate

7.2. 部署到服务器

1
hexo deploy

7.3. 性能优化

  • 压缩图片大小
  • 使用 CDN 加速
  • 启用缓存机制

8. 参考资源

总结

通过本教程，你应该已经成功安装并配置了 AnZhiYu 主题。这个主题提供了丰富的自定义选项，你可以根据自己的喜好进行进一步的个性化设置。

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