【Hexo博客系列】No.2 美化Hexo博客,教你如何安装和美化Hexo博客 - 使用安知鱼主题进行个性化配置,涵盖安装、设置、标签页生成及本地搜索
![](https://img.090227.xyz/file/4dd06eb77c95abf866a5c.jpg)
【Hexo博客系列】No.2 美化Hexo博客,教你如何安装和美化Hexo博客 - 使用安知鱼主题进行个性化配置,涵盖安装、设置、标签页生成及本地搜索
杨幂的脚美化Hexo博客,主题安装配置
这期教程演示将使用一款基于hexo-theme-butterfly修改的主題-安知鱼,安知鱼是一个简洁、美丽的静态hexo主题
项目地址:https://github.com/anzhiyu-c/hexo-theme-anzhiyu
官方文档:https://docs.anheyu.com/initall.html
1.安装主题
1.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 |
1.2. 应用主题
修改 hexo 配置文件_config.yml
,把主题改为anzhiyu
1 | theme: anzhiyu |
1.3. 覆盖配置
覆盖配置可以使主题配置
放置在 anzhiyu 目录之外,避免在更新主题时丢失自定义的配置。
如果你是linux系统就执行以下命令
1 | cp -rf ./themes/anzhiyu/_config.yml ./_config.anzhiyu.yml |
如果你是windows系统就请手动将/themes/anzhiyu/_config.yml
复制到根目录下并重命名为_config.anzhiyu.yml
即可。
以后如果修改任何主题配置,都只需修改 _config.anzhiyu.yml
的配置即可。
注意:
- 只要存在于
_config.anzhiyu.yml
的配置都是高优先级,修改原_config.yml
是无效的。 - 每次更新主题可能存在配置变更,请注意更新说明,可能需要手动对
_config.anzhiyu.yml
同步修改。 - 想查看覆盖配置有没有生效,可以通过
hexo g --debug
查看命令行输出。 - 如果想将某些配置覆盖为空,注意不要把主键删掉,不然是无法覆盖的
1.4. 配置主题与主站配置文件
到这一步主题部署就完成了,就是这么简单!!!
1 | //本地预览 |
1.5. 生成标签页和分类页
执行以下命令生成标签页
1 | hexo new page tags |
找到 source/tags/index.md
这个文件,修改添加 type: "tags"
1 | --- |
执行以下命令生成分类页
1 | hexo new page categories |
找到 source/categories/index.md
这个文件,修改添加 type: "categories"
1 | --- |
剩下的工作就是配置_config.yml
和_config.anzhiyu.yml
文件,修改博客参数。
2. 配置文章模版
/scaffolds
目录下有几个模版文件,其中
- post.md:新建博文模版
- page.md:新建标签页模版
post.md模版,仅供参考
1 |
|
page.md模版,仅供参考
1 |
|
更多功能
新建文章
新建博文命令
1 | hexo new 这是一篇新的博文 |
新建标签页命令
1 | hexo new page 新建的标签页 |
文章置顶
安装插件
1 | npm install hexo-generator-topindex --save |
设置置顶
给需要置顶的文章加入top参数,如下:
1 |
|
如果存在多个置顶文章,top后的参数越大,越靠前。
开启本地搜索
安装插件
你需要安装 hexo-generator-search,根据它的文档去做相应配置
1 | npm install hexo-generator-search --save |
设置主题配置文件
1 | local_search: |
参数 | 解释 |
---|---|
enable | 是否开启本地搜索 |
preload | 预加载,开启后,进入网页后会自动加载搜索文件。关闭时,只有点击搜索按钮后,才会加载搜索文件 |
CDN | 搜索文件的 CDN 地址(默认使用的本地链接) |
添加任意文件
例如当我们想在网站根目录添加ads.txt
文件,来通过站长验证时,我们只需要在/source
文件夹下放置该文件即可。
参考资料
https://docs.anheyu.com/initall.html
https://www.fomal.cc/posts/4aa2d85f.html
https://github.com/anzhiyu-c/hexo-theme-anzhiyu/blob/dev/README.md?plain=1
https://blog.csdn.net/COCO56/article/details/103840966