前言 {#前言}

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

效果如下：

基于Butterfly 4.2.2版本

操作 {#操作}

在\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 |

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