📖 本教程更新于 2023 年 06 月 12 日

📚 文档目录

🚀 搭建教程 | 1 - 📑 前置教程 | 2 - 🎈 主题调整 | 3 - ✨ 魔改教程 | 4 - 🐈 重构自用数据记录

主题调整美化

本篇教程基于 Hexo 6.3.0 & Butterfly 4.8.5

⚠️ 友情提示

本节内容大部分需要在自建CSS文件内操作，如是新手小白，请先移步至 📑 第二章 | 前置教程

宽屏适配

  • 在自建的CSS文件 [blogRoot]/source/css/icat.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
.layout{
    width: 100%;
    max-width:1400px;
}
/* 重新定义宽度 */

.layout > div:first-child {
    width: 100%;
}
#post {
    width: 78%;
}
.aside-content {
    max-width: 312px;
    min-width: 300px;
}
.layout.hide-aside {
    max-width: 1400px;
}
/* 定义是否侧边栏的宽度 */

#recent-posts > .recent-post-item {
    height: 19em;
    border: var(--style-border);
}
#recent-posts > .recent-post-item >.recent-post-info {
    padding: 0 56px;
    width: 64%;
}
@media screen and (max-width: 768px) {
    #recent-posts > .recent-post-item {
        height: auto;
    }
    #recent-posts > .recent-post-item >.recent-post-info {
        padding: 20px 20px 30px;
        width: 100%;
        text-align: center;
    }
}
/* 主页文章列表图片宽度 */

页脚透明

  • 在自建的CSS文件 [blogRoot]/source/css/icat.css 里新增以下内容
1
2
3
4
5
6
7
8
9
10
11
12
13
#footer {
    background: var(--icat-footer-background);
}
  
#footer #footer-wrap {
    color: var(--font-color)
}
  
#footer #footer-wrap a {
    color: var(--font-color)
}
  
/* 页脚透明 */

文章外挂标签美化

Butterfly的调整教程：文章外挂标签美化
感觉Butterfly的外挂标签有点不太符合自己的审美，强迫症犯了，按照自己的感觉改改

祭奠日自动变灰

  • 在自建的JS文件 [blogRoot]/source/js/icat.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
if(PublicSacrificeDay()){
    document.getElementsByTagName("html")[0].setAttribute("style","filter:gray !important;filter:grayscale(100%);-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);");
  }
  
  function PublicSacrificeDay(){
      var PSFarr=new Array("0707","0909","0918","1109","1213");
      var currentdate = new Date();
      var str = "";
      var mm = currentdate.getMonth()+1;
      if(currentdate.getMonth()>9){
        str += mm;
      }else{
        str += "0" + mm;
      }
      if(currentdate.getDate()>9){
        str += currentdate.getDate();
      }else{
        str += "0" + currentdate.getDate();
      }
      if(PSFarr.indexOf(str)>-1){
          return 1;
      }else{
          return 0;
      }
  }

// 自动网站变灰
// 0707 - 七七事变
// 0909 - 毛主席忌辰
// 0918 - 九一八事变
// 1109 - 娣外公忌辰
// 1213 - 南京公祭日

个人卡片背景

  • 在自建的CSS文件 [blogRoot]/source/css/icat.css 里新增以下内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
[data-theme="light"] #aside-content > .card-widget.card-info {
    background-image: url(https://s1.ax1x.com/2023/05/02/p9GWEin.jpg);
    background-repeat: no-repeat;
    background-attachment: inherit;
    background-size: 100%;
}
[data-theme="dark"] #aside-content > .card-widget.card-info {
    background-image: url(https://s1.ax1x.com/2023/05/02/p9GWVGq.jpg);
    background-repeat: no-repeat;
    background-attachment: inherit;
    background-size: 100%;
}

/* 个人信息卡片背景图 */

标签增加上下标

  • 修改 [blogRoot]/themes/butterfly/scripts/helpers/page.js 里第四十九行的内容
    （上标：${tag.length} 或 下标：${tag.length}； + 号直接删除 即是正常缩进）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    ···

  const length = sizes.length - 1
  source.sort(orderby, order).forEach(tag => {
    const ratio = length ? sizes.indexOf(tag.length) / length : 0
    const size = minfontsize + ((maxfontsize - minfontsize) * ratio)
    let style = `font-size: ${parseFloat(size.toFixed(2))}${unit};`
    const color = 'rgb(' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ')' // 0,0,0 -> 200,200,200
    style += ` color: ${color}`
-   result += `<a href="${env.url_for(tag.path)}" style="${style}">${tag.name}</a>`
+    result += `<a href="${env.url_for(tag.path)}" style="${style}">${tag.name}<sup>${tag.length}</sup></a>`
  })
  return result
})

    ···

分享平台获取图片参数

很早之前就发现博客文章分享到微信里，图标显示的是 个人头像 而不是 站点图片
本人强迫症，这忍不了，还是喜欢用站点的LOGO来显示

  • 修改 [blogRoot]/themes/butterfly/layout/includes/head/Open_Graph.pug 里第三行的 page.cover 和 theme.favicon 项
    （ + 号直接删除 即是正常缩进）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
if theme.Open_Graph_meta.enable
  -
-   const coverVal = page.cover_type === 'img' ? page.cover : theme.avatar.img
+   const coverVal = page.cover_type === 'img' ? theme.favicon : theme.favicon
    let ogOption = Object.assign({
      type: is_post() ? 'article' : 'website',
      image: coverVal ? full_url_for(coverVal) : '',
      fb_admins: theme.facebook_comments.user_id || '',
      fb_app_id: theme.facebook_comments.app_id || '',
    }, theme.Open_Graph_meta.option)
  -
  != open_graph(ogOption)
else
  meta(name="description" content=page_description())

⚠️ 友情提示

因本站的文章封面用的是Webp格式，所以在一些平台截取的图片是不支持Webp的，会显示空白，所以我才将 page.cover 修改 theme.favicon
如若你的文章封面不是Webp就不需要修改page.cover

随机网页跳转（Heo无缝版）

  • 创建 [blogRoot]/themes/butterfly/scripts/helpers/random.js JS文件，将以下内容写入
1
2
3
4
5
6
7
8
9
10
11
hexo.extend.generator.register('random', function (locals) {
    const config = hexo.config.random || {}
    const posts = []
    for (const post of locals.posts.data) {
        if (post.random !== false) posts.push(post.path)
    }
    return {
        path: config.path || 'icat/random.js',
        data: `var posts=${JSON.stringify(posts)};function toRandomPost(){pjax.loadUrl('/'+posts[Math.floor(Math.random() * posts.length)]);};`
    }
})
若没有开启 pjax 用这个js
1
2
3
4
5
6
7
8
9
10
11
hexo.extend.generator.register('random', function (locals) {
    const config = hexo.config.random || {}
    const posts = []
    for (const post of locals.posts.data) {
        if (post.random !== false) posts.push(post.path)
    }
    return {
        path: config.path || 'icat/random.js',
        data: `var posts=${JSON.stringify(posts)};function toRandomPost(){window.open('/'+posts[Math.floor(Math.random() * posts.length)],"_self");};`
    }
})
  • 在 _config.butterfly.yml 中的 inject 下的 bottom 引入 random.js
1
2
3
4
5
inject:
  head:
    - ···
  bottom:
    - <script src="/icat/random.js"></script> # 随机网页跳转

侧边栏分类栏调整

  • 在自建的CSS文件 [blogRoot]/source/css/icat.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
#aside-content .card-archives ul.card-archive-list, #aside-content .card-categories ul.card-category-list {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -o-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -o-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-pack: justify;
}
#aside-content .card-archives ul.card-archive-list > .card-archive-list-item, #aside-content .card-categories ul.card-category-list > .card-category-list-item {
    width: 48%;
    margin: 3px 0;
}
#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a, #aside-content .card-categories ul.card-category-list > .card-category-list-item a {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    padding: 3px 10px;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -o-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    color: var(--font-color);
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    -ms-transition: all 0.4s;
    transition: all 0.4s;
    border: 1px solid #cbcbcb;
    border-radius: 6px;
    -webkit-box-orient: vertical;
}

/* 侧边栏分类（标签）样式调整 */

侧边栏分类

  • 修改 [blogRoot]/themes/butterfly/scripts/helpers/aside_categories.js 里第五十八行的内容
    （**+** 号直接删除 即是正常缩进）
1
2
3
4
5
6
7
8
9
10
11
12
    ···

          if (showCount) {
-           result += `<span class="card-category-list-count">${cat.length}</span>`
+            result += `<span class="card-category-list-count">${cat.length} 篇</span>`
          }

          if (isExpand && isTopParent && child) {
            result += `<i class="fas fa-caret-left ${expandClass}"></i>`
          }

    ···

侧边栏归档

  • 修改 [blogRoot]/themes/butterfly/scripts/helpers/aside_archives.js 里第九十二行的内容
    （**+** 号直接删除 即是正常缩进）
1
2
3
4
5
6
7
8
9
10
11
    ···

    if (showCount) {
-     result += `<span class="card-archive-list-count">${item.count}</span>`
+      result += `<span class="card-archive-list-count">${item.count} 篇</span>`
    }
    result += '</a>'
    result += '</li>'
  }

    ···

网站资讯调整

不太喜欢显示最后更新的时间，主题作者也没做开关配置，直接在PUG里删除就好

  • 删除 [blogRoot]/themes/butterfly/layout/includes/widget/card_webinfo.pug 里第二十七 至 三十四行的内容
1
2
3
4
5
6
7
8
9
10
    ···

          .item-name= _p('aside.card_webinfo.site_pv_name') + " :"
          .item-count#busuanzi_value_site_pv
            i.fa-solid.fa-spinner.fa-spin
-      if theme.aside.card_webinfo.last_push_date
-        .webinfo-item
-          .item-name= _p('aside.card_webinfo.last_push_date.name') + " :"
-          .item-count#last-push-date(data-lastPushDate=date_xml(Date.now()))
-            i.fa-solid.fa-spinner.fa-spin

资讯-文章数目

这个和作者卡片上的重复了，删掉简洁些

  • 删除 [blogRoot]/themes/butterfly/layout/includes/widget/card_webinfo.pug 里第七 至 十行的内容
1
2
3
4
5
6
7
8
9
10
11
12
    ···

      span= _p('aside.card_webinfo.headline')
    .webinfo
-      if theme.aside.card_webinfo.post_count
-        .webinfo-item
-          .item-name= _p('aside.card_webinfo.article_name') + " :"
-          .item-count= site.posts.length
      if theme.runtimeshow.enable
        .webinfo-item

    ···

文章页调整

版权样式调整

  • 在自建的CSS文件 [blogRoot]/source/css/icat.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
#post .post-copyright {
    background: var(--icat-card-bg);
    padding: 1rem 1.3rem;
    overflow: hidden;
    border: var(--style-border);
    border-width: 1px;
    transition: 0.3s;
    position: relative;
    margin: 1.5rem 0px 0.5rem;
    border-radius: 8px;
}
#post .post-copyright:before {
    position: absolute;
    right: 22px;
    top: -77px;
    content: "\e039";
    font-size: 180px;
    font-family: "iconfont";
    color: var(--icat-fontcolor);
    opacity: 0.1;
    filter: blur(7px);
}

/* 版权样式调整 */

打赏/标签/分享 调整

  • 修改 [blogRoot]/themes/butterfly/layout/post.pug 里第十一 至 十八行的内容
    （**+** 号直接删除 即是正常缩进）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    ···

    include includes/post/post-copyright.pug
    .tag_share
+      if theme.reward.enable && theme.reward.QR_code
+        !=partial('includes/post/reward', {}, {cache: true})
      if (theme.post_meta.post.tags)
        .post-meta__tag-list
          each item, index in page.tags.data
            a(href=url_for(item.path)).post-meta__tags #[=item.name]
      include includes/third-party/share/index.pug
-
-   if theme.reward.enable && theme.reward.QR_code
-     !=partial('includes/post/reward', {}, {cache: true})

    //- ad
    if theme.ad && theme.ad.post
      .ads-wrap!=theme.ad.post

    ···
  • 新增 [blogRoot]/themes/butterfly/layout/includes/post/reward.pug 页面内容
    （**+** 号直接删除 即是正常缩进）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.post-reward
  .reward-button
    i.fas.fa-qrcode
    = ' ' + _p('donate')
  .reward-main
    ul.reward-all
-     each item in theme.reward.QR_code
-       - var clickTo = item.link ? item.link : item.img
-       li.reward-item
-         a(href=url_for(clickTo) target='_blank')
-           img.post-qr-code-img(src=url_for(item.img) alt=item.text)
-         .post-qr-code-desc=item.text
+      span.reward-title 感谢你赐予我前进的力量
+      ul.reward-group
+        each item in theme.reward.QR_code
+          - var clickTo = item.link ? item.link : item.img
+          li.reward-item
+            a(href=url_for(clickTo) target='_blank')
+              img.post-qr-code-img(src=url_for(item.img) alt=item.text)
+            .post-qr-code-desc=item.text
  • 在自建的CSS文件 [blogRoot]/source/css/icat.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
#post .tag_share {
    display: flex;
    align-items: center;
    position: relative;
    margin-top: 40px
}
#post .post-reward {
    margin-top: 0;
    width: auto;
}
#post .tag_share .post_share {
    position: absolute;
    right: 0;
}

#post .post-reward .reward-button {
    background: var(--icat-red);
    color: var(--icat-white);
    padding: 0;
    width: 126px;
    height: 40px;
    line-height: 39px;
    box-shadow: var(--icat-shadow-red);
    display: inline-block;
    cursor: pointer;
    transition: all 0.4s ease 0s;
    border-radius: 8px;
    margin-right: 0.5rem;
}
#post .post-reward .reward-button:hover {
    background: #49b1f5;
    box-shadow: var(--icat-shadow-blue);
}
#post .post-reward .reward-main {
    z-index: 1003;
    min-width: 100%;
}
#post .post-reward .reward-main {
    width: auto;
}
#post .post-reward .reward-main .reward-all {
    border-radius: 12px;
    background: var(--icat-background);
    border: var(--style-border-always);
    padding: 0.8rem;
    display: flex;
    box-shadow: var(--icat-shadow-border);
    flex-direction: column;
    align-items: center;
}
#post .post-reward .reward-main .reward-all:after {
    right: auto;
    left: 50px;
    border-top: 14px solid var(--icat-background);
}
#post .reward-title {
    font-weight: bold;
    color: var(--icat-red);
}
#post .reward-group {
    display: flex;
    margin-top: 0.5rem;
    margin-left: -40px;
}
/* 打赏样式调整 */

#post .tag_share .post-meta__tags {
    background: var(--icat-card-bg);
    border: var(--style-border-always);
    color: var(--icat-fontcolor);
    border-radius: 8px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    height: 40px;
    margin-right: 0.5rem;
}
@media screen and (max-width: 768px) {
    #post .tag_share {
        display: grid;
        justify-items: start;
        align-items: start;
    }
    #post .tag_share .post-meta__tag-list {
        display: flex;
        width: 100%;
        margin-top: 0.5rem
    }
    #post .tag_share .post-meta__tags {
        height: 34px;
    }
}
a.post-meta__tags::before {
    content: "\e038";
    font-family: "iconfont" !important;
    font-size: 12px;
    opacity: 0.4;
    padding-top: 2px;
    padding-right: 2px;
}
/* 标签调整 */

评论区域

  • 新增 [blogRoot]/themes/butterfly/layout/includes/third-party/comments/index.pug 页面内容
    （**+** 号直接删除 即是正常缩进）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
- let defaultComment = theme.comments.use[0]
hr
#post-comment
  .comment-head
    .comment-headline
      i.iconfont.icat-message.fa-fw
      span= ' ' + _p('comment')
+    .comment-privacy
+      a(href="/privacy/" data-pjax-state) 隐私政策

    if theme.comments.use.length > 1
      #comment-switch

    ···
  • 在自建的CSS文件 [blogRoot]/source/css/icat.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
149
150
#post-comment .comment-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#post-comment .comment-privacy a {
    color: var(--font-color);
}
#post-comment .comment-privacy a:hover {
    color: #409eff;
}
#post-comment .comment-headline {
    display: flex;
    align-items: center;
}
#post-comment .comment-headline > i {
    padding: 0 0 0 6px;
    font-size: 1em;
}
blockquote > :last-child {
    margin: auto !important;
}

.el-input--small .el-input__inner {
    height: 40px !important;
}
.el-input-group__prepend {
    border-radius: 8px 0 0 8px !important;
}
.el-input__inner {
    border-radius: 0 8px 8px 0 !important;
}
.el-textarea__inner {
    border-radius: 8px !important;
}
.el-textarea > textarea {
    height: 120px !important;
}
.el-button--small {
    border-radius: 4px !important;
}
/* 评论编辑块调整 */

.tk-submit-action-icon.__markdown {
    display: none;
}
/* markdown编辑快隐藏 */

.tk-avatar {
    border-radius: 4px !important;
}
.tk-comment .tk-submit .tk-avatar, .tk-replies .tk-avatar {
    height: 2.5rem !important;
    width: 2.5rem !important;
}
.tk-comment .tk-submit .tk-avatar .tk-avatar-img, .tk-replies .tk-avatar .tk-avatar-img {
    height: 2.5rem !important;
}
.tk-ruser {
    color: #409eff;
    opacity: .8;
}
@media screen and (max-width: 768px) {
    .tk-comment .tk-submit .tk-avatar, .tk-replies .tk-avatar {
        height: 2rem !important;
        width: 2rem !important;
    }
    .tk-comment .tk-submit .tk-avatar .tk-avatar-img, .tk-replies .tk-avatar .tk-avatar-img {
        height: 2rem !important;
    }
}
.tk-nick,
.tk-meta a strong {
    font-size: 18px;
    color: #409eff;
}
.tk-tag-green {
    border: var(--style-border) !important;
    border-radius: 4px !important;
    margin-left: 0.2rem;
}
.tk-time {
    margin-left: 0.4rem;
}

.tk-extras {
    padding-bottom: 15px;
    border-bottom: 1px dashed var(--hr-border);
}
.tk-extra {
    border: var(--style-border-always);
    padding: 4px 6px 4px 6px;
    border-radius: 8px;
    margin-right: 4px !important;
}
.tk-expand {
    margin-top: 8px;
    background-color: var(--icat-background);
    color: var(--icat-fontcolor);
    border-radius: 8px;
    border: var(--style-border);
}
.tk-footer {
    padding-bottom: 1em;
}
.tk-footer a {
    color: #999999;
}
.tk-footer a:hover {
    color: #409eff;
}

.tk-admin-comment-item {
    padding: 1em;
    background: var(--global-bg);
    border-radius: 12px;
    border: var(--style-border-always);
    margin-bottom: 12px;
}
.tk-admin-comment-meta,
.tk-content {
    color: var(--icat-fontcolor);
}
.tk-admin-actions {
    margin-bottom: 0 !important;
    border-bottom: 0 !important;
}
/* 评论管理 */

.tk-panel {
    border: var(--style-border-always);
}
.tk-admin-config-groups {
    padding: 0.5em;
    background: var(--global-bg);
    border-radius: 12px;
    border: var(--style-border-always);
}
.tk-admin-config-groups .tk-admin-config-group-title {
    background: var(--icat-background) !important;
    border-radius: 6px;
    border: var(--style-border-always);
    color: var(--icat-fontcolor);
}
.tk-admin-config-item {
    color: var(--icat-fontcolor);
}
/* 配置管理 */

/* 评论区样式 */

分类/标签页美化

本小节魔改内容不包括 顶部banner栏，如有需要请移步至 ✨ 第二章 - 三小节 | 魔改页前置

效果预览

文章分类
有肉有猫有生活.
文章标签
有肉有猫有生活.

分类页

  • 创建 [blogRoot]/source/categories/index.md 页面，配置以下内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
---
title: 文章分类
date: 2021-10-26 14:57:42
type: "categories"
top_img: false
aside: false
top_page: true
top_bg: https://s1.ax1x.com/2023/04/20/p9ACZeH.jpg
top_item: Categories
top_title: 文章分类
top_tips: 去听 去看 去感受 每一刻生命
top_link: /charts/
top_text: 更多统计
comments: false
---

<!-- 页面内容 -->
  • 在自建的CSS文件 [blogRoot]/source/css/icat.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
.category-lists .category-list {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: row;
    margin: 5em 0 3em;
}
.category-lists ul {
    padding: 0;
}
.category-lists ul li {
    display: flex;
    width: fit-content;
    font-size: 1.2em !important;
    padding: 0.2em 0.5em;
    background: var(--icat-card-bg);
    margin: 0.5em 0.5em;
    border-radius: 12px;
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    border: var(--style-border-always);
    box-shadow: var(--icat-shadow-border);
    align-items: center;
}
.category-lists .category-list a {
    color: var(--icat-fontcolor) !important;
}
.category-lists .category-list a:hover {
    color: var(--icat-blue) !important;
}
.category-lists ul li:before {
    position: unset;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    background: 0;
    color: var(--icat-fontcolor) !important;
    cursor: pointer;
    content: "\e038" !important;
    font-family: "iconfont" !important;
    opacity: 0.4;
    padding-top: 2px;
    padding-right: 2px;
}
.category-lists .category-list .category-list-count {
    background: var(--icat-secondbg);
    padding: 4px 4px;
    border-radius: 6px;
    color: var(--icat-secondtext);
    line-height: 1;
    text-align: center;
    min-width: 35px;
    display: inline-block;
    font-size: 1rem;
    box-shadow: var(--icat-shadow-border);
}
.category-lists .category-list .category-list-count:before,
.category-lists .category-list .category-list-count:after {
    content: '';
}

/* 分类页样式 */

标签页

  • 创建 [blogRoot]/source/tags/index.md 页面，配置以下内容
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
---
title: 文章标签
date: 2021-10-26 14:43:25
type: "tags"
top_img: false
orderby: random
order: 1
aside: false
top_page: true
top_bg: https://s1.ax1x.com/2023/04/20/p9ACZeH.jpg
top_item: Tags
top_title: 文章标签
top_tips: 山野皆有雾灯 漂泊亦能归舟
top_link: /charts/
top_text: 更多统计
comments: false
---


<!-- 
orderby	【可选】排序方式 ：random-随机/name-名称/length-长度
order	【可选】排序次序： 1, 升序; -1, 降序
 -->

<!-- 页面内容 -->
  • 在自建的CSS文件 [blogRoot]/source/css/icat.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
#page .tag-cloud-list {
    margin: 5em 0 3em;
}
#page .tag-cloud-list a {
    display: inline-flex;
    color: var(--icat-fontcolor) !important;
    font-size: 1.2em !important;
    padding: 0.2em 0.5em;
    background: var(--icat-card-bg);
    margin: 0.5em 0.5em;
    border-radius: 12px;
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    border: var(--style-border-always);
    box-shadow: var(--icat-shadow-border);
    align-items: center;
}
#page .tag-cloud-list a:before {
    color: var(--icat-fontcolor) !important;
    cursor: pointer;
    content: "\e038" !important;
    font-family: "iconfont" !important;
    opacity: 0.4;
    padding-top: 2px;
    padding-right: 2px;
}
#page .tag-cloud-list a:hover {
    background: var(--icat-blue);
}
#page .tag-cloud-list a > sup{
    top: auto;
    background: var(--icat-secondbg);
    padding: 4px 4px;
    margin-left: 8px;
    border-radius: 6px;
    color: var(--icat-secondtext);
    line-height: 1;
    text-align: center;
    min-width: 35px;
    display: inline-block;
    font-size: 1rem;
    box-shadow: var(--icat-shadow-border);
}

/* 标签页样式 */

主页文章卡片擦亮动画

  • 在自建的CSS文件 [blogRoot]/source/css/icat.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
#recent-posts > .recent-post-item .post_cover {
    position: relative;
}
#recent-posts>.recent-post-item .post_cover::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,.5);
    content: '';
    -webkit-transition: -webkit-transform .3s;
    -moz-transition: -moz-transform .3s;
    -o-transition: -o-transform .3s;
    -ms-transition: -ms-transform .3s;
    transition: transform .3s;
    -webkit-transform: scale3d(2,1,1) rotate(60deg) translate3d(15%,-150%,0);
    -moz-transform: scale3d(2,1,1) rotate(60deg) translate3d(15%,-150%,0);
    -o-transform: scale3d(2,1,1) rotate(60deg) translate3d(15%,-150%,0);
    -ms-transform: scale3d(2,1,1) rotate(60deg) translate3d(15%,-150%,0);
    transform: scale3d(2,1,1) rotate(60deg) translate3d(15%,-150%,0);
}
#recent-posts>.recent-post-item .post_cover:hover::after {
    -webkit-transform: scale3d(2,1,1) rotate(60deg) translate3d(0,130%,0);
    -moz-transform: scale3d(2,1,1) rotate(60deg) translate3d(0,130%,0);
    -o-transform: scale3d(2,1,1) rotate(60deg) translate3d(0,130%,0);
    -ms-transform: scale3d(2,1,1) rotate(60deg) translate3d(0,130%,0);
    transform: scale3d(2,1,1) rotate(60deg) translate3d(0,130%,0);
}

/* 文章卡片擦亮动画 */