效果图

这个插件主要实现了以下功能： 1. 自定义 tags 或 categories 的排列和展示 2. 自定义 tags 或 categories 的展示图标，名称 3. 自定义排列的行数，默认 2 列

1，安装插件

1
npm i hexo-magnet --save

2，添加配置信息

在站点配置文件_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
magnet:
  enable: true # 是否开启插件
  priority: 1  # 插件的叠放顺序，数字越大，叠放约靠前
  enable_page: /  # 路由地址，如 / 代表主页。/me/ 代表自我介绍页等等
  type: categories # 选择筛选分类categories还是标签tags
  devide: 2 # 表示分隔的列数，2 表示分为两列展示
  display:
    - name: 教程  # 这里是tags或者categories的名称
      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: ""

layout

参数：type; （class&id）
参数：name;
参数：index；（数字）
含义：如果说 magnet 是一幅画，那么这个 layout 就是指定了哪面墙来挂画
而在 HTML 的是世界里有两种墙分别 type 为 id 和 class。
其中在定义 class 的时候会出现多个 class 的情况，这时就需要使用 index，确定是哪一个。
最后墙的名字即是 name;

1
2
3
4
5
6
7
8
<div name="我是墙" id="recent-posts">
  <!-- id=>type  recent-posts=>name    -->
  <div name="我是画框">
    <div name="我是纸">
      <!--这里通过js挂载magnet，也就是画画-->
    </div>
  </div>
</div>

temple_html

参数：html 模板字段
含义：包含挂载容器

1
2
3
4
5
<div class="recent-post-item" style="width:100%;height: auto"> <!--文章容器-->
  <div id="catalog_magnet">  <!--挂载容器-->
    ${temple_html_item}
  </div>
</div>

  • plus_style

    参数：“”
    含义：提供可自定义的 style，如加入黑夜模式。

3，假如参考Famalhaut大佬的黑暗模式

在custom.css文件中添加以下代码适配黑夜模式(具体颜色可以自己调节)：

1
2
3
4
5
6
7
8
9
10
11
/* 小冰分类分类磁铁黑夜模式适配 */
/* 一般状态 */
[data-theme="dark"] .magnet_link_context {
  background: #1e1e1e;
  color: antiquewhite;
}
/* 鼠标悬浮状态 */
[data-theme="dark"] .magnet_link_context:hover {
  background: #3ecdf1;
  color: #f2f2f2;
}

4，看效果

1
hexo cl && hexo g && hexo s