前言

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

时隔四年，重启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 crc32rep: hex    # 进制：dec(default) and hexallow: ['post'] #允许的模板类型.默认为["post"]disallow: [] #不允许的模板类型，默认为空列表

permalink

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

搜索

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

image-20220726190739151

安装插件

官方链接hexo-generator-search，在Hexo根目录下执行命令。

$ npm install hexo-generator-search --save

配置插件

找到Hexo根目录下的 _config.yml文件，添加以下字段：

search:path: search.jsonfield: postcontent: 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: truescriptFrom: 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 # 你的自定义 urldisplay:position: left    width: 150height: 300mobile:show: falsereact: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 或 katexengine: katex

一般来说，除了极少数特别的博主，几乎每篇文章都涉及了kaTexX公式，才需要打开per_page字段来为每一篇文章进行解析。

再有，以我来说，一百篇文章只有七八篇涉及了kaTexX公式，那么就可以在那几篇特殊文章里Front-Matter设置了 math: true ，才会启用该功能。

当然，我没有系统性去学习kaTeX的语法，所以我寻找了一个可视化工具Mathtype。

附上下载的官方链接，当然我的公众号也提供了工具的度盘下载；附上工具使用教程详解MathType快捷键使用技巧；附上相关参考链接结合MathType和MathJax在Hexo博客中插入数学公式。

感谢

感谢19年8月份的自己，能够坚持到现在。

stun的官方文档

更多动态模型

hexo的主题官网

hexo-deployer-git

hexo-abbrlink

hexo-abbrlink3

hexo-generator-search

hexo-helper-live2d

hexo-renderer-markdown-it-plus

mathtype

详解MathType快捷键使用技巧

结合MathType和MathJax在Hexo博客中插入数学公式

Hexo历险记之五幻丽插件相关推荐

Hexo历险记之七展示图片
前言细数过去,总共使用了如下三种方式: 使用Hero-admin插件在线编写博客,配合插件上传图片. 使用Typora等工具本地编写博客,用相对路径引用,配合PicGo搭配第三方图床或者自建图床使用 ...
Hexo历险记之六字符标签
前言之前我们已经成功创建了自己的博客,而且用主题和插件进行了美化,那么接下来我们就是要了解如何优雅地编写博客了. 这一篇,我会记录自己常用的字符和标签,以供大家参考和使用.(害羞) 提醒一下,对于图 ...
hexo pjax“暂时”解决aplayer插件间断播放问题
写在前面单独拿出来写是因为这点东西让我花了一些时间,毕竟新版的教程真的太少了,官方源码又看不懂,上tg问开发者也是听得一脸懵逼,他们会怼你简洁不好吗?非要自己修改主题.其实也是,想要DIY也是要付出 ...
优化Hexo性能，使用hexo-neat插件压缩页面，大幅度提升页面性能和响应速度
写在前面的话如果你还没有搭建Hexo博客成功的话,可以看看我写的这篇博客<手把手教你使用GitHub + Hexo搭建属于自己的个人博客>. 如果你搭建成功的话,可以看看关于这两篇博客& ...
Hexo历险记之三本地安装Hexo
前言 Hexo本身就是一个很简便却不简单的博客,前提是让我们除去恼人的模块依赖. 时隔四年,重启Hexo历险计划! 先附上我现在使用的Hexo版本及依赖,可以给大家做个参考. {"name& ...
Hexo界面美化_实用插件配置
Hexo实用插件用法 Hexo-blog-encrypt为你的文档加密这款插件将为你的文档执行加密操作,也就是说当游客需要浏览加密文档时必须要输入对应的密码首先使用npm安装插件 npm hexo ...
hexo博客使用hexo-admin插件管理文章
写在前面本文主要描述了怎么使用hexo-admin插件,hexo-admin的基本配置问题,各种问题.文章可能还有很多不足,请大家谅解,欢迎大佬提意见. 本文使用的东西 win10电脑 hexo 3 ...
Hexo瞎折腾系列(5) - 使用hexo-neat插件压缩页面静态资源
为什么要压缩页面静态资源对于个人博客来说,优化页面的访问速度是很有必要的,如果打开你的个人站点,加载个首页就要十几秒,页面长时间处于空白状态,想必没什么人能够忍受得了吧.我个人觉得,如果能把页面的加 ...
Hexo文件压缩：使用hexo-neat插件压缩页面静态资源
目录为什么要压缩页面静态资源 hexo的压缩静态资源插件如何使用hexo-neat 在站点根目录下安装hexo-neat 为站点配置文件添加相关配置 hexo-neat插件踩坑记录跳过压缩文件的 ...

Hexo历险记之五幻丽插件

前言

插件

永久链接

安装插件

配置插件

搜索

安装插件

配置插件

看板娘

遍览看板娘

看板娘-下载单个模型

看板娘-下载全部模型

字数统计

下载

配置

Pwa

开启数学公式渲染kaTexX

安装渲染器

主题配置

感谢

Hexo历险记之五幻丽插件相关推荐

最新文章

热门文章