Hexo AnZhiYu 主题个性化配置完整指南 🎨

by claude 4.0 sonnet

本文将详细介绍如何对 Hexo AnZhiYu 主题进行个性化配置，包括解决常见问题和实现个性化功能。通过本教程，您将学会：

  • 🏷️ 配置标签页动态标题功能
  • 🏠 设置首页分类展示
  • 📝 管理文章分类和标签
  • 🔧 理解主题配置机制
  • 🚀 部署和维护博客

📋 前置知识

在开始之前，您需要了解：

  • Hexo 静态网站生成器基础
  • YAML 配置文件语法
  • 基本的前端知识（HTML、CSS、JavaScript）
  • Git 版本控制基础

🔧 核心配置文件

主题配置文件优先级

AnZhiYu 主题支持多种配置方式，优先级从高到低：

  1. _config.anzhiyu.yml - 用户自定义配置（推荐）
  2. _config.yml 中的 theme_config - 站点配置中的主题配置
  3. themes/anzhiyu/_config.yml - 主题默认配置

创建自定义配置文件

1
2
# 复制主题默认配置到根目录
cp themes/anzhiyu/_config.yml _config.anzhiyu.yml

这样做的好处：

  • ✅ 主题更新时不会丢失自定义配置
  • ✅ 配置管理更加清晰
  • ✅ 支持版本控制跟踪

🏷️ 标签页动态标题配置

功能介绍

标签页动态标题是一个有趣的交互功能：

  • 当用户离开当前标签页时，显示挽留文字
  • 当用户返回标签页时，显示欢迎文字
  • 2秒后恢复原始标题

实现原理

该功能基于浏览器的 Page Visibility API：

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
// 位置：themes/anzhiyu/source/js/main.js
function changeDocumentTitle() {
  let leaveTitle = GLOBAL_CONFIG.diytitle.leaveTitle;
  let backTitle = GLOBAL_CONFIG.diytitle.backTitle;
  let OriginTitile = document.title;
  let titleTime;

  document.addEventListener("visibilitychange", function () {
    if (document.hidden) {
      // 离开当前页面时标签显示内容
      document.title = leaveTitle;
      clearTimeout(titleTime);
    } else {
      // 返回当前页面时标签显示内容
      document.title = backTitle + OriginTitile;
      // 两秒后变回正常标题
      titleTime = setTimeout(function () {
        document.title = OriginTitile;
      }, 2000);
    }
  });
}

// 在页面加载完成后启用功能
GLOBAL_CONFIG.diytitle && changeDocumentTitle();

配置方法

在 _config.anzhiyu.yml 中添加或修改：

1
2
3
4
5
# 标签页动态标题
diytitle:
  enable: true
  leaveTitle: 莫愁前路无知己
  backTitle: 天下谁人不识君

常见问题解决

问题1：配置不生效

原因：主题的默认配置脚本可能覆盖了自定义配置。

解决方案：修改 themes/anzhiyu/scripts/events/merge_config.js：

1
2
3
4
5
diytitle: {
  enable: true,
  leaveTitle: "莫愁前路无知己",
  backTitle: "天下谁人不识君",
},

问题2：功能在某些浏览器不工作

原因：Page Visibility API 兼容性问题。

解决方案：该 API 在现代浏览器中支持良好，建议升级浏览器版本。

🏠 首页分类展示配置

功能介绍

首页顶部分类展示可以：

  • 展示博客的主要内容分类
  • 提供快速导航功能
  • 增强用户体验
  • 美化首页布局

配置方法

在 _config.anzhiyu.yml 中配置：

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
# 首页顶部相关配置
home_top:
  enable: true # 开关
  timemode: date # date/updated
  title: Open and Share
  subTitle: 记录学习，分享成长
  siteText: twj0.github.io/blog
  category:
    - name: Share
      path: /categories/Share/
      shadow: var(--anzhiyu-shadow-blue)
      class: blue
      icon: anzhiyu-icon-paper-plane
    - name: Daily
      path: /categories/Daily/
      shadow: var(--anzhiyu-shadow-green)
      class: green
      icon: anzhiyu-icon-book
    - name: Topic
      path: /categories/Topic/
      shadow: var(--anzhiyu-shadow-red)
      class: red
      icon: anzhiyu-icon-lightbulb
    - name: Tech
      path: /categories/Tech/
      shadow: var(--anzhiyu-shadow-orange)
      class: orange
      icon: anzhiyu-icon-code

样式系统解析

颜色类别：

  • blue - 蓝色主题
  • green - 绿色主题
  • red - 红色主题
  • orange - 橙色主题

CSS 变量系统：

1
2
3
4
5
/* 主题预定义的阴影变量 */
--anzhiyu-shadow-blue: 0 8px 25px -8px #358bff;
--anzhiyu-shadow-green: 0 8px 25px -8px #07c160;
--anzhiyu-shadow-red: 0 8px 25px -8px #ff6b6b;
--anzhiyu-shadow-orange: 0 8px 25px -8px #ff8c00;

图标系统：
AnZhiYu 主题使用自定义图标字体，常用图标：

  • anzhiyu-icon-paper-plane - 纸飞机
  • anzhiyu-icon-book - 书本
  • anzhiyu-icon-lightbulb - 灯泡
  • anzhiyu-icon-code - 代码

📝 文章分类管理

Front Matter 配置

每篇文章的头部信息（Front Matter）控制文章的分类和标签：

1
2
3
4
5
6
7
8
9
10
11
---
title: 文章标题
date: 2025-09-24 21:30:00
tags:
  - 标签1
  - 标签2
categories:
  - 分类名
cover: 封面图片URL
description: 文章描述
---

分类页面生成

Hexo 会自动根据文章的分类生成对应的分类页面：

  • 文章分类为 Tech → 生成 /categories/Tech/ 页面
  • 文章标签为 Hexo → 生成 /tags/Hexo/ 页面

最佳实践

分类命名建议：

  • 使用英文名称（避免URL编码问题）
  • 保持分类层次简单（建议不超过2层）
  • 分类名称要有意义且易于理解

标签使用建议：

  • 标签比分类更具体
  • 一篇文章可以有多个标签
  • 使用中英文混合标签提高可读性

🔍 常见问题解决

404 页面问题

问题原因：

  1. 缺少对应的页面文件
  2. 路径配置错误
  3. 文章分类设置不正确

解决方案：

  1. 确保每个分类至少有一篇文章
  2. 检查 _config.yml 中的路径配置
  3. 运行 hexo clean && hexo generate 重新生成

配置不生效问题

排查步骤：

  1. 检查 YAML 语法是否正确
  2. 确认配置文件优先级
  3. 清除缓存重新构建
  4. 检查浏览器缓存

🚀 部署和维护

本地测试

1
2
3
4
5
6
7
8
# 清理缓存
hexo clean

# 生成静态文件
hexo generate

# 启动本地服务器
hexo server

部署到 GitHub Pages

1
2
3
4
# 提交更改
git add .
git commit -m "feat: 添加个性化配置"
git push origin main

GitHub Actions 会自动构建和部署。

维护建议

  1. 定期备份配置文件
  2. 使用版本控制跟踪更改
  3. 测试后再部署到生产环境
  4. 关注主题更新和安全补丁

📚 学习资源

🎯 总结

通过本教程，您已经学会了：

  1. ✅ 配置管理：理解了主题配置文件的优先级和最佳实践
  2. ✅ 交互功能：实现了标签页动态标题功能
  3. ✅ 页面布局：配置了首页分类展示
  4. ✅ 内容管理：掌握了文章分类和标签的使用方法
  5. ✅ 问题解决：学会了常见问题的排查和解决方法

个性化博客配置是一个持续的过程，建议您：

  • 🔄 定期优化和调整配置
  • 📖 持续学习新的功能和技巧
  • 🤝 参与社区讨论和分享经验
  • 🎨 发挥创意，打造独特的博客风格

希望这篇教程对您有所帮助！如果您有任何问题或建议，欢迎在评论区交流讨论。

本文基于实际配置经验编写，所有代码和配置都经过测试验证。