Hexo历险记之五幻丽插件

最新推荐文章于 2024-09-10 18:06:31 发布

君匡

最新推荐文章于 2024-09-10 18:06:31 发布

阅读量239

点赞数

分类专栏：君匡玩hexo 文章标签： node.js npm

本文知识共享许可协议为CC BY-NC-SA 4.0，首发于个人博客，转载和参考请注明出处。

本文链接：https://blog.csdn.net/qq_41461536/article/details/126128098

版权

君匡玩hexo 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

前言

言接上文，在美化了主题之后，接下来要做的就是添加一些插件，来让你的博客更加完善和好看。

时隔四年，重启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继续研发的，现在单纯说永久链接就有足足五个插件可供选择，真是太棒了！

image-20220726184146394

安装插件

在博客根目录，运行命令以下载插件。

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: [] #不允许的模板类型，默认为空列表

permalink

配置完成后，清除缓存后再重启服务即可生效。

搜索

在自己的博客页面开启搜索功能。在写多了文章之后，总是会出现只记得关键词忘记文章名的事情，这个功能就有了用武之处！

image-20220726190739151

安装插件

官方链接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/，但是暂时还没迁移文章。

注意配置后，删除缓存再重启服务才能生效！

live2d-widget-model-haruto

live2d-widget-model-hibiki

live2d-widget-model-hijiki

live2d-widget-model-izumi

live2d-widget-model-koharu

live2d-widget-model-miku

live2d-widget-model-tororo

live2d-widget-model-tsumiki

live2d-widget-model-z16

Snipaste_2019-08-27_23-21-03

live2d-widget-model-chitose

live2d-widget-model-gf

live2d-widget-model-haru

看板娘-下载单个模型

如果你看上了上面的某个看榜娘，那就娶回家吧！我就超级喜欢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。

详细请参考第三方支持 | hexo-theme-stun

开启数学公式渲染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博客中插入数学公式。