君匡

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