当前教程已暂停维护

最新教程，请参考最新教程akilar- 基于 Butterfly 主题的分类磁贴

序言：效果展示

灵感来源于原生主题的 gallery 以及在其他主题见到过的分类列表。

考虑到部分小伙伴的 tag 比较多，因此用 categories 为标准进行分类。

这里用到了 hexo 主题自带的帮助函数 list_categories()。帮助函数的作用在于能够自动帮你生成一些信息。

笔者对于函数及 function 进行了深入研究，利用 vue 实现了磁贴的自动获取和部分样式配置。

资源包地址：https://github.com/Zfour/Butterfly-magnet

资源包下载

废话不多说了，开始教学。

步骤 1：修改 pug 代码

在开始一切工作之前，先确保你有至少 4 篇不同 categories 的文章。如果没有的话需要新建示例文章。
分类为自动获取的主分类。

下载资源包

资源包下载

增加、替换代码

前往”根目录\themes\butterfly\layout”文件夹，将资源包中的”catalogMagnet.pug”复制到文件夹中。

将”index.pug”复制并重命名为”index-re.pug”作为备份。

将资源包中的”index.pug”覆盖进行替换。

或者打开”index.pug”按照以下代码进行修改。修改的起始点为”#recent-posts.recent-posts”。

ps:如果分类前有 gitcalendar 等块级元素的话在”photo-tag(style=’”后加”margin-top: 20px”来增加块之间的间隔。

1
2
3
4
5
6
7
8
9
10
extends includes/layout.pug

block content
  include ./includes/mixins/post-ui.pug
  #recent-posts.recent-posts
    .recent-post-item.photo-tag(style='width:100%;height:auto;float:left;padding:5px;flex-wrap:wrap;justify-content : center;flex-direction: row; ')
      include catalogMagnet.pug
    .recent-post-item(style='height:0px;clear:both;margin-top: 0px;')
    +postUI
    include includes/pagination.pug

这里部分新手在使用时会出现 bug
磁贴和文章间会空出很大一行，
这时请使用备用兼容的 pug
.recent-post-item(style=’height:0px;clear:both;margin-top: 0px;’)的目的是重置换行

步骤 2：添加引入 js、css 代码

放置资源包

将下载包中的 magnet 文件夹放入根目录的”source”文件夹下。

向 styl 里添加代码

因为在调试过程中出现了 bug，且尚未解决，所以需要将以下代码加入到 style 里。

前往”博客根目录\themes\butterfly\source\css_layout”打开”third-party.styl”

提示：这里最好不要备份，备份的话不要放在 css 目录下（你可以复制一份到桌面）。

在末尾处填写以下代码：

1
2
3
4
5
6
7
8
9
10
.color-card
  width: 24%!important
  height: 180px!important
  margin: 0.3rem 0.5%!important

@media screen and (max-width: 650px)
 .color-card
  width: 48%!important
  height: 150px!important
  margin: 0.3rem 1%!important

引入 js 和 css

打开”\themes\butterfly"路径下的”_config.yml”

搜索到”inject:”设置处

添加以下代码：

若已有 vue 引入，请确保 vue 的版本为 2.6 以上。

你也可使用“https://cdn.jsdelivr.net/npm/vue@2.6.11”进行cdn引入。

bottom:

-

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

<p>此时，"hexo s"可发现文章的分类已经全部加载。</p>

<hr></hr>

## 步骤2：了解控制自定义属性的js配置 ##

<p>本磁贴通过catalogMagnet.js的配置项实现以下自定义属性。</p>

### 磁贴背景图片 ###

<p>按照从左到右，从上到下的顺序填写，可增加任意数量数组元素。</p>

```js
        //这里是磁贴背景图片
        img:[
            "/images/b1.JPG",
            "/images/b2.JPG",
            "/images/b3.JPG",
            "/images/b4.JPG",
            "/images/b5.JPG",
            "/images/b6.JPG",
            "/images/b7.JPG",
            "/images/b8.JPG",
        ],

磁贴描述信息

按照从左到右，从上到下的顺序填写，可增加任意数量数组元素。

1
2
3
4
5
6
7
8
9
10
11
//这里是磁贴描述信息
describe:[
    "日本早安新闻",
    "vue学习记录",
    "我的各种作品",
    "我的学习整理",
    "我的各种教程",
    "我的游戏评测",
    "生活点点滴滴",
    "一切胡思乱想",
],

磁贴样式配置

你可以通过此项修改磁贴的文字颜色，图片遮罩、阴影等效果。

1
2
3
4
5
6
7
8
9
10
11
      //这里是磁贴的文字颜色
figLetColor: {color:'white'},

//这里是磁贴的文字遮罩
figLetimg: {backgroundImage: 'linear-gradient(to bottom,rgba(0, 0, 0, 0.4) 25%,rgba(16,16,16,0) 100%)'},

//这里是当磁贴图片为透明背景png时默认展示的背景颜色
figbackColor: {background:'#000000 URL()'},

//这里是当磁贴图片为透明背景png时默认展示的凹凸效果
figShadow: {boxShadow: 'inset 3px 3px 18px 0px rgba(50,50,50, 0.4)'},

定制展示配置

通过增加以下 js 代码可隐藏不需要展示的分类。

1
2
3
4
5
$(".color-card").eq(0).css({ display: "none" });
//隐藏出现在列表中的第一个磁贴

$(".color-card").eq(1).css({ display: "none" });
//隐藏出现在列表中的第二个磁贴

如果以上方法不成功请尝试 css 方法。（来自 zero）

1
2
3
figure.gallery-group.color-card:nth-child(1) {
  display: none;
}

总结

在添加新分类后，分类排序可能出现变化，请对应修改配置项。

若有问题请与我邮件联系499984532@qq.com。