Hexo博客安知鱼主题美化基础配置名

佩奇2024-11-142024-11-25

可以到Hexo官网找到喜欢的主题。有很多的主题。

Solitude和安知鱼主题都是张洪Heo大佬的主题进行修改的。Solitude我看还在经常更新，但是网上小白教程太少了。我看了安知鱼大佬的网上的小白教程挺多的，还有QQ群，里面的人又有才，说话又好听。所以选择了安知鱼主题

主题项目地址：https://docs.anheyu.com/

安装主题

1. Git 安裝

在博客根目录里安装最新版主题

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

第一次使用需要安装 pug 以及 stylus 的渲染器

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

主题拉取成功后会在/themes/anzhiyu 这个目录就是主题的目录

2. 应用主题

修改 hexo 配置文件_config.yml，把主题改为anzhiyu _config.yml的最下面

1	theme: anzhiyu

3. 覆盖配置

覆盖配置可以使主题配置放置在 anzhiyu 目录之外，避免在更新主题时丢失自定义的配置。

如果你是linux/windows系统就执行以下命令如无法执行手动复制修改

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

如果无法命令执行文件目录复制修改手动将/themes/anzhiyu/_config.yml复制到根目录下并重命名为_config.anzhiyu.yml即可。

以后如果修改任何主题配置，都只需修改 _config.anzhiyu.yml 的配置即可。

到这一步主题部署就完成了，就是这么简单！！！然后运行命令在看看有主题后的效果！

本地预览查看可以去掉hexo g命令来加快生产时间

1	hexo cl; hexo g; hexo s

4.主题版本更新检查版

通过命令hexo cl 就会显示版本

我安装完成后的版本是1.6.12 目前作者最新版本是1.6.14安装官方文档更新一下最新版本

这个最好是在还未修改任何信息的时候进行修改，不然配置文件都修改好了在更新就麻烦了。

就是把原来的主题文件夹名称修改一下，例如 anzhiyu-bkp然后从新下载最新的，或者直接删除掉重新下载最新的

本地启动命令

命令一

1
2
3

hexo cl#命令用于清理缓存文件 hexo clean 
hexo g#命令用于生成静态文件 hexo generate
hexo s#命令用于启动本地服务器 hexo server

命令二：记住这个命令，后续修改ctrl+s保存后，执行这个命令预览一下

1	hexo cl; hexo g; hexo s #通过;可以把需要的命令连接起来一起使用平时预览不用生成本地镜像问题减少生成时间

使用注意如果遇到展示缓存问题，可以尝试 hexo cl 清除缓存再次启动。

很多的功能和设置可以去看安知鱼的官方文档。我这里只记录我用到的配置

基础言配置

修改站点配置文件 _config.yml（不是主题配置文件）。

支持语言：en-US (美式英文) 、 zh-CN (简体中文)、zh-TW (繁体中文)

# Site
title: Hexo      # 博客的标题
subtitle: ''     # 博客的副标题
description: ''  # 博客的描述，用于搜索引擎优化
keywords:        # 博客的关键词，也用于搜索引擎优化
author: anzhiyu  # 博客的作者名称
language: en     # 博客使用的语言，en 英文，zh-CN 中文
timezone: ''     # 博客所在的时区，'Asia/Shanghai'上海

修改theme: anzhiyu

保存一下看看这些文字对应的位置和效果里面的文字效果和注释你可以修改一下然后预览看看效果就知道是什么东西了

修改网页图标

效果如下

找到anzhiyu/source/favicon.ico，替换为自己的图标
使用网页工具使用调整大小选项将jpg转换为ico图像 - 免费工具

修改头像

修改后效果

找到Avatar（头像），直接替换img：里面的url链接

这里的头像推荐使用的是图床的链接直接使用图片的url即可

也可以使用本地目录，例如我的头像名字叫tx.png将头像放入img目录下面，然后这里路径就填写/img/tx.png

注意：本地目录的方式不是非常推荐，如果后期这样的图片多了，生成静态文件就比较大，加载网页就会非常慢。

打开effect后，头像显示转圈效果感觉转起来有点头晕我最后还是关闭了

作者卡片状态

找到author_status:（作者卡片状态）修改为true

效果如下

点击上面的文字会进行循环变化，头像的右下角会多一个表情表。

鼠标放到头像会显示文字，这里的文字是

头像加载动画

效果如下：就是进入博客的加载的那个头像

Ctrl+F搜索 Loading Animation (加载动画)

替换自己喜欢的头像

我是关闭了这个功能将改为 enable: false 即可

文章中代码框样式

就是在文章中插入代码框显示的效果

修改 _config.anzhiyu.yml 直接搜索 Ctrl+F 搜索 highlight_theme 支持6中样式参考官方文档我用的mac light 效果如下

1	highlight_theme: mac light

其他什么框的大小是否自动折叠可以参考官方文档进行设置我保持默认就可以了

生成标签页和分类页

1	hexo new page tags

找到 source/tags/index.md 这个文件，修改添加 type: "tags"

---
title: 标签
date: 2024-07-05 03:36:02
type: "tags"
comments: false
top_img: false
---

执行以下命令生成分类页

1	hexo new page categories

找到 source/categories/index.md 这个文件，修改添加 type: "categories"

---
title: 分类
date: 2024-07-05 03:36:48
aside: false
top_img: false
type: "categories"
---

剩下的工作就是配置_config.anzhiyu.yml文件，修改博客参数。这个主题里的功能很多是被注释掉的我们取消注释就好了

我们先把menu:下面的注释全部取消掉，后期觉得无用直接删掉就好了。把前面的#号删掉文字都是可以自定义修改的

保存一下然后 hexo cl; hexo s 看看效果

点击文章分类和标签测试是否可以跳转不报错，表示安装成功。

因为没有写文章也没有分类和标签所以看不出来什么效果。

文章置顶

默认没有文章置顶的功能的需要通过插件来实现

安装插件

1	npm install hexo-generator-topindex --save

设置置顶

给需要置顶的文章加入top参数，如下：

如果存在多个置顶文章，top后的参数越大，越靠前。没安装一个插件都本地预览一下效果知道他的用途

开启本地搜索

安装插件

你需要安装 hexo-generator-search，根据它的文档去做相应配置

1	npm install hexo-generator-search --save

设置主题配置文件

配置_config.anzhiyu.yml文件local_search如果找不到直接ctrl+f搜索

local_search:
  enable: true
  preload: false
  CDN:

参数	用途
enable	是否开启本地搜索
preload	预加载，开启后，进入网页后会自动加载搜索文件。关闭时，只有点击搜索按钮后，才会加载搜索文件
CDN	搜索文件的 CDN 地址（默认使用的本地链接）