效果图

参考akilar大佬的教程

hexo-butterfly首页分类磁铁4.0教程

https://akilar.top/posts/a9131002/

1，安装插件,

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

1
npm install hexo-butterfly-categories-card --save

2，添加配置信息，以下为写法示例
在站点配置文件_config.yml或者主题配置文件_config.butterfly.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
# hexo-butterfly-categories-card
# see https://akilar.top/posts/a9131002/
categoryBar:
  enable: true # 开关
  priority: 5 #过滤器优先权
  enable_page: / # 应用页面
  layout: # 挂载容器类型
    type: id
    name: recent-posts
    index: 0
  column: odd # odd：3列 | even：4列
  row: 1 #显示行数，默认两行，超过行数切换为滚动显示
  message:
    - descr: Ubuntu指南
      cover: https://npm.elemecdn.com/akilar-candyassets/image/cover1.webp
    - descr: 玩转Win10
      cover: https://npm.elemecdn.com/akilar-candyassets/image/cover2.webp
    - descr: 长篇小说连载
      cover: https://npm.elemecdn.com/akilar-candyassets/image/cover3.webp
    - descr: 个人日记
      cover: https://npm.elemecdn.com/akilar-candyassets/image/cover4.webp
    - descr: 诗词歌赋
      cover: https://npm.elemecdn.com/akilar-candyassets/image/cover5.webp
    - descr: 杂谈教程
      cover: https://npm.elemecdn.com/akilar-candyassets/image/cover6.webp
  custom_css: https://npm.elemecdn.com/hexo-butterfly-categories-card@1.0.0/lib/categorybar.css

3，看效果

1
hexo cl && hexo g && hexo s