Hexo博客美化全攻略：主题安装与高级配置

看完这篇教程，让你的Hexo博客从”素颜”变身”高级定制”！

视频教程快速导航

一、主题安装与初始化

1. 安装Anzhiyu主题

1
2
3
# 在博客根目录执行
git clone -b main https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git themes/anzhiyu
npm install hexo-renderer-stylus --save

2. 启用主题

修改根目录 _config.yml：

1
theme: anzhiyu

3. 复制主题配置文件

1
2
3
4
# Windows用户手动操作：
1. 进入 themes/anzhiyu/_config.yml 
2. 复制到博客根目录
3. 重命名为 _config.anzhiyu.yml

4. 本地预览效果

1
hexo clean && hexo g && hexo s

访问 http://localhost:4000 查看主题效果

二、核心功能配置

1. 生成标签页 & 分类页

1
2
3
4
5
6
7
8
9
# 创建标签页
hexo new page tags
# 编辑 source/tags/index.md 添加：
type: "tags"

# 创建分类页
hexo new page categories
# 编辑 source/categories/index.md 添加：
type: "categories"

2. 配置文章模板

修改 scaffolds/post.md：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
---
title: {{ title }}
date: {{ date }}
tags: 
categories: 
cover: 
top: 0 # 置顶优先级（数值越大越靠前）
sticky: false # 是否置顶
---

<!-- 视频嵌入示例 -->
<div class="video-container">
  <iframe 
    src="https://www.youtube.com/embed/VIDEO_ID" 
    frameborder="0" 
    allowfullscreen>
  </iframe>
</div>

<!-- 正文内容 -->

3. 文章置顶功能

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

在文章Front-matter中添加：

1
2
top: 1  # 置顶优先级
sticky: true  # 开启置顶

4. 本地搜索功能

1
npm install hexo-generator-search --save

在 _config.anzhiyu.yml 中启用：

1
2
local_search:
  enable: true

三、个性化设置指南

1. 基础信息配置

修改根目录 _config.yml：

1
2
3
4
5
6
7
# 站点信息
title: hexo 美化
subtitle: 技术与生活的交汇点
description: 分享前端开发、云原生技术及效率工具
keywords: Hexo,Node.js,Cloudflare
author: yonger
language: zh-CN

2. 导航栏定制

在 _config.anzhiyu.yml 中配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
menu:
  SOS: 
    path: /sos/
    icon: fas fa-exclamation-triangle
  博客本体:
    path: https://yonger.com
    icon: fas fa-blog
  技术文档:
    path: /docs/
    icon: fas fa-book
    children:
      - name: Docker指南
        path: /docker/
      - name: Kubernetes实战
        path: /k8s/

3. 文章路径优化

修改根目录 _config.yml：

1
2
# 优化后的文章路径
permalink: :category/:title/

4. 特效功能开启

在 _config.anzhiyu.yml 中启用特效：

1
2
3
4
5
6
7
8
# 鼠标点击烟花特效
fireworks: true

# 页面背景粒子效果
canvas_ribbon: true

# 滚动进度条
reading_progress: true

四、高级功能配置

1. 嵌入视频内容

在文章中添加：

1
2
3
4
5
6
7
<div class="video-container">
  <iframe 
    src="https://www.youtube.com/embed/VIDEO_ID" 
    frameborder="0" 
    allowfullscreen>
  </iframe>
</div>

2. 添加验证文件

在 /source/ 目录创建文件：

1
2
# 示例：Google Ads验证文件
echo "google.com, pub-XXXXXXXXXXXX, DIRECT, XXXXXXXX" > source/ads.txt

3. 广告集成配置

在 _config.anzhiyu.yml 中配置：

1
2
3
4
5
6
ad:
  google_adsense:
    enable: true
    auto_ads: true
    js: https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
    client: ca-pub-XXXXXXXXXXXXXXXX

五、部署与验证

1. 推送到云端

1
hexo clean && hexo deploy

2. 验证变更

功能验证URL预期效果
标签页/tags/显示所有标签
分类页/categories/显示分类目录
自定义页面/sos/显示警告内容
文章路径/tech/your-article/优化后的URL结构

六、主题深度定制技巧

1. 元素定位方法

  1. 浏览器中按 F12 打开开发者工具
  2. 使用元素选择器定位目标组件
  3. 复制元素的class或id名称
  4. 在主题配置文件中搜索关键词

2. 图标资源推荐

3. 配置项搜索技巧

在 _config.anzhiyu.yml 中：

  • 使用 Ctrl+F 搜索关键词
  • 常用配置项关键词：
    • header：头部设置
    • footer：页脚设置
    • social：社交媒体链接
    • comment：评论系统
    • analytics：网站统计

七、主题官方资源

调试技巧：每次修改配置后，使用 hexo s 本地预览，确认无误再部署！