Hexo侧边栏添加文章合集

前言

本文将介绍如何在首页侧边栏添加文章合集板块。可以提供一些重要文章的展示。

操作

在 \themes\butterfly\layout\includes\widget 目录下新建 card_collections.pug 文件，并写入如下代码：

1
2
3
4
5
6
7
8
if theme.aside.card_collections.enable
  .card-widget
    .item-headline
      i(class=theme.aside.card_collections.icon)
      span=theme.aside.card_collections.title
    each item in site.data.collections.collections
      .collections-item-content
        a(href=item.url)=item.name

在 \themes\butterfly\layout\includes\widget\index.pug 文件中 page 项添加如下代码：

1
!=partial('includes/widget/card_collections', {}, {cache: true})

在 \source_data 目录下（如没有_data 需自行创建）新建文件 collections.yml，并写入如下代码：

1
2
3
4
5
collections:
  - name: 名称1
    url: '文章1url'
  - name: 名称2
    url: '文章2url'

注意：url 为文章渲染后的完整链接

在 \themes\butterfly\source\css 目录下新建 collections.css 文件，并写入如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
.collections-item-content{
  font-size: 1.3em;
  font-weight: bolder;
}
.collections-item-content > a:link{
  color: #64b2ff;
}
.collections-item-content > a:visited{
  color: #64b2ff;
}
.collections-item-content > a:hover{
  color: #5e7987;
}

并在主题配置文件_config.butterfly.yml 的 head 处引入该文件：

1
2
3
inject:
  head:
    - <link rel="stylesheet" href="/css/collections.css">

在主题配置文件_config.butterfly.yml 的 aside 处添加如下配置：

1
2
3
4
5
6
aside:
    card_collections:
        enable: true
        title: '系列合集' # 模块标题
        icon: 'fas fa-cubes' #模块标题前的图案
        sort_order: # Don't modify the setting unless you know how it works

保存配置，重新渲染，就可以了。