这里分享一个分类卡片化的教程，让自己的分类更好看。

原教程：ichikaの小窝

分类美化预览

代码

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

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

这里在congfig.butterfly.yml或congfig.anzhiyu.yml下添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
categories:
  priority: 5
  学习笔记:
    desc: 记录我的学习笔记 #卡片描述
    img: http://img.xjh.me/img/61823065_p0.jpg
    color1: "#B7D31E" #卡片正面颜色以及背面渐变色1
    color2: "#42CE1E" #卡片背面渐变色2
  美化记录:
    desc: 记录一些美化过程，但是技术力捉急
    img: /img/Page/categories/123.png
    color1: "#06DE86"
    color2: "#06A5DE"
  小说分享:
    desc: 顾名思义，关于我看的小说
    img: /img/Page/categories/147.png
    color1: "#189BC4"
    color2: "#183DC4"
  其它教程:
    desc: 关于一些无聊的教程
    img: http://img.xjh.me/img/58239777_p0.jpg
    color1: "#C018C4"
    color2: "#C41818"

后面我们在/scripts/helpers/下创建category_cards.js

这里使用的javascript是支持emo-ji表情的，如果有需要的可以使用以下方式，如果你需要，用第二个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(--icemyst-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
})

这里提示Cannot find module 'emoji-regex'，这里是因为配了emo-ji表情支持，这里我们需要安装插件

1
npm install emoji-regex

当然这里也可以进行过滤emo-ji表情，这里我们使用以下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(--icemyst-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
})

自定义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
145
146
147
148
/* 分类、标签索引页 */
.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(--icemyst-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(--icemyst-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(--icemyst-font-white) ;
  border-bottom:2px solid var(--icemyst-font-white);
  transition:.3s;
  padding:5px 3px 3px 3px;
}

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

.card-back-more{
  position:absolute;
  right:25px;
  bottom:25px;
  color:var(--icemyst-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")

到这里修改完毕，hexo三连看效果