教程：基于Butterfly主题的分类磁铁

序言：效果展示

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

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

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

笔者对于函数及 function 的研究，还不透彻，导致无法完全自动生成。

能力有限，如果有写的很蠢的地方请见谅。

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

步骤 1：修改 pug 代码

替换代码

在开始一切工作之前，先确保你有 6 篇不同 categories 的文章。如果，没有的话需要新建示例文章。

前往”根目录\themes\butterfly\layout”文件夹，将”index.pug”复制并重命名为”index-re.pug”作为备份。

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

你可以直接将以下代码放入进行替换。

extends includes/layout.pug
block content
  include ./includes/mixins/post-ui.pug
  #recent-posts.recent-posts
    .recent-post-item(style='width:100%;height:auto;float:left;padding:5px;flex-wrap:wrap;justify-content : center;flex-direction: row; ')
     figure.gallery-group#color-card
      img.gallery-group-img.loaded(src='/images/listen.jpg', data-ll-status='loaded')
      figcaption(style='background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0.4) 25%,rgba(16,16,16,0) 100%')
       .gallery-group-name(style='font-size: 1rem;') | 分类一
       p 分类一描述
       a(href='/categories/NHK%E5%90%AC%E5%8A%9B%E7%BB%83%E4%B9%A0/')
     figure.gallery-group#color-card
      img.gallery-group-img.loaded(src='/images/draw.JPG', data-ll-status='loaded')
      figcaption(style='background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0.4) 25%,rgba(16,16,16,0) 100%')
       .gallery-group-name(style='font-size: 1rem;') | 分类二
       p 分类二描述
       a(href='categories/%E4%BD%9C%E5%93%81%E9%9B%86/')
     figure.gallery-group#color-card
      img.gallery-group-img.loaded(src='/images/study.jpg', data-ll-status='loaded')
      figcaption(style='background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0.4) 25%,rgba(16,16,16,0) 100%')
       .gallery-group-name(style='font-size: 1rem;') | 分类三
       p 分类三描述
       a(href='categories/%E5%AD%A6%E4%B9%A0/')
     figure.gallery-group#color-card
      img.gallery-group-img.loaded(src='/images/life.jpg', data-ll-status='loaded')
      figcaption(style='background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0.4) 25%,rgba(16,16,16,0) 100%')
       .gallery-group-name(style='font-size: 1rem;') | 分类四
       p 分类四描述
       a(href='categories/%E6%B8%B8%E6%88%8F%E8%AF%84%E6%B5%8B/')
     figure.gallery-group#color-card
      img.gallery-group-img.loaded(src='/images/work.png', data-ll-status='loaded')
      figcaption(style='background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0.4) 25%,rgba(16,16,16,0) 100%')
       .gallery-group-name(style='font-size: 1rem;') | 分类五
       p 分类五描述
       a(href='categories/%E7%94%9F%E6%B4%BB%E8%B6%A3%E9%97%BB/')
     figure.gallery-group#color-card
      img.gallery-group-img.loaded(src='/images/idea.jpg', data-ll-status='loaded')
      figcaption(style='background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0.4) 25%,rgba(16,16,16,0) 100%')
       .gallery-group-name(style='font-size: 1rem;') | 分类六
       p 分类六描述
       a(href='categories/%E9%9A%8F%E6%83%B3/')
    .recent-post-item(style='height:0px;clear:both;margin-top: 0px;')
    +postUI
    div!= list_categories()

步骤 2：了解修改的 pug 代码结构

这个代码看上去很长，但其实结构很简单。以下是从第五行开始的结构拆解。

外框

1	.recent-post-item(style='width:100%;height:auto;float:left;padding:5px;flex-wrap:wrap;justify-content : center;flex-direction: row; ')

这个利用了文章底板的样式。并加入了自定义的 style。

PS：如果磁贴分类不在顶部，如我的博客有 calendar 的情况。请在” .recent-post-item(style=’ “后加入”margin-top: 20px;”

单一分类

figure.gallery-group#color-card
      img.gallery-group-img.loaded(src='/images/listen.jpg', data-ll-status='loaded')
      figcaption(style='background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0.4) 25%,rgba(16,16,16,0) 100%')
       .gallery-group-name(style='font-size: 1rem;') | 分类一
       p 分类一描述
       a(href='/categories/NHK%E5%90%AC%E5%8A%9B%E7%BB%83%E4%B9%A0/')

这个利用了 gallery 的样式。你可以更改以下部分：

① 分类图片：src=’/images/listen.jpg’

② 分类名称：分类一（尽量控制在 4 个字以内，不然手机自适应会受影响）

③ 分类描述：分类一描述（尽量控制在 6 个字以内，不然手机自适应会受影响）

④ 分类链接：href=’/categories/NHK%E5%90%AC%E5%8A%9B%E7%BB%83%E4%B9%A0/‘

PS：需使用 UL 编码转换工具将中文分类转换为对应链接编码

最好分类的数量为 3 的倍数，这样自适应不会出问题，推荐 6 个。

生成文章

+postUI

这个是生成文章的部分，就不用解释了。

生成分类列表

1	div!= list_categories()

这里用到了 hexo 主题自带的帮助函数 list_categories()。

生成效果

“hexo g”生成页面,在本地”hexo s”打开页面，将页面底端的分类信息截图记下。

步骤 3：修改 pug 代码自定义信息

按照上一步的截图信息依次向”index-re.pug”的单一分类代码块部分填入自定义信息。

以我的分类为例子，我的分类顺序为听力练习、作品集、学习教程、游戏评测、生活趣闻、随想。

我的代码如下：

extends includes/layout.pug
block content
  include ./includes/mixins/post-ui.pug
  #recent-posts.recent-posts
    .recent-post-item(style='width:100%;height:auto;float:left;padding:5px;flex-wrap:wrap;justify-content : center;flex-direction: row; ')
     figure.gallery-group#color-card
      img.gallery-group-img.loaded(src='/images/listen.jpg', data-ll-status='loaded')
      figcaption(style='background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0.4) 25%,rgba(16,16,16,0) 100%')
       .gallery-group-name(style='font-size: 1rem;') | 听力练习
       p 我是分类一
       a(href='/categories/NHK%E5%90%AC%E5%8A%9B%E7%BB%83%E4%B9%A0/')
     figure.gallery-group#color-card
      img.gallery-group-img.loaded(src='/images/draw.JPG', data-ll-status='loaded')
      figcaption(style='background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0.4) 25%,rgba(16,16,16,0) 100%')
       .gallery-group-name(style='font-size: 1rem;') | 作品集
       p 我是分类二
       a(href='categories/%E4%BD%9C%E5%93%81%E9%9B%86/')
     figure.gallery-group#color-card
      img.gallery-group-img.loaded(src='/images/study.jpg', data-ll-status='loaded')
      figcaption(style='background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0.4) 25%,rgba(16,16,16,0) 100%')
       .gallery-group-name(style='font-size: 1rem;') | 学习教程
       p 我是分类三
       a(href='categories/%E5%AD%A6%E4%B9%A0/')
     figure.gallery-group#color-card
      img.gallery-group-img.loaded(src='/images/life.jpg', data-ll-status='loaded')
      figcaption(style='background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0.4) 25%,rgba(16,16,16,0) 100%')
       .gallery-group-name(style='font-size: 1rem;') | 游戏评测
       p 我是分类四
       a(href='categories/%E6%B8%B8%E6%88%8F%E8%AF%84%E6%B5%8B/')
     figure.gallery-group#color-card
      img.gallery-group-img.loaded(src='/images/work.png', data-ll-status='loaded')
      figcaption(style='background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0.4) 25%,rgba(16,16,16,0) 100%')
       .gallery-group-name(style='font-size: 1rem;') | 生活趣闻
       p 我是分类五
       a(href='categories/%E7%94%9F%E6%B4%BB%E8%B6%A3%E9%97%BB/')
     figure.gallery-group#color-card
      img.gallery-group-img.loaded(src='/images/idea.jpg', data-ll-status='loaded')
      figcaption(style='background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0.4) 25%,rgba(16,16,16,0) 100%')
       .gallery-group-name(style='font-size: 1rem;') | 随想
       p 我是分类六
       a(href='categories/%E9%9A%8F%E6%83%B3/')
    .recent-post-item(style='height:0px;clear:both;margin-top: 0px;')
    +postUI
    div!= list_categories()
    include includes/pagination.pug

步骤 4：编写 CSS 样式代码

向 styl 里添加代码

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

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

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

在末尾处填写以下代码：

#color-card
  width:32%
  height: 180px

@media screen and (max-width: 650px)
 #color-card
  width: 47%
  height: 150px

这部分代码控制自适应，你会发现磁贴的大小发生了变化。

添加自定义 css 代码文件

在 hexo 根目录”source”文件夹下新建”magnetcss”文件夹，在”\source\magnetcss”路径下新建”magnet.css”

填入以下代码后保存。

.category-list-count:after {
  content: " 篇";
}
.fa-book {
  padding-right: 5px;
}
.category-list-count {
  font-weight: bold;
}
.category-list-item {
  list-style-type: none;
}

步骤 5：接入 CSS 样式和 JS 代码

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

搜索到”inject:”设置处

添加以下代码：

inject:
  head:
    - <link rel="stylesheet" href="/magnetcss/magnet.css"/>

  bottom:
    - <script> $(".category-list-count").prepend("<i class=\"fas fa-book\"></i>");</script>
    - <script> $(".category-list-item").eq(0).insertAfter($(".gallery-group-name").eq(0))</script>
    - <script> $(".category-list-item").eq(1).insertAfter($(".gallery-group-name").eq(1))</script>
    - <script> $(".category-list-item").eq(2).insertAfter($(".gallery-group-name").eq(2))</script>
    - <script> $(".category-list-item").eq(3).insertAfter($(".gallery-group-name").eq(3))</script>
    - <script> $(".category-list-item").eq(4).insertAfter($(".gallery-group-name").eq(4))</script>
    - <script> $(".category-list-item").eq(5).insertAfter($(".gallery-group-name").eq(5))</script>
    - <script> $(".category-list-item a").hide();</script>