教程：分类磁贴（Categories Magnet）

原文链接：https://akilar.top/posts/a9131002/
作者：Akilar

简介

本项目是对冰卡诺老师「分类磁贴 2.0 版」进行重构：

  • 去除所有 JS 依赖，纯 CSS 实现
  • 完美支持 Pjax
  • 自动获取分类和文章数
  • 自定义配置行数（3 列或 4 列）
  • 磁贴只显示一级分类
  • 自定义磁贴封面及描述

插件安装（推荐）

在博客根目录下运行：

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

配置

在站点配置文件 _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

参数说明

参数 可选值 说明
enable true/false 控制开关
priority number 过滤器优先级，默认 10
enable_page path / all 应用页面，/ 为首页
layout.type id / class 挂载容器类型
layout.name text 容器名称
layout.index number 第几个容器
column odd / even 列数：odd=3列，even=4列
row number 显示行数，超过自动滚动
message.descr text 分类描述（需与文章分类一一对应）
message.cover url / color 分类背景图
custom_css url 自定义样式

效果

  • 首页显示大圆角分类磁贴卡片
  • 每个磁贴有封面背景图
  • 显示分类名 + 文章数量
  • hover 时背景放大 + 变暗效果
  • 超过设定行数自动滚动隐藏