君匡

V1

2022/08/02阅读:18主题:自定义主题1

Hexo历险记之五幻丽插件

前言

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

时隔四年,重启Hexo历险计划!

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
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
permalink

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

搜索

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

image-20220726190739151
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:
  # 是否启用
  enabletrue

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

看板娘

遍览看板娘

选择一个漂酿、好玩又萌翻的看板娘是灰常灰常的有吸引力哦!

找到了原作者的展示网页:live2d模型,网站公告说原作者要迁移域名了https://eyhn.in/,但是暂时还没迁移文章。

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

live2d-widget-model-haruto
live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-miku
live2d-widget-model-tororo
live2d-widget-model-tororo
live2d-widget-model-tsumiki
live2d-widget-model-tsumiki
live2d-widget-model-z16
live2d-widget-model-z16
Snipaste_2019-08-27_23-21-03
Snipaste_2019-08-27_23-21-03
live2d-widget-model-chitose
live2d-widget-model-chitose
live2d-widget-model-gf
live2d-widget-model-gf
live2d-widget-model-haru
live2d-widget-model-haru

看板娘-下载单个模型

如果你看上了上面的某个看榜娘,那就娶回家吧!我就超级喜欢haruto,所以后来直接下载他了!

在博客根目录下安装基础支持的插件和模型插件。

#基础支持的插件
npm install --save hexo-helper-live2d
#单个live2d模型
npm install --save live2d-widget-model-haruto

在站点的配置文件中,也就是和source同级目录的_config.yml里面添加上:

live2d:
  enabletrue
  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 

下载完成所有模型后:

  1. 在博客根目录下创建文件夹live2d_models
  2. 在此文件夹内新建一个子文件夹live2dw
  3. live2d-widget-model-haruto模型复制到live2dw
  4. 修改配置文件 _config.ymlmodel.use 字段

字数统计

提供字数统计和阅读时长统计功能,也要注意当前使用的主题是否支持这个功能。官方文档

下载

npm install hexo-wordcount --save

配置

  word_count:
    enabletrue

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月份的自己,能够坚持到现在。

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博客中插入数学公式

分类:

后端

标签:

后端

作者介绍

君匡
V1