Hexo博客美化教程：安装安知鱼主题进行个性化配置，涵盖安装、设置、标签页生成及本地搜索

前言

在上一篇 hexo blog 建立 中，我们完成了 Hexo 博客从零到上线的全过程。本篇将在此基础上，安装和配置安知鱼（AnZhiYu）主题，让博客更加美观和个性化。

1. 安装安知鱼主题

1.1. 下载主题

在博客根目录下，通过 Git 克隆安知鱼主题：

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

1.2. 安装必要依赖

安知鱼主题需要一些额外的渲染器，确认 package.json 中已包含以下依赖：

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

1.3. 应用主题

修改 _config.yml，将主题切换为 anzhiyu：

1
theme: anzhiyu

2. 配置主题

2.1. 创建主题配置文件

在博客根目录创建 _config.anzhiyu.yml 文件，用于覆盖主题的默认配置。这样做的优点是：当主题更新时，你的自定义配置不会被覆盖。

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

2.2. 配置导航菜单

编辑 _config.anzhiyu.yml，配置菜单项：

1
2
3
4
5
6
7
8
menu:
  博客首页: /
  文章:
    全部文章: /archives/ || anzhiyu-icon-box-archive
    文章分类: /categories/ || anzhiyu-icon-shapes
    标签: /tags/ || anzhiyu-icon-tags
  关于:
    关于本人: /about/ || anzhiyu-icon-paper-plane

2.3. 配置网站信息

在 _config.yml 中修改网站基本信息：

1
2
3
4
5
6
# Site
title: 洛璃♥在逃美术生
subtitle: '任由时间拉扯，只能被押着向前'
description: '萧瑟的身影，走过红尘里一段段斑驳，总是不经意间，留下了长长的叹息。'
author: luoli
language: zh-cn

3. 生成标签页和分类页

3.1. 创建标签页

1
hexo new page tags

编辑 source/tags/index.md：

1
2
3
4
5
6
7
---
title: 标签
date: 2024-07-05 03:36:02
type: "tags"
comments: false
top_img: false
---

3.2. 创建分类页

1
hexo new page categories

编辑 source/categories/index.md：

1
2
3
4
5
6
7
---
title: 分类
date: 2024-07-05 03:36:48
aside: false
top_img: false
type: "categories"
---

4. 配置文章模板

4.1. 文章模板

编辑 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
---
title: {{ title }}
date: {{ date }}
updated:
tags:
categories:
keywords:
description:
top:
top_img:
comments:
cover:
toc:
toc_number:
toc_style_simple:
copyright:
copyright_author:
copyright_author_href:
copyright_url:
copyright_info:
mathjax:
katex:
aplayer:
highlight_shrink:
aside:
ai:
background: "#fff"
---

5. 开启本地搜索

5.1. 安装搜索插件

1
npm install hexo-generator-search --save

5.2. 配置搜索

在 _config.yml 中添加：

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

5.3. 在主题中启用

在 _config.anzhiyu.yml 中配置：

1
2
3
4
5
local_search:
  enable: true
  preload: true
  languages:
    hits_empty: "找不到您查询的内容：${query}"

6. 更多功能

6.1. 文章置顶

安装置顶插件：

1
npm install hexo-generator-topindex --save

在文章 Frontmatter 中设置 top: 1 即可置顶，数字越大越靠前。

6.2. 配置代码高亮

在 _config.anzhiyu.yml 中配置：

1
2
3
4
5
highlight_theme: light
highlight_copy: true
highlight_lang: true
highlight_shrink: false
highlight_height_limit: 330

6.3. 添加自定义页面

在 source/ 目录下创建文件夹和 index.md，即可生成自定义页面，例如音乐馆、相册等。

参考资料

上一篇：hexo blog 建立 — 从零搭建 Hexo 博客并部署上线。