这个是前期用的模板，后续感觉还是不好，我就去改了另一种（详情看藏宝阁），这里记录最早模板的藏宝阁布置方式。

点击查看预览

创建css文件

自定义一个css文件，根据自己的要求进行修改适配自己的主题。

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
/* 藏宝阁 */

.collect-item-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 -8px;
}

.collect-item-content-item {
    width: calc(25% - 12px);
    border-radius: 12px;
    border: 1px solid #e3e8f7;
    overflow: hidden;
    margin: 8px 6px;
    background: #fff;
    box-shadow: 0 8px 16px -4px #2c2d300c;
    min-height: 400px;
    position: relative;
}

@media screen and (max-width: 1200px) {
    .collect-item-content-item {
        width: calc(50% - 12px);
    }
}

@media screen and (max-width: 768px) {
    .collect-item-content-item {
        width: 100%;
    }
}

.collect-item-content-item-info {
    padding: 8px 16px 16px 16px;
    margin-top: 12px;
}

.collect-item-content-item-name {
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: fit-content;
}

.collect-item-content-item-specification {
    font-size: 12px;
    color: #3c3c43cc;
    line-height: 1;
    margin-bottom: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.collect-item-content-item-description {
    line-height: 20px;
    color: #3c3c43cc;
    height: 60px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font-size: 14px;
}

a.collect-item-content-item-link {
    font-size: 12px;
    background: #9999992b;
    padding: 4px 8px;
    border-radius: 8px;
    cursor: pointer;
}

a.collect-item-content-item-link:hover {
    background: #425aef !important;
    color: #fff;
}

h2.collect-item-title {
    line-height: 1;
}

.collect-item-description {
    line-height: 1;
    margin: 4px 0 8px 0;
    color: #3c3c43cc;
}

.collect-item-content-item-cover {
    width: 100%;
    height: 200px;
    background: #f1f3f8;
    display: flex;
    justify-content: center;
}

img.collect-item-content-item-image {
    object-fit: cover;
    height: 100%;
}

div#collect {
    margin-top: 26px;
}

.collect-item-content-item-toolbar {
    display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: 12px;
    left: 0;
    width: 100%;
    padding: 0 16px;
}

a.bber-reply {
    cursor: pointer;
}

/* 去除页面白色底框 */
body[data-type=collect] #page {
    border: 0;
    box-shadow: none !important;
    padding: 0 !important;
    background: 0 0 !important;
}

创建pug文件

在【blog】\themes\butterfly\layout\includes\page\下创建一个名为collect.pug文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#collect
  if site.data.collect
    each i in site.data.collect
      .collect-item
        h2.collect-item-title= i.class_name
        .collect-item-description= i.description
        .collect-item-content
          each item, index in i.link_list
            .collect-item-content-item
              .collect-item-content-item-cover
                img.collect-item-content-item-image(data-lazy-src=url_for(item.image) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name)
              .collect-item-content-item-info
                .collect-item-content-item-name= item.name
                .collect-item-content-item-specification= item.specification
                .collect-item-content-item-description= item.description
                .collect-item-content-item-toolbar
                  if item.link.includes('https://') || item.link.includes('http://')
                    a.collect-item-content-item-link(href= item.link, target='_blank') 详情
                  else
                    a.collect-item-content-item-link(href= item.link, target='_blank') 查看文章

创建yml文件

在你的【blog】\source\_data\下创建一个名为collect.yml的文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# class_name 标题
# description 分类描述
# name 文件名
# specification 标签
# description 描述
# image 文章图
# link 链接
- class_name: Galgame
  description: 与动画美少女进行互动的电子游戏
  link_list:
    - name: 飞鸟会长不肯认输
      specification: PC硬盘
      description: 海豹社于2022年12月23日发售的短篇Galgame，由若叶祥庆负责剧本，濑奈茅冬等负责原画。游戏的原画精美，剧本短小精悍，以恋爱发糖为主
      image: https://jsd.onmicrosoft.cn/npm/blogimages/games/f6d362b9aea9_720w.png
      link: https://pan.baidu.com/s/1gvT54_O5J-gA_nYuOeWjLg?pwd=igst
    - name: 野良与皇女与流浪猫之心
      specification: kr、PC硬盘
      description: 开发商HARUKAZE发售的一部以欢乐搞笑为基调的美少女游戏，有些毒点
      image: https://jsd.onmicrosoft.cn/npm/blogimages/games/47cb5fa1440w.jpg
      link: https://pan.baidu.com/s/1Wn8AgENpFspxi8ke0K4DiA?pwd=pxwd

hexo cl && hexo g && hexo s 三连即可。