Hexo默认的静态URL格式是 :year/:month/:day/:title，即按年、月、日、标题的形式生成固定链接，如果文章的标题使用了中文，经过转码后，URL会变得特别长。生成短链就是这个插件的作用。

1
2
3
hexo原url格式：https://www.XXX.com/2024/08/11/Butterfly%E4%B8%BB%E9%A2%98%E9%AD%94%E6%94%B9%E7%AC%94%E8%AE%B0(%E2%85%A1)/

优化后：`https://www.xxx.com/posts/b40f8ae4.html`

效果预览

点击预览

image-20240812221113497

安装插件

1
npm install hexo-abbrlink --save

修改配置

  1. 在_config.yml 配置文件中添加下面的配置信息：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
permalink: posts/:abbrlink.html
# abbrlink config 哈希url路径
abbrlink:
  alg: crc32      #support crc16(default) and crc32
  rep: hex        #support dec(default) and hex
  drafts: false   #(true)Process draft,(false)Do not process draft. false(default) 
  # Generate categories from directory-tree
  # depth: the max_depth of directory-tree you want to generate, should > 0
  auto_category:
     enable: true  #true(default)
     depth:        #3(default)
     over_write: false 
  auto_title: false #enable auto title, it can auto fill the title by path
  auto_date: false #enable auto date, it can auto fill the date by time today
  force: false #enable force mode,in this mode, the plugin will ignore the cache, and calc the abbrlink for every post even it already had abbrlink. This only updates abbrlink rather than other front variables.

_config.yml 中支持的两种写法

1
2
3
permalink: posts/:abbrlink/ 
# or
permalink: posts/:abbrlink.html

有两种设置：
alg——算法(目前支持crc16和crc32，默认为crc16)
rep——表示(生成的链接可以用十六进制或十进制值表示)

示例

1
2
3
4
5
6
7
8
9
crc16 & hex
https://test.com/posts/55c6.html
crc16 & dec
https://test.com/posts/43212.html

crc32 & hex
https://test.com/posts/6ec16a2c.html
crc32 & dec
https://test.com/posts/1521457752.html

执行三连

1
hexo cl && hexo g && hexo s

hexo-butterfly-envelope (留言板)

信笺样式的留言板，放导航栏

效果预览

点击预览

1723784222272

安装插件

1
npm install hexo-butterfly-envelope --save

修改配置

在主题配置文件_config.butterfly.yml中添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# envelope_comment
# see https://akilar.top/posts/e2d3c450/
envelope_comment:
  enable: true #控制开关
  custom_pic:      
    cover: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/violet.jpg #信笺头部图片
    line: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/line.png #信笺底部图片
    beforeimg: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/before.png # 信封前半部分
    afterimg: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/after.png # 信封后半部分
  message: #信笺正文，多行文本，写法如下
    - 有什么想问的？
    - 有什么想说的？
    - 有什么想吐槽的？
    - 哪怕是有什么想吃的，都可以告诉我哦~
  bottom: 自动书记人偶竭诚为您服务！ #仅支持单行文本
  height: #1050px，信封划出的高度
  path: #【可选】comments 的路径名称。默认为 comments，生成的页面为 comments/index.html
  front_matter: #【可选】comments页面的 front_matter 配置
    title: 留言板
    comments: true

然后在导航栏添加留言板

1
2
menu:
  留言板: /comments/ || fas fa-envelope-open

执行三连

1
hexo cl && hexo g && hexo s

hexo-magnet (分类磁贴)

参考地址：首页分类磁贴1.0（小冰）

将分类文章或者标签放首页

效果预览

点击预览

1723784222272

安装插件

在博客根目录[BlogRoot]下打开终端，运行以下指令：

1
npm i hexo-magnet --save

修改配置

在配置文件_config.yml中添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
## 首页分类磁贴
magnet:
  enable: true
  priority: 1
  enable_page: /
  type: categories
  devide: 2
  display:
    - name: 教程
      display_name: 小冰の魔改教程
      icon: 📚
    - name: 游戏评测
      display_name: 小冰の游戏评测
      icon: 🎮
    - name: 生活趣闻
      display_name: 小冰の生活趣闻
      icon: 🐱‍👓
    - name: vue
      display_name: 小冰の编程学习
      icon: 👩‍💻
    - name: 学习
      display_name: 小冰の读书笔记
      icon: 📒
    - name: 随想
      display_name: 小冰の胡思乱想
      icon: 💡
  color_setting:
    text_color: black
    text_hover_color: white
    background_color: "#f2f2f2"
    background_hover_color: "#b30070"
  layout:
    type: id
    name: recent-posts
    index: 0
  temple_html: '<div class="recent-post-item" style="width:100%;height: auto"><div id="catalog_magnet">${temple_html_item}</div></div>'
  plus_style: ""

注意- name:要替换成自己分类页面的关键词

执行三连

1
hexo cl && hexo g && hexo s

hexo-butterfly-swiper(轮播手动置顶文章)

参考地址：置顶轮播文章

效果预览

点击预览

1723784222272

插件教程

安装插件,在博客根目录[Blogroot]下打开终端，运行以下指令：

1
npm install hexo-butterfly-swiper --save

添加配置信息

在站点配置文件_config.yml或者主题配置文件_config.butterfly.yml中添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# hexo-butterfly-swiper
# see https://akilar.top/posts/8e1264d1/
swiper:
  enable: true # 开关
  priority: 5 #过滤器优先权
  enable_page: all # 应用页面
  timemode: date #date/updated
  layout: # 挂载容器类型
    type: id
    name: recent-posts
    index: 0
  default_descr: 再怎么看我也不知道怎么描述它的啦！
  swiper_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.css #swiper css依赖
  swiper_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js #swiper js依赖
  custom_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiperstyle.css # 适配主题样式补丁
  custom_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper_init.js # swiper初始化方法

使用方法

在文章的front_matter中添加swiper_index配置项即可。

1
2
3
4
5
6
7
8
---
title: 文章标题
date: 创建日期
updated: 更新日期
cover: 文章封面
description: 文章描述
swiper_index: 1 #置顶轮播图顺序，非负整数，数字越大越靠前
---

执行三连

1
hexo cl && hexo g && hexo s

hexo-wordcount-fomal(字数统计)

开启字数统计之后，在博客根目录终端依次运行以下命令：

效果预览

点击预览

1723825316382

卸载旧的依赖

1
npm un hexo-wordcount --save

安装新的依赖

1
npm i hexo-wordcount-fomal --save

然后重启就可以看到显示w

执行三连

1
hexo cl && hexo g && hexo s