基于butterfly主题修改的一些个人样式，仅供参考，建议有一定魔改基础后食用。看心情提供售后，颜色请换成自己的。

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
:root {
    --ichika-color: #49A6E9;
    --ichika-hover-color: #ECAFFF;
    --ichika-widget-hover: #CFF0FF;
    --ichika-font-white: #FDFDFD;
    --ichika-light-green: #B2FFCA;
    --ichika-light-purple: #F6B9FF;
    --ichika-green: #11D991;
    --ichika-purple: #E764FF;
    --ichika-light-grey: #F2F2F2;
    --ichika-card-bg: rgba(255,255,255,0.45);
    --ichika-emphasis-color: #F7F81A;
    --ichika-bgblur: blur(10px);
    --ichika-footer-bg: linear-gradient(to bottom,transparent 0%,rgba(255,255,255,0.7) 40%);
    --ichika-font-grey: #888888;
    --ichika-categorycard-bg: linear-gradient(to top,rgba(255,255,255,0),rgba(255,255,255,1))
}

[data-theme='dark'] {
    --global-bg:black;
    --ichika-color: #1688C9;
    --ichika-widget-hover: #1B6587;
    --ichika-card-bg: rgba(0,0,0,0.7);
    --ichika-footer-bg: linear-gradient(to bottom,transparent 0%,rgba(0,0,0,0.7) 40%);
    --ichika-font-grey: #BBBBBB;
    --ichika-categorycard-bg:linear-gradient(to top,rgba(0,0,0,0),rgba(0,0,0,1))
}

归档、标签、分类页卡片

预览

QQ截图20221104131539

代码

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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
/* 归档、标签、分类页 */
.layout.hide-aside{
    max-width:1200px;
}

#archive,#tag,#category {
    background: var(--ichika-card-bg);
    padding: 25px 10px;
}

.article-sort-title{
    margin-top:30px;
    margin-bottom:20px;
}

.article-sort-item::before, .article-sort-title::before, .article-sort-title::after {
    content: none;
}

.article-sort .year{
    width:100%!important;
    border-bottom:dashed 5px var(--ichika-color);
    font-size:26px;
    margin-top:20px;
}

.article-sort{
    border:none;
    display:flex;
    flex-wrap:wrap;
    margin:20px 20px;
    padding:0;
}

.article-sort-item:not(.year){
    padding:8px 10px;
    width:calc(50% - 0.8rem);
    margin:0.4rem;
    border:2px solid var(--ichika-color);
    border-radius:15px;
    background:var(--card-bg);
    transition:0.5s;
    height:120px;
}

.article-sort-item-a{
    position:absolute;
    width:100%;
    height:100%;
}

.article-sort-item-img{
    transition:0.5s;
    height:90px;
    width:140px;
}

.article-sort-item > a >img{
    border-radius:15px;
}

.article-sort-item-title {
    font-size: 22px;
    padding-left: 10px;
    margin: 10px 0;
    line-height:25px;
    text-overflow:ellipsis;
}

.article-sort-item-title:hover{
    transform:none;
}

.article-sort-meta{
    height:max-content;
    position:relative;
}

.article-sort-meta > .article-meta-wrap{
    float:left;
}

.article-sort-meta > .article-sort-item-time{
    float:right;
}

.article-sort-item-categories,.article-sort-item-tags{
    margin:0 3px;
    padding:5px 8px;
    border-radius:25px;
    border:1px solid var(--dark-grey);
    font-size:12px;
    transition:0.5s;
}

.article-sort-item-info > div:not(.article-sort-meta){
    display:flex;
}

.article-sort-description,.article-sort-item > i{
    width:0;
    opacity:0;
    overflow:hidden;
    transition:0.5s;
}

.article-sort-description {
    width: 0;
    height: 59px;
    vertical-align: middle;
    margin: 5px 10px 0 15px;
    text-overflow:ellipsis;
}

.article-sort-item:hover:not(.year){
    background-color:var(--ichika-color);
    box-shadow: 0 0 10px var(--ichika-color);
}

.article-sort-item:hover:not(.year){
    background-color:var(--ichika-color);
    box-shadow: 0 0 10px var(--ichika-color);
}

.article-sort-item:hover:not(.year) .article-sort-description,.article-sort-item:hover:not(.year) > i{
    width:auto;
    opacity:1;
}

.article-sort-item:hover:not(.year) .article-sort-description{
    width:auto;
}

.article-sort-item:hover:not(.year) .article-sort-item-img{
    transition:0.5s;
    width:0;
}

.article-sort-item:hover:not(.year) .article-sort-item-title{
    color:var(--ichika-font-white)!important;
}

.article-sort-item:hover:not(.year) .article-meta-wrap a,.article-sort-item:hover:not(.year) .article-sort-description,.article-sort-item:hover:not(.year) .article-sort-item-time{
    color:var(--ichika-light-grey)!important;
}

.article-sort-item:hover:not(.year) .article-sort-item-categories{
    border:1.5px solid var(--ichika-green);
}

.article-sort-item:hover:not(.year) .article-sort-item-tags{
    border:1.5px solid var(--ichika-purple);
}

.article-sort-item:hover:not(.year) .article-sort-item-categories:hover{
    background:var(--ichika-green);
    box-shadow:0 0 5px var(--ichika-green);
}

.article-sort-item:hover:not(.year) .article-sort-item-tags:hover{
    background:var(--ichika-purple);
    box-shadow:0 0 5px var(--ichika-purple);
}

@media screen and (max-width:768px) {
    .article-sort-item:not(.year) {
        width: 100%;
    }

    .article-sort-meta > .article-meta-wrap {
        display: none;
    }

    .article-sort-item-title {
        font-size: 16px;
    }

    .article-sort-item-img{
        width:90px;
    }
}

/layout/includes/mixins/article-sort.pug:

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
mixin articleSort(posts)
  .article-sort
    - var year
    - posts.each(function (article) {
      - let tempYear = date(article.date, 'YYYY')
      - let no_cover = article.cover === false || !theme.cover.archives_enable ? 'no-article-cover' : ''
      - let title = article.title || _p('no_title')
      if tempYear !== year
        - year = tempYear
        .article-sort-item.year= year
      .article-sort-item(class=no_cover)
        a.article-sort-item-a(href=url_for(article.path) title=title)
        if article.cover && theme.cover.archives_enable
          a.article-sort-item-img(href=url_for(article.path) title=title)
            img(src=url_for(article.cover) alt=title onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'`)
        .article-sort-item-info
          div
            a.article-sort-item-title(href=url_for(article.path) title=title)= title
            .article-sort-description= article.description
          .article-sort-meta
            .article-meta-wrap
              if (theme.post_meta.page.categories && article.categories.data.length > 0)
                span.article-sort-item-categories
                  each item, index in article.categories.data
                    a(href=url_for(item.path)).article-meta__categories #[=item.name]
                    if (index < article.categories.data.length - 1)
                      i.fas.fa-angle-right
              if (theme.post_meta.page.tags && article.tags.data.length > 0)
                span.article-sort-item-tags
                  each item, index in article.tags.data
                    a(href=url_for(item.path)).article-meta__tags #[=item.name]
                    if (index < article.tags.data.length - 1)
                      span.article-meta__link #[=' ']
            .article-sort-item-time
              i.far.fa-calendar-alt
              time.post-meta-date-created(datetime=date_xml(article.date) title=_p('post.created') + ' ' + full_date(article.date))= date(article.date, config.date_format)
        i.fas.fa-chevron-right
    - })

标签、分类索引页

2022/12/22:少量样式修改，支持带emoji的标签了

2022/11/23:优化夜间模式表现

预览

QQ截图20221104132329

双页卡片，正面为标签/分类标题及描述，反面为对应文章列表。默认封面为对应项目下第一篇文章封面，无描述，每个卡片最多展示三篇文章。可以在主题配置文件下设定颜色、封面、和描述。

上图的主题配置示例：

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
categories: #categories/tags
  美化: #category/tag名称
    desc: 随便做的美化，但是技术力捉急 #卡片描述
    img: /img/Page/categories/美化.png #卡片封面
    color1: "#B7D31E" #卡片正面颜色以及背面渐变色1
    color2: "#42CE1E" #卡片背面渐变色2
  游戏:
    desc: 没有游戏该怎么活啊QAQ
    img: /img/Page/categories/游戏.png
    color1: "#06DE86"
    color2: "#06A5DE"
  站点相关:
    desc: 顾名思义，关于小窝的全部
    img: /img/Page/categories/站点相关.png
    color1: "#189BC4"
    color2: "#183DC4"
  生活:
    desc: live<br>a<br>live
    img: /img/Page/categories/生活.png
    color1: "#C018C4"
    color2: "#C41818"
  分享:
    desc: 一些可能有用的东西
    img: /img/Page/categories/分享.png
    color1: "#8B00BB"
    color2: "#030094"

其它默认设置在js里修改。

代码

/scripts/helpers/，新建category_cards.js:

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
hexo.extend.helper.register('category_cards', function (type) {
    const conf = hexo.config.theme_config
    let result = `<div class="category-cards">`
    //遍历所有标签/目录
    hexo.locals.get(type).map(function (item) {

        //获取变量
        if (eval('conf.' + type) && eval('conf.' + type + '.' + item.name)) {
            var itemdesc = eval('conf.' + type + '.' + item.name + '.desc') ? eval('conf.' + type + '.' + item.name + '.desc') : ''
            var itemimg = eval('conf.' + type + '.' + item.name + '.img') ? eval('conf.' + type + '.' + item.name + '.img') : item.posts.data[0].cover //默认封面
            var itemclo1 = eval('conf.' + type + '.' + item.name + '.color1') ? eval('conf.' + type + '.' + item.name + '.color1') : '#8B00BB' //默认颜色1
            var itemclo2 = eval('conf.' + type + '.' + item.name + '.color2') ? eval('conf.' + type + '.' + item.name + '.color2') : '#030094' //默认颜色2
        }
        else {
            var itemdesc = ''
            var itemimg = item.posts.data[0].cover
            var itemclo1 = '#8B00BB' //默认颜色1
            var itemclo2 = '#030094' //默认颜色2
        }

        result += `<div class="category-card">`

        //卡片正面
        result += `<div class="category-card-front" style="border-color:${itemclo1}">
                     <div class="card-front-img" style="background-image:var(--ichika-categorycard-bg),url('${itemimg}')"></div>
                     <div class="card-front-title" style="border-color:${itemclo1}">${item.name}</div>
                     <div class="card-front-desc">${itemdesc}</div>
                     <div class="card-front-amount">${item.length}篇文章</div>
                   </div>`


        //卡片背面
        let itemcontent = ''
        for (i = 1; i < 4 && i < item.posts.length + 1; i++) {
            let post = item.posts.data[item.posts.length - i]
            
            itemcontent += `<li><a href='/${post.path}'>${post.title}</a></li>`
        }
        result += `<div class="category-card-back" style="border-color:${itemclo1};background: linear-gradient(to top left, ${itemclo1} 0%, ${itemclo2} 100%) ;">
                     <a href="/${item.path}"></a>
                     <div class="card-back-title" style="border-color:${itemclo1}">${item.name}</div>
                     <ul class="card-back-content">${itemcontent}</ul>
                     <a href="/${item.path}" class="card-back-more">更多>></a>
                   </div>`

        result += `</div>`
    })
    result += `</div>`
    return result
})

因为eval不支持emoji，所以如果你的标签中带有emoji，请将他们过滤掉。

1
npm install emoji-regex

可以用这个包正则匹配emoji，他是根据Unicode标准更新的，将js代码更改如下：

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

hexo.extend.helper.register('category_cards', function (type) {
    const emojiRegex = require('emoji-regex');
    const conf = hexo.config.theme_config
    const emojiReg = emojiRegex(); //过滤匹配emoji
    let result = `<div class="category-cards">`
    //遍历所有标签/目录
    hexo.locals.get(type).map(function (item) {
        var itemname = item.name.replace(emojiReg, '')
        var mm = emojiReg.test(item.name);
        //获取变量
        if (eval('conf.' + type) && eval('conf.' + type + '.' + itemname)) {
            var itemdesc = eval('conf.' + type + '.' + itemname + '.desc') ? eval('conf.' + type + '.' + itemname + '.desc') : ''
            var itemimg = eval('conf.' + type + '.' + itemname + '.img') ? eval('conf.' + type + '.' + itemname + '.img') : item.posts.data[0].cover //默认封面
            var itemclo1 = eval('conf.' + type + '.' + itemname + '.color1') ? eval('conf.' + type + '.' + itemname + '.color1') : '#8B00BB' //默认颜色1
            var itemclo2 = eval('conf.' + type + '.' + itemname + '.color2') ? eval('conf.' + type + '.' + itemname + '.color2') : '#030094' //默认颜色2
        }
        else {
            var itemdesc = ''
            var itemimg = item.posts.data[0].cover
            var itemclo1 = '#8B00BB' //默认颜色1
            var itemclo2 = '#030094' //默认颜色2
        }

        result += `<div class="category-card">`

        //卡片正面
        result += `<div class="category-card-front" style="border-color:${itemclo1}">
                     <div class="card-front-img" style="background-image:var(--ichika-categorycard-bg),url('${itemimg}')"></div>
                     <div class="card-front-title" style="border-color:${itemclo1}">${item.name}</div>
                     <div class="card-front-desc">${itemdesc}</div>
                     <div class="card-front-amount">${item.length}篇文章</div>
                   </div>`


        //卡片背面
        let itemcontent = ''
        for (i = 1; i < 4 && i < item.posts.length + 1; i++) {
            let post = item.posts.data[item.posts.length - i]
            
            itemcontent += `<li><a href='/${post.path}'>${post.title}</a></li>`
        }
        result += `<div class="category-card-back" style="border-color:${itemclo1};background: linear-gradient(to top left, ${itemclo1} 0%, ${itemclo2} 100%) ;">
                     <a href="/${item.path}"></a>
                     <div class="card-back-title" style="border-color:${itemclo1}">${item.name}</div>
                     <ul class="card-back-content">${itemcontent}</ul>
                     <a href="/${item.path}" class="card-back-more">更多>></a>
                   </div>`

        result += `</div>`
    })
    result += `</div>`
    return result
})
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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
/* 分类、标签索引页 */
.category-cards{
    display:flex;
    padding:20px;
    flex-wrap:wrap;
}

.category-card{
    margin:0.5rem;
    width:calc(25% - 1rem);
    position:relative;
    height:300px;
    border-radius:20px;
    padding:0;
}

.category-card-front, .category-card-back {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    -ms-backface-visibility: hidden; 
    transition: 0.5s;
    padding: 15px 20px;
    border-radius: 20px;
    border: 2px solid #8B00BB;
}

.category-card-back {
    background: linear-gradient(to top left, #8B00BB 0%, #030094 100%) ;
    transform: rotateY(-180deg);
    transition: 0.5s;
}

.card-front-img{
    width:100%;
    height:90%;
    position:absolute;
    object-fit:cover;
    opacity:0.5;
    border-radius:20px;
    z-index:-1;
    bottom:0;
    left:0;
    background-size:cover;
}

.card-front-title, .card-back-title {
    font-size: 1.5rem;
    font-weight: bold;
    width: 80%;
    border-bottom: 4px solid #8B00BB;
}

.card-front-amount {
    background: var(--ichika-card-bg);
    border-radius: 10px;
    width: max-content;
    padding: 0 10px;
    float: right;
    position: absolute;
    bottom: 25px;
    right: 15px;
}

.card-front-desc {
    margin-top:15px;
    font-size: 16px;
}

.category-card-back > a:not(.card-back-more){
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:-1;
}

.card-back-title{
    border-bottom:none;
    color:var(--ichika-font-white);
}

.card-back-content{
    padding:5px;
    margin:0;
}

.card-back-content li{
    list-style:none;
    margin:2px 5px; 
    margin:8px 0;
}

.card-back-content a{
    color: var(--ichika-font-white) ;
    border-bottom:2px solid var(--ichika-font-white);
    transition:.3s;
    padding:5px 3px 3px 3px;
}

.card-back-content a:hover{
    background:var(--ichika-font-white);
    color:var(--font-color);
    border-radius:8px;
}

.card-back-more{
    position:absolute;
    right:25px;
    bottom:25px;
    color:var(--ichika-font-white)!important;
}

.card-back-more::after{
    content: '';
    position: relative;
    width: 0;
    bottom: 3px;
    left:-5px;
    display: block;
    height: 3px;
    border-radius: 3px;
    background-color: #fff;
    transition:0.3s;
}

.card-back-more:hover::after{
    width:130%;
}

.category-card:hover .category-card-front{
    transform:rotateY(-180deg);
}

.category-card:hover .category-card-back {
    transform: rotateY(0deg);
}

@media screen and (max-width:768px) {
    .category-card {
        width: 100%;
    }
}

/layout/includes/page/categories.pug:

1
!= category_cards("categories")

标签索引页同理，理论可以挂在任何页面，但是要自己适配样式。

首页文章卡片

预览

QQ截图20221104135523

教程参考：

站外链接
教程：butterfly 主题文章双栏布局插件
站外链接
Butterfly文章卡片加上最新文章标志

教程内容包括插件我都融合在本地了，无需额外修改。

代码

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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
/* 主页双栏 */
#recent-posts {
    margin-top: -1rem;
    align-content: flex-start;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

    #recent-posts > .recent-post-item {
        margin-top: 1rem;
        display: inline-block;
        height: auto;
        width: 49%
    }

        #recent-posts > .recent-post-item .post_cover {
            width: 100%;
            height: 200px
        }

            #recent-posts > .recent-post-item .post_cover img.post_bg {
                width: 100%;
                height: 100%
            }

        #recent-posts > .recent-post-item > .recent-post-info > .content {
            display: none
        }

    #recent-posts > .recent-post-item {
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column
    }

        #recent-posts > .recent-post-item .left_radius {
            border-radius: 8px 8px 0 0
        }

        #recent-posts > .recent-post-item .right_radius {
            border-radius: 8px 8px 0 0
        }

.recent-post-item {
    height: auto !important
}

.recent-post-info {
    padding: 0 40px;
    margin-top: 1em;
    width: 100% !important
}

#recent-posts > .recent-post-item > .recent-post-info > .article-title {
    -webkit-line-clamp: 1;
    margin-top: .3rem;
    margin-bottom: .3rem;
    color: var(--text-highlight-color);
    font-size: 1.2em;
    line-height: 1.4
}

#recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap {
    margin-bottom: 1rem
}

@media screen and (max-width:768px) {
    #recent-posts > .recent-post-item {
        width: 100%
    }
}

#recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap > .tags:before {
    content: "\\A";
    white-space: pre;
}

#recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap > .tags > .article-meta__separator {
    display: none;
}

/* 首页文章 */
/* 最新文章图标 */
.newPost {
    position: absolute;
    bottom: 20px;
    right:10px;
    color: orange;
    padding: 0 15px;
}

.recent-post-item, .card-widget, #post, #bbTimeList, #page {
    border-radius: 6px;
    outline: 2px solid var(--dark-grey);
    transition: .3s;
}

.recent-post-item:hover,.card-widget:hover,.menus_item_child:hover,#post:hover,#bbTimeList:hover,#page:hover{
    outline:2px solid var(--ichika-color);
    transition:.3s;
}

.recent-post-item{
    position:relative;
}

    .recent-post-item div, .recent-post-item a{
        color: black !important;
    }

.post_cover{
    position:relative;
    height:250px!important;
}

.post-category,.post-tag{
    position:absolute;
    top:10px;
    padding:0 8px;
    background:rgba(100,100,100,0.8);
    border-radius:10px;
    transition:0.2s;
}

.post-category a,.post-tag a{
    color:white!important;
}

.post-category{
    left:10px;
}

.post-tag{
    right:10px;
}

.post-category:hover {
    background: var(--ichika-color);
    box-shadow: 0 0 8px var(--ichika-color);
    transition: 0.2s;
}

.post-tag:hover {
    background: var(--ichika-hover-color);
    box-shadow: 0 0 8px var(--ichika-hover-color);
    transition: 0.2s;
}

.post-category a{
    color:white;
}

.recent-post-info{
    position:absolute;
    bottom:0;
    height:70px;
    background:rgba(255,255,255,0.7);
    transition:0.3s;
}

@media screen and (max-width:768px){
    .recent-post-info{
        padding:0 20px!important;
    }
}

.recent-post-info >.article-title{
    margin:10px 0!important;
    font-weight:bold;
}

.recent-post-info >.article-meta-wrap{
    margin:0!important;
    color:rgb(100,100,100)!important;
}

.post-info-hover > .article-meta-wrap {
    position:absolute;
    bottom:10px;
    color: rgb(50,50,50)!important;
}

.post-info-hover{
    opacity:0;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:10;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:0 35px;
    background:rgba(255,255,255,0.4);
    transition:0.3s;
}

.recent-post-item:hover .post-info-hover{
    opacity:1;
    transition:0.3s;
}

.recent-post-item:hover .post_cover {
    filter: blur(2px);
    transition: 0.3s;
}

.recent-post-item:hover .recent-post-info {
    opacity: 0;
    transition: 0.3s;
}

.post-info-hover > a{
    font-size:20px;
    font-weight:bold;
    color:black;
    text-align:center;
}

.post-article-a{
    width:100%;
    height:100%;
    position:absolute;
}

#pagination{
    border-radius:12px;
}

#pagination img{
    filter:blur(4px);
    transition:.3s;
}

#pagination div:hover img{
    filter:blur(0px);
    transition:.3s;
}

.relatedPosts-list > div {
    border-radius: 12px;
    height:150px!important;
}

.reward-button {
    border-radius: 15px;
    background: var(--ichika-color);
    box-shadow: 0 0 2px var(--ichika-color);
    transition:0.3s;
}

.reward-button:hover{
    box-shadow: 0 0 5px #800080;
    transition:0.3s;
}

/layout/includes/mixins/post-ui.pug（忘记改了哪几段了，就全复制过来了QAQ）:

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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
mixin postUI(posts)
  each article , index in page.posts.data
    .recent-post-item
      -
        let link = article.link || article.path
        let title = article.title || _p('no_title')
        const position = theme.cover.position
        let leftOrRight = position === 'both'
          ? index%2 == 0 ? 'left' : 'right'
          : position === 'left' ? 'left' : 'right'
        let post_cover = article.cover
        let no_cover = article.cover === false || !theme.cover.index_enable ? 'no-cover' : ''
      -
      .post-info-hover(title=title)
        a.post-article-a(href=url_for(link) title=title)
        .post-category
          each item, index in article.categories.data
            a(href=url_for(item.path)).article-meta__categories #[=item.name]
            if (index < article.categories.data.length - 1)
              i.fas.fa-angle-right.article-meta-link
        .post-tag
          each item, index in article.tags.data
            a(href=url_for(item.path)).article-meta__tags #[=item.name]
            if (index < article.tags.data.length - 1)
              span.article-meta-link #[=' ']
        a.article-title(href=url_for(link) title=title)= title
                //- Display the article introduction on homepage
        case theme.index_post_content.method
          when false
            - break
          when 1
            .content!= article.description
          when 2
            if article.description
              .content!= article.description
            else
              - const content = strip_html(article.content)
              - let expert = content.substring(0, theme.index_post_content.length) 
              - content.length > theme.index_post_content.length ? expert += ' ...' : ''
              .content!= expert
          default
            - const content = strip_html(article.content)
            - let expert = content.substring(0, theme.index_post_content.length) 
            - content.length > theme.index_post_content.length ? expert += ' ...' : ''
            .content!= expert
        .article-meta-wrap
          if (is_home() && (article.top || article.sticky > 0))
            span.article-meta
              i.fas.fa-thumbtack.sticky
              span.sticky= _p('sticky')
              span.article-meta-separator |
          if (theme.post_meta.page.date_type)
            span.post-meta-date
              if (theme.post_meta.page.date_type === 'both')
                i.far.fa-calendar-alt
                span.article-meta-label=_p('post.created')
                time.post-meta-date-created(datetime=date_xml(article.date) title=_p('post.created') + ' ' + full_date(article.date))=date(article.date, config.date_format)
                span.article-meta-separator |
                i.fas.fa-history
                span.article-meta-label=_p('post.updated')
                time.post-meta-date-updated(datetime=date_xml(article.updated) title=_p('post.updated') + ' ' + full_date(article.updated))=date(article.updated, config.date_format)
              else
                - let data_type_updated = theme.post_meta.page.date_type === 'updated'
                - let date_type = data_type_updated ? 'updated' : 'date'
                - let date_icon = data_type_updated ? 'fas fa-history' :'far fa-calendar-alt'
                - let date_title = data_type_updated ? _p('post.updated') : _p('post.created')
                i(class=date_icon)
                span.article-meta-label=date_title
                time(datetime=date_xml(article[date_type]) title=date_title + ' ' + full_date(article[date_type]))=date(article[date_type], config.date_format)
          
          mixin countBlockInIndex
            - needLoadCountJs = true
            span.article-meta
              span.article-meta-separator |
              i.fas.fa-comments
              if block
                block
              span.article-meta-label= ' ' + _p('card_post_count')
          
          if theme.comments.card_post_count
            case theme.comments.use[0]
              when 'Disqus'
                +countBlockInIndex
                  a(href=full_url_for(link) + '#disqus_thread')
                    i.fa-solid.fa-spinner.fa-spin
              when 'Disqusjs'
                +countBlockInIndex
                  a(href=full_url_for(link) + '#disqusjs')
                    span.disqus-comment-count(data-disqus-url=full_url_for(link))
                      i.fa-solid.fa-spinner.fa-spin
              when 'Valine'
                +countBlockInIndex
                  a(href=url_for(link) + '#post-comment')
                    span.valine-comment-count(data-xid=url_for(link))
                      i.fa-solid.fa-spinner.fa-spin
              when 'Waline'
                +countBlockInIndex
                  a(href=url_for(link) + '#post-comment')
                    span.waline-comment-count(id=url_for(link))
                      i.fa-solid.fa-spinner.fa-spin
              when 'Twikoo'
                +countBlockInIndex
                  a.twikoo-count(href=url_for(link) + '#post-comment')
                    i.fa-solid.fa-spinner.fa-spin
              when 'Facebook Comments'
                +countBlockInIndex
                  a(href=url_for(link) + '#post-comment')
                    span.fb-comments-count(data-href=urlNoIndex(article.permalink))
              when 'Remark42'
                +countBlockInIndex
                  a(href=url_for(link) + '#post-comment')
                    span.remark42__counter(data-url=urlNoIndex(article.permalink))
                      i.fa-solid.fa-spinner.fa-spin
              when 'Artalk'
                +countBlockInIndex
                  a(href=url_for(link) + '#post-comment')
                    span.artalk-count(data-page-key=url_for(link))
                      i.fa-solid.fa-spinner.fa-spin


      if post_cover && theme.cover.index_enable
        .post_cover(class=leftOrRight)
          a(href=url_for(link) title=title)
            img.post_bg(src=url_for(post_cover) onerror=`this.onerror=null;this.src='`+ url_for(theme.error_img.post_page) + `'` alt=title)
      .recent-post-info(class=no_cover)
        if (numberone !== 1 && is_current('/') && (!article.top || (article.new && article.top)))
          span.newPost 最新文章
          - var numberone = 1
        a.article-title(href=url_for(link) title=title)= title
        .article-meta-wrap
          if (is_home() && (article.top || article.sticky > 0))
            span.article-meta
              i.fas.fa-thumbtack.sticky
              span.sticky= _p('sticky')
              span.article-meta-separator |
          if (theme.post_meta.page.date_type)
            span.post-meta-date
              if (theme.post_meta.page.date_type === 'both')
                i.far.fa-calendar-alt
                span.article-meta-label=_p('post.created')
                time.post-meta-date-created(datetime=date_xml(article.date) title=_p('post.created') + ' ' + full_date(article.date))=date(article.date, config.date_format)
                span.article-meta-separator |
                i.fas.fa-history
                span.article-meta-label=_p('post.updated')
                time.post-meta-date-updated(datetime=date_xml(article.updated) title=_p('post.updated') + ' ' + full_date(article.updated))=date(article.updated, config.date_format)
              else
                - let data_type_updated = theme.post_meta.page.date_type === 'updated'
                - let date_type = data_type_updated ? 'updated' : 'date'
                - let date_icon = data_type_updated ? 'fas fa-history' :'far fa-calendar-alt'
                - let date_title = data_type_updated ? _p('post.updated') : _p('post.created')
                i(class=date_icon)
                span.article-meta-label=date_title
                time(datetime=date_xml(article[date_type]) title=date_title + ' ' + full_date(article[date_type]))=date(article[date_type], config.date_format)

    if theme.ad && theme.ad.index
      if (index + 1) % 3 == 0
        .recent-post-item.ads-wrap!=theme.ad.index

页脚

预览

页脚

教程参考：

站外链接
猹的魔改日记-小小的重写个页脚

代码

/layout/includes/footer.pug，信息请改成自己的:

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
#footer-wrap
  #footer-left
    .footer-title
      span= config.title + '|'
      if theme.footer.owner.enable
        - var now = new Date()
        - var nowYear = now.getFullYear()
      if theme.footer.owner.since && theme.footer.owner.since != nowYear
        span.footer-copyright!= `&copy;${theme.footer.owner.since} - ${nowYear} By ${config.author}`
      else
        span.footer-copyright!= `&copy;${nowYear} By ${config.author}`
    .footer-button
      a(title='GitHub' href='https://github.com/ichika99')
        i.fab.fa-github
      a(title='微博' href='https://weibo.com/u/5470086332')
        i.fab.fa-weibo
      a(title='bilibili' href='https://space.bilibili.com/18247019?spm_id_from=333.1007.0.0')
        i.fab.fa-bilibili
      a(title='twitterb' href='https://twitter.com/Receiver99xkk?t=UoMBRIY0a-csS_gUb9aIRg&s=09')
        i.fab.fa-twitter
      a(title='QQ' href='https://qm.qq.com/cgi-bin/qm/qr?k=xb453AHuxlK_XjrxV0A5rkz2x23N3_Vk&noverify=0')
        i.iconfont.icon-qq
    .wordcount
    - let allword = totalcount(site)
    span= 'いちか已经写了 ' + allword + ' 字，'
    if isNaN(allword)
      - allword= Number(allword.replace('k', ''))
      if allword< 50
        span= "还在努力更新中.. 加油！加油啦！"
      else if allword< 70
        span= "好像写完一本 埃克苏佩里 的 《小王子》 了啊"
      else if allword< 90
        span= "好像写完一本 鲁迅 的 《呐喊》 了啊"
      else if allword< 100
        span= "好像写完一本 林海音 的 《城南旧事》 了啊"
      else if allword< 110
        span= "好像写完一本 马克·吐温 的 《王子与乞丐》了！ 了啊"
      else if allword< 120
        span= "好像写完一本 鲁迅 的 《彷徨》 了啊"
      else if allword< 130
        span= "好像写完一本 余华 的 《活着》 了啊"
      else if allword< 140
        span= "好像写完一本 曹禺 的 《雷雨》 了啊"
      else if allword< 150
        span= "好像写完一本 史铁生 的 《宿命的写作》 了啊"
      else if allword< 160
        span= "好像写完一本 伯内特 的 《秘密花园》 了啊"
      else if allword< 170
        span= "好像写完一本 曹禺 的 《日出》 了啊"
      else if allword< 180
        span= "好像写完一本 马克·吐温 的 《汤姆·索亚历险记》 了啊"
      else if allword< 190
        span= "好像写完一本 沈从文 的 《边城》 了啊"
      else if allword< 200
        span= "好像写完一本 亚米契斯 的 《爱的教育》 了啊"
      else if allword< 210
        span= "好像写完一本 巴金 的 《寒夜》 了啊"
      else if allword< 220
        span= "好像写完一本 东野圭吾 的 《解忧杂货店》 了啊"
      else if allword< 230
        span= "好像写完一本 莫泊桑 的 《一生》 了啊"
      else if allword< 250
        span= "好像写完一本 简·奥斯汀 的 《傲慢与偏见》 了啊"
      else if allword< 280
        span= "好像写完一本 钱钟书 的 《围城》 了啊"
      else if allword< 300
        span= "好像写完一本 张炜 的 《古船》 了啊"
      else if allword< 310
        span= "好像写完一本 茅盾 的 《子夜》 了啊"
      else if allword< 320
        span= "好像写完一本 阿来 的 《尘埃落定》 了啊"
      else if allword< 340
        span= "好像写完一本 艾米莉·勃朗特 的 《呼啸山庄》 了啊"
      else if allword< 350
        span= "好像写完一本 雨果 的 《巴黎圣母院》 了啊"
      else if allword< 360
        span= "好像写完一本 东野圭吾 的 《白夜行》 了啊"
      else
        span= "好像写完一本我国著名的 四大名著 了！！！"
    else
      span= "还在努力更新中.. 加油！加油啦！"
  #footer-right
    .footer-totop
      i.fas.fa-chevron-up(onclick='scrollToTop()')
    .footer-info
      p= '使用Hexo框架 | 基于butterfly修改'
      a(title='苏公网安备 32050802011619号' href='http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=32050802011619') #[img(src='/img/Page/备案图标.png' alt='备案图标' style='height: 16px;margin-right: 3px;filter: grayscale(1);')]苏公网安备 32050802011619号
      a(title='苏ICP备2022040728号' href='https://beian.miit.gov.cn/')= '苏ICP备2022040728号'
      a(title='萌ICP备20223993号' href='https://icp.gov.moe/?keyword=20223993')= '萌ICP备20223993号'
    .footer-service
      a(title='腾讯云' href='https://cloud.tencent.com')
        img(alt='腾讯云' src='https://cdn.ichika.cc/typora/202211071552681.png!towebp')
      a(title='51LA' href='https://www.51.la')
        img(alt='51LA' src='https://cdn.ichika.cc/typora/202211071552427.png!towebp')
      a(title='CC BY-NC-SA 4.0' href='https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh')
        img(alt='CC BY-NC-SA 4.0' src='https://cdn.ichika.cc/typora/202211071552856.png!towebp')

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
132
133
134
135
136
137
138
139
140
141
142
143
144
/* 页脚 */
.footer_custom_text a{
    margin:0 5px;
}

#footer::before{
    content:none;
}

#footer-wrap{
    color:var(--font-color);
    padding:50px 5% 35px 5%;
    display:flex;
    flex-wrap:wrap;
    background:var(--ichika-footer-bg);
    position:relative;
}

#footer-wrap > div{
    width:50%;
}

#footer-left{
    text-align:left
}

.footer-title{
    font-size:1.5rem;
    font-weight:bold;
}

.footer-copyright{
    font-size:1rem;
    font-weight:normal;
}

#footer-wrap .footer-button {
    display: flex;
    margin: 15px 0;
}

#footer-wrap .footer-button > a {
    font-size: 1.3rem;
    margin-right:24px;
    transition: 0.2s;
    background: black;
    width: 40px;
    height: 40px;
    display: flex;
    border-radius: 50%;
    color: white;
}

#footer-wrap .footer-button > a:hover{
    background:var(--ichika-color);
    transition:0.2s;
}

#footer-wrap .footer-button > a i{
    margin:auto;
    line-height:42px;
}

#footer-wrap .iconfont{
    font-size:1.3rem;
}

#footer-right {
    text-align: right;
    height: max-content;
    margin-top: auto;
}

#footer-right p,#footer-right a{
    color:var(--ichika-font-grey);
}

.footer-totop {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.footer-totop i {
    font-size: 2rem;
    animation: footerToTop 1.2s linear infinite;
}

.footer-info p{
    font-size:14px;
    margin:0;
}

.footer-info a{
    margin-left:20px;
    transition:0.2s;
}

.footer-info a:hover{
    color:var(--ichika-color)!important;
    transition:0.2s;
}

.footer-info a:hover img{
    filter: none!important;
    transition:0.2s;
}

.footer-service img{
    height:20px;
    filter:grayscale(1);
    margin-left:20px;
    margin-top:10px;
    transition:0.2s;
}

.footer-service img:hover{
    filter:none;
    transition:0.2s;
}

@keyframes footerToTop{
    0%{
        transform:translateY(0);
    }
    60% {
        transform: translateY(-25%);
    }
    100% {
        transform: translateY(0);
    }
}

@media screen and (max-width:768px) {
    #footer-wrap > div {
        width: 100%;
        text-align:center;
    }

    #footer-wrap .footer-button > a{
        margin:0 auto;
    }
}

js:

1
2
3
function scrollToTop() {
    btf.scrollToDest(0, 500);
}