测试第二篇文章

AnZhiYu主题美化详细教程

基于AnZhiYu官方文档的完整美化指南

🎯 前言

AnZhiYu是一个基于Butterfly主题魔改的Hexo主题，拥有极佳的视觉效果和丰富的自定义功能。本教程将带你从基础配置到高级美化，打造专属的博客站点。

📋 目录

  1. 主题安装与基础配置
  2. 外观美化配置
  3. 首页布局优化
  4. 导航栏自定义
  5. 侧边栏美化
  6. 页面个性化
  7. 特色功能启用
  8. 高级自定义

🚀 主题安装与基础配置

1. 主题安装

方法一：Git安装（推荐）

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

方法二：下载安装

  1. 访问 AnZhiYu GitHub
  2. 下载最新版本
  3. 解压到 themes/anzhiyu 目录

2. 应用主题

修改站点根目录下的 _config.yml：

1
theme: anzhiyu

3. 安装必要依赖

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

🎨 外观美化配置

1. 主题色彩配置

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 主题色
theme_color:
  enable: true
  main: "#425AEF"  # 主色调
  paginator: "#425AEF"  # 分页器颜色
  button_hover: "#318ce7"  # 按钮悬停色
  text_selection: "#425AEF"  # 文字选中色
  link_color: "#425AEF"  # 链接颜色
  meta_color: "#858585"  # 元信息颜色
  hr_color: "#A4D8FA"  # 分割线颜色
  code_foreground: "#F47466"  # 代码前景色
  code_background: "rgba(27, 31, 35, .05)"  # 代码背景色
  toc_color: "#425AEF"  # 目录颜色
  blockquote_color: "#425AEF"  # 引用块颜色

2. 深色模式配置

1
2
3
4
5
6
7
# 深色模式
darkmode:
  enable: true
  button: true  # 显示深色模式切换按钮
  autoswitch: false  # 自动切换
  start: # 开始时间(24小时制)，如22
  end: # 结束时间(24小时制)，如8

3. 背景设置

1
2
3
4
5
6
7
# 背景设置
background:
  enable: true
  opacity: 0.2  # 透明度
  dark_opacity: 0.3  # 深色模式透明度
  url: https://your-image-url.jpg  # 背景图片URL
  dark_url: https://your-dark-image-url.jpg  # 深色模式背景图

🏠 首页布局优化

1. 顶部大图配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 首页顶部大图
index_img: https://your-index-image.jpg

# 页面顶部大图
default_top_img: https://your-default-image.jpg

# 归档页顶部大图
archive_img: https://your-archive-image.jpg

# 标签页顶部大图
tag_img: https://your-tag-image.jpg

# 分类页顶部大图
category_img: https://your-category-image.jpg

2. 首页文章显示模式

1
2
3
4
5
6
7
# 首页文章布局
index_layout: 3  # 1为卡片模式，2为经典模式，3为信息卡模式

# 首页文章显示设置
index_post_content:
  method: 2  # 1显示description，2显示both，3显示auto_excerpt
  length: 500  # 自动生成摘要的长度

3. 首页社交图标

1
2
3
4
5
6
7
# 社交图标
social:
  fas fa-envelope: mailto:your-email@example.com || Email || "#425AEF"
  fab fa-github: https://github.com/yourname || Github || "#24292e"
  fab fa-telegram: https://t.me/yourname || Telegram || "#24A1DE"
  fab fa-qq: http://wpa.qq.com/msgrd?v=3&uin=yourqq || QQ || "#12B7F5"
  fas fa-rss: /atom.xml || RSS || "#FFA500"

🧭 导航栏自定义

1. 导航栏配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
nav:
  logo: # 网站logo
  display_title: true  # 是否显示网站标题
  fixed: false  # 是否固定导航栏

menu:
  首页: / || fas fa-home
  归档: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  友链: /link/ || fas fa-link
  关于: /about/ || fas fa-heart
  音乐: /music/ || fas fa-music
  相册: /gallery/ || fas fa-images

2. 导航栏样式

1
2
3
4
5
6
7
8
9
# 导航栏透明度
nav_bg: 
  enable: true
  opacity: 0.8  # 透明度

# 导航栏颜色
navbar_color:
  enable: true
  color: "#ffffff"  # 导航栏字体颜色

📱 侧边栏美化

1. 个人信息卡片

1
2
3
4
5
6
7
# 个人信息
author_info:
  enable: true
  Avatar_img: https://your-avatar.jpg  # 头像
  Wechat_img: https://your-wechat-qr.jpg  # 微信二维码
  Qq_img: https://your-qq-qr.jpg  # QQ二维码
  description: "Your description here"  # 个人描述

2. 公告栏

1
2
3
4
# 公告
announcement:
  enable: true
  content: "欢迎来到我的博客！"  # 公告内容

3. 侧边栏组件

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
aside:
  enable: true
  hide: false
  button: true  # 侧边栏隐藏按钮
  mobile: true  # 手机端显示
  position: right  # 位置：left或right
  display:
    archive: true  # 归档页面显示
    tag: true      # 标签页面显示
    category: true # 分类页面显示
  card_author:
    enable: true
    description: true
    button:
      enable: true
      icon: fab fa-github
      text: Follow Me
      link: https://github.com/yourname
  card_announcement:
    enable: true
    content: "This is my Blog"
  card_recent_post:
    enable: true
    limit: 5  # 显示文章数量
    sort: date  # 排序方式
  card_categories:
    enable: true
    limit: 8  # 显示分类数量
    expand: none  # 默认展开：none/true/false
  card_tags:
    enable: true
    limit: 40  # 显示标签数量
    color: false  # 标签颜色
  card_archives:
    enable: true
    type: monthly  # 按月归档
    format: MMMM YYYY  # 时间格式
    order: -1  # 排序
    limit: 8  # 显示数量
  card_webinfo:
    enable: true
    post_count: true  # 文章数统计
    last_push_date: true  # 最后更新时间

📄 页面个性化

1. 文章页面配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 文章配置
post:
  meta:
    author:
      enable: true
    date:
      enable: true
      format: "YYYY-MM-DD"  # 时间格式
    updated:
      enable: true
      format: "YYYY-MM-DD"
    categories:
      enable: true
    tags:
      enable: true
  award:
    enable: true
    QR_code: https://your-reward-qr.jpg  # 打赏二维码
    wechat: https://your-wechat-pay.jpg  # 微信支付
    alipay: https://your-alipay.jpg      # 支付宝

2. 版权信息

1
2
3
4
5
6
7
# 文章版权
post_copyright:
  enable: true
  decode: false
  author_href: https://your-blog.com
  license: CC BY-NC-SA 4.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

3. 目录设置

1
2
3
4
5
6
7
toc:
  post: true
  page: true
  number: true  # 显示数字
  expand: false  # 是否展开
  style_simple: false  # 简洁模式
  scroll_percent: true  # 滚动百分比

✨ 特色功能启用

1. 音乐播放器

1
2
3
4
5
6
7
# 全局音乐
global_music:
  enable: true
  type: "custom"  # custom, netease, tencent, kugou, xiami, baidu
  server: "netease"  # 音乐平台
  type: "playlist"  # song, playlist, album, search, artist
  id: "your-playlist-id"  # 播放列表ID

2. 鼠标点击特效

1
2
3
4
5
6
7
# 鼠标点击特效
click_heart:
  enable: true

# 点击烟花特效
fireworks:
  enable: true

3. 樱花飘落特效

1
2
3
# 樱花飘落
sakura:
  enable: true

4. 彩带特效

1
2
3
4
5
6
7
# 彩带特效
canvas_ribbon:
  enable: true
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: false

5. 网站运行时间

1
2
3
4
# 网站运行时间
runtimeshow:
  enable: true
  publish_date: "2023/01/01 00:00:00"  # 网站建立时间

🔧 高级自定义

1. 自定义CSS

在主题目录下创建 source/css/_custom.styl：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 自定义样式
:root
  --anzhiyu-main: #425AEF
  --anzhiyu-main-op: #425AEF23
  --anzhiyu-main-op-deep: #425AEF88

// 自定义卡片圆角
.card-widget
  border-radius: 8px

// 自定义按钮样式
.button--animated
  transition: all 0.3s ease
  &:hover
    transform: translateY(-2px)
    box-shadow: 0 4px 8px rgba(0,0,0,0.2)

2. 自定义JavaScript

在主题目录下创建 source/js/custom.js：

1
2
3
4
5
6
7
8
9
10
// 自定义JavaScript代码
document.addEventListener('DOMContentLoaded', function() {
  // 添加自定义功能
  console.log('AnZhiYu theme loaded!');
  
  // 自定义点击事件
  document.addEventListener('click', function(e) {
    // 添加点击特效
  });
});

3. 注入代码

1
2
3
4
5
6
# 代码注入
inject:
  head:
    - <link rel="stylesheet" href="/css/custom.css">
  bottom:
    - <script src="/js/custom.js"></script>

4. 字体配置

1
2
3
4
5
6
# 字体设置
font:
  global-font-size: 14px
  code-font-size: 14px
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Lato, Roboto, "PingFang SC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif
  code-font-family: consolas, Menlo, "PingFang SC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif

🎪 页面模板创建

1. 创建友链页面

1
hexo new page link

在 source/link/index.md 中添加：

1
2
3
4
5
---
title: 友情链接
date: 2023-01-01 00:00:00
type: "link"
---

2. 创建关于页面

1
hexo new page about

3. 创建相册页面

1
hexo new page gallery

在 source/gallery/index.md 中添加：

1
2
3
4
5
---
title: 相册
date: 2023-01-01 00:00:00
type: "gallery"
---

📊 SEO优化配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# SEO设置
SEO:
  enable: true
  author: "Your Name"
  description: "Your blog description"
  keywords: "blog, hexo, anzhiyu"
  
# 网站验证
site_verification:
  google: "your-google-verification-code"
  baidu: "your-baidu-verification-code"
  
# Open Graph
Open_Graph_meta:
  enable: true
  option:
    type: website
    image: https://your-og-image.jpg

🎯 性能优化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 压缩设置
compress:
  enable: true
  
# PWA设置
pwa:
  enable: true
  manifest: /manifest.json
  apple_touch_icon: /apple-touch-icon.png
  favicon_32_32: /favicon-32x32.png
  favicon_16_16: /favicon-16x16.png
  mask_icon: /safari-pinned-tab.svg
  
# 预加载
preloader:
  enable: true
  source: 1  # 1为本地，2为网络

📝 写作优化

1. Front-matter模板

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
---
title: 文章标题
date: 2023-01-01 12:00:00
updated: 2023-01-01 12:00:00
tags:
  - 标签1
  - 标签2
categories:
  - 分类1
description: 文章描述
cover: https://cover-image.jpg
top_img: https://top-image.jpg
comments: true
toc: true
toc_number: true
copyright_author: Your Name
copyright_url: https://your-blog.com
copyright_info: 本文采用CC BY-NC-SA 4.0协议
---

2. 代码高亮配置

1
2
3
4
highlight_theme: mac  # darker / pale night / light / ocean / mac / mac light
highlight_copy: true  # 代码复制功能
highlight_lang: true  # 显示语言
highlight_shrink: false  # 代码框收缩

🚀 部署优化

1. 生成与部署

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

# 生成静态文件
hexo generate

# 本地预览
hexo server

# 部署到远程
hexo deploy

2. 自动部署配置

在 _config.yml 中配置：

1
2
3
4
deploy:
  type: git
  repo: https://github.com/yourusername/yourusername.github.io.git
  branch: main

🎨 主题定制技巧

1. 颜色搭配建议

  • 蓝色系：#425AEF (默认)
  • 绿色系：#4CAF50
  • 紫色系：#9C27B0
  • 橙色系：#FF9800
  • 红色系：#F44336

2. 图片建议

  • 首页大图：1920x1080px
  • 文章封面：1200x630px
  • 头像：200x200px
  • 背景图：支持各种尺寸

3. 常见问题解决

  1. 样式不生效：清理缓存后重新生成
  2. 图片不显示：检查URL是否正确
  3. 配置错误：对比官方配置文件格式
  4. 功能异常：检查依赖是否安装完整

📖 参考资源

通过以上配置，你就可以打造出一个美观、功能丰富的AnZhiYu主题博客了！记住要根据自己的需求调整配置，不断优化和完善你的博客。

小提示：建议先完成基础配置，确保主题正常运行后，再进行高级美化，避免配置冲突导致的问题。