Hexo博客系列 No.2 美化Hexo博客 教你如何安装和美化Hexo博客

Hexo博客系列 No.2 美化Hexo博客 教你如何安装和美化Hexo博客

【Hexo博客系列】No.2 美化Hexo博客 教你如何安装和美化Hexo博客 - 使用安知鱼主题进行个性化配置 涵盖安装、设置、标签页生成及本地搜索

前言

在上一期中，我们完成了 Hexo 博客的搭建。这期教程将聚焦于博客美化，介绍如何安装和配置一款基于 hexo-theme-butterfly 修改的主题 —— 安知鱼。这是一个简洁美观、功能丰富的 Hexo 主题，帮助你打造个性化的博客。

一、安装安知鱼主题

1.1 通过 Git 安装

在博客根目录下运行以下命令，安装最新版安知鱼主题：

1
2
3
4
5
git clone -b main https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git themes/anzhiyu
```  
首次使用需安装 `pug` 和 `stylus` 渲染器：  
```bash
npm install hexo-renderer-pug hexo-renderer-stylus --save

1.2 应用主题

编辑博客根目录下的 _config.yml，将主题设置为 anzhiyu：

1
theme: anzhiyu

1.3 覆盖配置

为了避免更新主题时丢失自定义配置，建议将主题配置文件独立出来：

  • Linux 系统：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
      cp -rf ./themes/anzhiyu/_config.yml ./_config.anzhiyu.yml
      ```  
    - **Windows 系统**：手动将 `themes/anzhiyu/_config.yml` 复制到根目录，并重命名为 `_config.anzhiyu.yml`。  

    **注意事项**：  
    - 之后只需修改 `_config.anzhiyu.yml` 即可，优先级高于 `_config.yml`。  
    - 更新主题时，留意官方更新说明，可能需同步调整 `_config.anzhiyu.yml`。  
    - 检查覆盖是否生效，可运行 `hexo g --debug` 查看日志。  
    - 若需清空某配置，不要删除主键，直接留空即可。

    ### 1.4 本地预览与部署  
    主题安装完成后，运行以下命令：  
    ```bash
    // 本地预览
    hexo cl; hexo s

    // 推送上线
    hexo cl; hexo g; hexo d

1.5 生成标签页与分类页

生成标签页

1
2
3
4
5
6
7
8
9
10
11
hexo new page tags
```  
编辑 `source/tags/index.md`，添加 `type: "tags"`：  
```yaml
---
title: 标签
date: 2024-07-05 03:36:02
type: "tags"
comments: false
top_img: false
---

生成分类页

1
2
3
4
5
6
7
8
9
10
11
hexo new page categories
```  
编辑 `source/categories/index.md`，添加 `type: "categories"`：  
```yaml
---
title: 分类
date: 2024-07-05 03:36:48
aside: false
top_img: false
type: "categories"
---

二、配置文章模板

在 /scaffolds 目录下有默认模板文件：

  • post.md：新建博文模板
  • page.md：新建页面模板

示例：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
---
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 比例 */
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>

示例：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:
---

三、更多功能

3.1 新建文章与页面

  • 新建博文：
    1
    2
    3
    4
    5
      hexo new "这是一篇新的博文"
      ```  
    - 新建页面：  
      ```bash
      hexo new page "新建的标签页"

3.2 文章置顶

  1. 安装置顶插件：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
       npm install hexo-generator-topindex --save
       ```  
    2. 在文章 Front-matter 中添加 `top` 参数，值越大越靠前：  
       ```yaml
       ---
       title: 每天一个Linux命令
       date: 2017-01-23 11:41:48
       top: 1
       categories:
       - 运维
       tags:
       - linux命令
       ---

3.3 开启本地搜索

  1. 安装搜索插件：
    npm install hexo-generator-search --save
  2. 在 _config.anzhiyu.yml 中启用搜索：
    local_search:
  enable: true
  preload: false
  CDN:
    • enable：是否开启本地搜索
    • preload：是否预加载搜索文件（关闭时需点击搜索按钮才加载）
    • CDN：搜索文件的 CDN 地址（默认本地链接）

3.4 添加任意文件

想在网站根目录添加文件（如 ads.txt 用于站长验证），只需将其放入 source 文件夹即可。

四、参考资料

[up主专用，视频内嵌代码贴在这]

微信公众号小贴士：想解锁更多硬核内容？点击左下角【阅读原文】一探究竟！