君匡
2022/08/02阅读:18主题:自定义主题1
Hexo历险记之五幻丽插件
前言
言接上文,在美化了主题之后,接下来要做的就是添加一些插件,来让你的博客更加完善和好看。
时隔四年,重启Hexo历险计划!

插件
永久链接
看一下对比,使用该插件之前和使用该插件以后访问链接的不同。
# 没安装之前,配置为:year/:category/:title/
https://www.clzly.xyz/2022/uncategorized/hello-world/
https://www.clzly.xyz/2022/uncategorized/%E4%BD%A0%E5%A5%BD%E4%B8%96%E7%95%8C/
# 安装配置之后,配置为:permalink: :year/:abbrlink/
https://www.clzly.xyz/2022/16107/
https://www.clzly.xyz/2022/52133/
附上我优化之后的插件hexo-abbrlink3,经过伙伴们的支持,现在已经到了2.2.1
版本了,感谢伙伴们为此做出的贡献!
此插件是基于hexo-abbrlink继续研发的,现在单纯说永久链接就有足足五个插件可供选择,真是太棒了!

安装插件
在博客根目录,运行命令以下载插件。
npm install hexo-abbrlink3 --save
配置插件
如下配置文件。
# URL
permalink: :year/:category/:abbrlink/
permalink_defaults:
pretty_urls:
trailing_index: true # 设置为false移除'index.html'
trailing_html: true # 设置为false移除'.html'
abbrlink:
alg: crc32 # 算法:crc16(default) and crc32
rep: hex # 进制:dec(default) and hex
allow: ['post'] #允许的模板类型.默认为["post"]
disallow: [] #不允许的模板类型,默认为空列表

配置完成后,清除缓存后再重启服务即可生效。
搜索
在自己的博客页面开启搜索功能。在写多了文章之后,总是会出现只记得关键词忘记文章名的事情,这个功能就有了用武之处!

安装插件
官方链接hexo-generator-search,在Hexo根目录下执行命令。
$ npm install hexo-generator-search --save
配置插件
找到Hexo根目录下的 _config.yml
文件,添加以下字段:
search:
path: search.json
field: post
content: true
有关插件的详尽信息和上述参数的含义,请查看插件的文档。
如果你选择的主题有对搜索功能的支持,那么最好修改一下主题启用搜索功能,比如我使用的Stun
主题就需要配置文件。
local_search:
# 是否启用
enable: true
配置完成后,清除缓存后再重启服务即可生效。
看板娘
遍览看板娘
选择一个漂酿、好玩又萌翻的看板娘是灰常灰常的有吸引力哦!
找到了原作者的展示网页:live2d模型,网站公告说原作者要迁移域名了https://eyhn.in/,但是暂时还没迁移文章。
注意配置后,删除缓存再重启服务才能生效!













看板娘-下载单个模型
如果你看上了上面的某个看榜娘,那就娶回家吧!我就超级喜欢haruto
,所以后来直接下载他了!
在博客根目录下安装基础支持的插件和模型插件。
#基础支持的插件
npm install --save hexo-helper-live2d
#单个live2d模型
npm install --save live2d-widget-model-haruto
在站点的配置文件中,也就是和source
同级目录的_config.yml
里面添加上:
live2d:
enable: true
scriptFrom: local # 默认
pluginRootPath: node_modules/ # 插件在站点上的根目录(相对路径)
pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
pluginModelPath: assets/ # 模型文件相对与插件根目录路径
tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
debug: false # 调试, 是否在控制台输出日志
model:
use: live2d-widget-model-haruto # npm-module package name
# use: wanko # 博客根目录/live2d_models/ 下的目录名
# use: ./wives/wanko # 相对于博客根目录的路径
# use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 你的自定义 url
display:
position: left
width: 150
height: 300
mobile:
show: false
react:
opacity: 0.7
看板娘-下载全部模型
博主好想要看遍所有模型会有什么效果,于是准备直接下载整个仓库。
git clone git@github.com:xiazeyu/live2d-widget-models.git
下载完成所有模型后:
-
在博客根目录下创建文件夹 live2d_models
-
在此文件夹内新建一个子文件夹 live2dw
-
将 live2d-widget-model-haruto
模型复制到live2dw
中 -
修改配置文件 _config.yml
的model.use
字段
字数统计
提供字数统计和阅读时长统计功能,也要注意当前使用的主题是否支持这个功能。官方文档
下载
npm install hexo-wordcount --save
配置
word_count:
enable: true
Pwa
可以让博客使用类似App的方式来访问。
注意:你的博客必须全站为HTTPS,这是使用PWA的基础条件!
hexo@4.2.0
目前暂时不兼容 hexo-pwa
,使用 hexo@4.2.0
版本的用户推荐降级到 hexo@4.1.1
。
详细请参考https://theme-stun.github.io/docs/zh-CN/advanced/third-part.html#pwa
开启数学公式渲染kaTexX
我是想要更换一个支持kaTexX的渲染器,所以才选择去切换渲染器,否则一般来说是不用修改的。
这里有人完成了大部分的渲染器效果分析,可以在了解后决定自己要选择哪个渲染器。
向主题的参考文档致敬。
安装渲染器
在 Hexo 根目录下的 package.json
文件的 dependencies/devDependencies
中,可以查看已经安装了哪些插件。
# 如果安装以下插件,请全部卸载
$ npm un hexo-renderer-marked --save
$ npm un hexo-renderer-kramed --save
$ npm un hexo-renderer-pandoc --save
$ npm un hexo-renderer-unified --save
$ npm un hexo-renderer-markdown --save
$ npm un hexo-renderer-markdown-it --save
$ npm un hexo-math --save
$ npm un hexo-inject --save
# 安装新的渲染器
$ npm i hexo-renderer-markdown-it-plus --save
主题配置
math:
# 是否启用
enable: true
# 如果设为 true,将会为每一个页面启用该功能
# 如果设为 false,只有在 `Front-matter` 中设置了 `math: true` 的页面,才会启用该功能
per_page: false
# 解析引擎,可选值:mathjax 或 katex
engine: katex
一般来说,除了极少数特别的博主,几乎每篇文章都涉及了kaTexX
公式,才需要打开per_page
字段来为每一篇文章进行解析。
再有,以我来说,一百篇文章只有七八篇涉及了kaTexX
公式,那么就可以在那几篇特殊文章里Front-Matter
设置了 math: true
,才会启用该功能。
当然,我没有系统性去学习kaTeX的语法,所以我寻找了一个可视化工具Mathtype。
附上下载的官方链接,当然我的公众号也提供了工具的度盘下载;附上工具使用教程详解MathType快捷键使用技巧;附上相关参考链接结合MathType和MathJax在Hexo博客中插入数学公式。
感谢
感谢19年8月份的自己,能够坚持到现在。
作者介绍