效果展示:

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

  1. 将文件植入butterfly
    在themes/butterfly/layout/page.pug中添加grid.pug
1
2
when 'grid'
        include includes/page/grid.pug
  1. 创建数据文件
    创建source/_data/grid.yml
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
- class_name: 追番
  description: ❤
  grid_list:
    - name: 深夜重拳
      specification: 真夜中ぱんチ
      description: 
      image: https://lain.bgm.tv/pic/cover/l/0c/cf/477207_0lA1U.jpg
      link: https://www.bgm.tv/subject/477207
    - name: 亚托莉 -我挚爱的时光-
      specification: ATRI -My Dear Moments- 
      description: 「我想完成主人留下的最后一道命令。在那之前，我来做夏生的脚！」在逐渐沉入海中的安宁小镇，少年与机器人少女难以忘怀的夏天开始了——
      image: https://lain.bgm.tv/pic/cover/l/66/6d/397604_TgJ63.jpg
      link: https://bgm.tv/subject/397604


- class_name: 阅读
  description: ❤
  grid_list:
    - name: 最后机会所在的城市 - 阿德里安·柴可夫斯基
      specification: City of Last Chances
      description: 伊尔玛一直都很黑暗，但从未像现在这样黑暗。这座城市在Palleseen占领的重拳之下，在犯罪黑社会的窒息之下，在工厂主的靴子之下，在可怜的穷人的重压之下，在古老诅咒的负担之下。点燃这场大火的火花是什么？尽管这座城市有难民、流浪者、杀人犯、疯子、狂热分子和小偷，但催化剂一如既往地将是锚木——那片黑暗的树林，那片原始的遗迹，那座满月时通往陌生遥远海岸的门户。
      image: https://images-na.ssl-images-amazon.com/images/S/compressed.photo.goodreads.com/books/1655508932i/60147395.jpg
      link: https://www.goodreads.com/book/show/60147395-city-of-last-chances
    - name: 灵魂囚笼 - 阿德里安·柴可夫斯基
      specification: Cage of Souls
      description: 太阳膨胀了，生病了，也许快死了。在其危险的光线下，沙德拉帕，最后一个城市，拥有不到10万人的灵魂。Shadrapar建在无数文明的废墟上，在早已死去的祖先的废墟上幸存下来，是一个博物馆、一个避难所、一个监狱，在一个对人类来说越来越陌生的世界上。
      image: https://images-na.ssl-images-amazon.com/images/S/compressed.photo.goodreads.com/books/1547654406i/40803025.jpg
      link: https://www.goodreads.com/book/show/40803025-cage-of-souls
  1. 引入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
.grid-item-content {  
  display: flex;  
  flex-direction: row;  
  flex-wrap: wrap;  
  margin: 0 -8px;  
}  
  
.grid-item-content-item {  
  width: calc(25% - 12px);  
  border-radius: 12px;  
  border: var(--style-border-always);  
  overflow: hidden;  
  margin: 8px 6px;  
  background: var(--heo-card-bg);  
  box-shadow: var(--heo-shadow-border);  
  min-height: 400px;  
  position: relative;  
}  
  
@media screen and (max-width: 1200px) {  
  .grid-item-content-item {  
    width: calc(50% - 12px);  
  }  
}  
  
@media screen and (max-width: 768px) {  
  .grid-item-content-item {  
    width: 100%;  
  }  
}  
  
.grid-item-content-item-info {  
  padding: 8px 16px 16px 16px;  
  margin-top: 12px;  
}  
  
.grid-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;  
}  
  
.grid-item-content-item-specification {  
  font-size: 12px;  
  color: var(--heo-secondtext);  
  line-height: 1;  
  margin-bottom: 12px;  
  white-space: nowrap;  
  overflow: hidden;  
  text-overflow: ellipsis;  
}  
  
.grid-item-content-item-description {  
  line-height: 20px;  
  color: var(--heo-secondtext);  
  height: 60px;  
  display: -webkit-box;  
  overflow: hidden;  
  -webkit-line-clamp: 3;  
  -webkit-box-orient: vertical;  
  font-size: 14px;  
}  
  
a.grid-item-content-item-link {  
  font-size: 12px;  
  background: var(--heo-gray-op);  
  padding: 4px 8px;  
  border-radius: 8px;  
  cursor: pointer;  
}  
  
a.grid-item-content-item-link:hover {  
  background: var(--heo-main);  
  color: var(--heo-white);  
}  
  
h2.equipment-item-title {  
  line-height: 1;  
}  
  
.equipment-item-description {  
  line-height: 1;  
  margin: 4px 0 8px 0;  
  color: var(--heo-secondtext);  
}  
  
.grid-item-content-item-cover {  
  width: 100%;  
  height: 200px;  
  background: var(--heo-secondbg);  
  display: flex;  
  justify-content: center;  
}  
  
img.grid-item-content-item-image {  
  object-fit: cover;  
  height: 100%;  
}  
  
div#equipment {  
  margin-top: 26px;  
}  
  
.grid-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;  
}
  1. 创建 Grid 页面
    创建/source/grid/index.md
1
2
3
4
5
6
---  
title: 近期所看
date: 2024-09-01 11:54:30
aside: false
type: grid 
---