更新日志

2026

05-18

重构归档页样式：年份标题改为卡片式渐变背景；文章卡片边框改为细线条风格；hover 效果从变色改为边框高亮+阴影；分类/标签文字前添加 # 前缀并支持独立点击跳转；新增年份折叠功能（旧年份默认折叠，显示文章预览）；禁用归档页和分类页分页，展示全部文章；暗色模式 hover 阴影适配

前言

美化之前

美化的时候需要修改网站的源文件、添加样式、js之类的，需要一点基础，可以参考

🔗 站外链接，请注意甄别
Hexo博客添加自定义css和js文件
Leonus
千万别忘了

在添加完js、css后，一定要记得在_config.butterfly.yml的inject里引用

🏠 站内链接，放心访问
Butterfly自用全局变量
June's Blog

1. 归档页面

效果

🏠 站内链接，放心访问
全部文章
June's Blog

参考链接

🔗 站外链接，请注意甄别
本站的一些样式魔改
ichikaの小窝

1. 添加归档页样式

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
/* 归档页样式 */
.layout.hide-aside {
    max-width: var(--layout-width);
}

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

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

.article-sort .year {
    width: calc(100% - 0.8rem) !important;
    border-bottom: none;
    font-size: 22px;
    font-weight: bold;
    margin: 15px 0.4rem 12px;
    padding: 14px 20px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--june-card-bg) 0%, var(--june-secondbg) 100%);
    border: 1px solid var(--june-gray);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

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

.article-sort-item:not(.year) {
    padding: 8px 10px;
    width: calc(50% - 0.8rem);
    margin: 0.4rem;
    border: 1px solid var(--june-gray);
    border-radius: 15px;
    background: var(--june-card-bg);
    transition: var(--transition-time);
    height: 120px;
    overflow: hidden;
    position: relative;
}

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

.article-sort-item-categories a, .article-sort-item-tags a {
    pointer-events: auto;
    position: relative;
    z-index: 2;
    color: var(--font-color);
}

.article-sort-item-categories a:hover, .article-sort-item-tags a:hover {
    color: var(--june) !important;
}

.article-sort-item-img {
    transition: var(--transition-time);
    height: 90px;
    width: 140px;
}

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

.article-sort-item-title {
    font-size: 18px;
    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;
    z-index: 1;
    display: flex;
    align-items: center;
}

.article-sort-meta > .article-meta-wrap {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.article-sort-meta > .article-sort-item-time {
    flex-shrink: 0;
    white-space: nowrap;
    margin-left: 8px;
}

.article-sort-item-categories, .article-sort-item-tags {
    margin: 0 3px;
    padding: 2px 4px;
    border-radius: 0;
    border: none;
    font-size: 12px;
    transition: var(--transition-time);
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    z-index: 1;
}

.article-sort-item-info > div:not(.article-sort-meta) {
    display: flex;
    min-width: 0;
    overflow: hidden;
}

.article-sort-item-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.article-sort-item:hover:not(.year) .article-sort-item-info > div:not(.article-sort-meta) .article-sort-item-title {
    flex-shrink: 0;
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.article-sort-description, .article-sort-item > i {
    width: 0;
    opacity: 0;
    overflow: hidden;
    transition: var(--transition-time);
}

.article-sort-description {
    width: 0;
    height: 59px;
    vertical-align: middle;
    margin: 5px 10px 0 15px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.article-sort-item:hover:not(.year) {
    border-color: var(--june);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

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

.article-sort-item:hover:not(.year) .article-sort-description {
    flex: 1;
    min-width: 0;
    width: auto;
    overflow: hidden;
}

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

.article-sort-item:hover:not(.year) .article-sort-item-title {
    color: var(--font-color) !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: inherit;
}

.article-sort-item:hover:not(.year) .article-sort-item-categories {
    border: none;
}

.article-sort-item:hover:not(.year) .article-sort-item-tags {
    border: none;
}

.article-sort-item:hover:not(.year) .article-sort-item-categories:hover {
    background: none;
    box-shadow: none;
}

.article-sort-item:hover:not(.year) .article-sort-item-tags:hover {
    background: none;
    box-shadow: none;
}

@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;
    }
}

2. 修改article-sort.pug

修改[blogRoot]\themes\butterfly\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
39
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)
      - const descText = article.description ? strip_html(article.description) : ''
      a.article-sort-item-a(href=url_for(article.path) title=descText)
      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)
              each item, index in article.tags.data
                span.article-sort-item-tags
                  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
    - })

3. 年份折叠功能

新增年份折叠 JS，最新年份默认展开，旧年份折叠并显示文章标题预览。

在source/static/js/categoryFold.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
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
/**
 * 归档页/分类页年份折叠功能
 * 最新年份默认展开，旧年份默认折叠并显示文章预览
 */
function initYearFold() {
  var containers = document.querySelectorAll('#category .article-sort, #archive .article-sort, #tag .article-sort');
  if (!containers.length) return;

  containers.forEach(function (container) {
    var yearItems = container.querySelectorAll('.article-sort-item.year');
    if (yearItems.length <= 1) return;

    yearItems.forEach(function (yearItem, index) {
      if (yearItem.dataset.foldInit === 'true') return;
      yearItem.dataset.foldInit = 'true';

      // 收集该年份下的所有文章元素
      var articles = [];
      var next = yearItem.nextElementSibling;
      while (next && !next.classList.contains('year')) {
        articles.push(next);
        next = next.nextElementSibling;
      }

      var count = articles.length;
      if (count === 0) return;

      // 提取前几篇文章标题用于预览
      var previewTitles = [];
      var maxPreview = Math.min(4, count);
      for (var i = 0; i < maxPreview; i++) {
        var titleEl = articles[i].querySelector('.article-sort-item-title');
        if (titleEl) {
          var text = titleEl.textContent.trim();
          if (text.length > 12) text = text.substring(0, 12) + '…';
          previewTitles.push(text);
        }
      }
      if (count > maxPreview) {
        previewTitles.push('等 ' + count + ' 篇');
      }

      // 创建预览元素
      var preview = document.createElement('div');
      preview.className = 'year-fold-preview';
      previewTitles.forEach(function (t) {
        var s = document.createElement('span');
        s.textContent = t;
        preview.appendChild(s);
      });

      // 创建包裹容器
      var wrapper = document.createElement('div');
      wrapper.className = 'year-group-posts';
      articles.forEach(function (el) {
        wrapper.appendChild(el);
      });

      // 插入 DOM：年份标题 -> 预览 -> 文章容器
      yearItem.after(preview);
      preview.after(wrapper);

      // 年份标题添加交互
      yearItem.classList.add('year-foldable');

      // 添加右侧信息区域
      var info = document.createElement('span');
      info.className = 'year-fold-info';

      var badge = document.createElement('span');
      badge.className = 'year-fold-badge';
      badge.textContent = count + ' 篇';

      var arrow = document.createElement('i');
      arrow.className = 'fas fa-angle-right year-fold-arrow';

      info.appendChild(badge);
      info.appendChild(arrow);
      yearItem.appendChild(info);

      // 只有第一个年份默认展开
      if (index > 0) {
        wrapper.classList.add('is-collapsed');
        yearItem.classList.add('is-collapsed');
      }

      // 点击切换
      function toggle() {
        var collapsed = wrapper.classList.contains('is-collapsed');
        if (collapsed) {
          wrapper.classList.remove('is-collapsed');
          yearItem.classList.remove('is-collapsed');
        } else {
          wrapper.classList.add('is-collapsed');
          yearItem.classList.add('is-collapsed');
        }
      }

      yearItem.addEventListener('click', toggle);
    });
  });
}

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', initYearFold);
} else {
  initYearFold();
}
document.addEventListener('pjax:complete', initYearFold);

对应的折叠样式：

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
/* 分类页/归档页年份折叠 */
.article-sort-item.year.year-foldable {
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s ease;
    cursor: url(https://img.june-pj.cn/img/pointer.cur), pointer !important;
    user-select: none;
}

.article-sort-item.year.year-foldable:hover {
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border-color: var(--june);
}

.year-fold-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.year-fold-badge {
    font-size: 12px;
    color: var(--june-fontcolor);
    background: var(--june-card-bg);
    padding: 2px 10px;
    border-radius: 10px;
    font-weight: 500;
    white-space: nowrap;
    border: 1px solid var(--june-gray);
}

.year-fold-arrow {
    font-size: 14px;
    color: var(--june);
    transition: transform 0.3s ease;
    transform: rotate(90deg);
}

.article-sort-item.year.is-collapsed .year-fold-arrow {
    transform: rotate(0deg);
}

.year-group-posts {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    overflow: hidden;
    max-height: 9999px;
    opacity: 1;
    transition: max-height 0.5s ease-in-out, opacity 0.3s ease, margin 0.3s ease;
}

.year-group-posts.is-collapsed {
    max-height: 0 !important;
    opacity: 0;
    margin: 0;
    padding: 0;
}

/* 折叠时的文章预览 */
.year-fold-preview {
    width: 100%;
    padding: 8px 15px 0;
    font-size: 13px;
    color: var(--june-secondtext);
    line-height: 1.8;
    display: none;
    pointer-events: none;
}

.article-sort-item.year.is-collapsed + .year-fold-preview {
    display: block;
}

.year-fold-preview span {
    display: inline-block;
    margin-right: 12px;
    white-space: nowrap;
}

.year-fold-preview span::before {
    content: '·';
    margin-right: 4px;
    color: var(--june);
}

4. 禁用分页并隐藏分页器

在_config.yml中添加配置，禁用分页：

1
2
3
4
5
6
7
8
9
10
11
# Category page pagination (0 = show all posts without pagination)
category_generator:
  per_page: 0

# Archive page pagination (0 = show all posts without pagination)
archive_generator:
  per_page: 0

# Tag page pagination (0 = show all posts without pagination)
tag_generator:
  per_page: 0

对应 CSS 隐藏分页器：

1
2
3
4
5
6
/* 归档页、分类页、标签页禁用分页后隐藏分页器 */
#archive #pagination,
#category #pagination,
#tag #pagination {
    display: none;
}

2. 分类、标签页

效果

🏠 站内链接，放心访问
分类
June's Blog
🏠 站内链接，放心访问
标签
June's Blog

参考链接

🔗 站外链接，请注意甄别
重构记录 - 3
爱吃肉的猫
注意

目前只修改了样式，其余的没改

1. 追加分类页样式

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
/* 分类页 */
.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(--june-card-bg);
    margin: 0.5em 0.5em;
    border-radius: var(--border-radius-large);
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    border: var(--style-border-always);
    box-shadow: var(--june-shadow-border);
    align-items: center;
}

.category-lists .category-list a {
    color: var(--june-fontcolor) !important;
}

.category-lists ul li:hover {
    background: var(--june);
    color: var(--june-white) !important;
}

.category-lists ul li:hover a {
    color: var(--june-white) !important;
}

.category-lists ul li:hover:before {
    color: var(--june-white) !important;
}

.category-lists ul li:before {
    position: unset;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    background: 0;
    color: var(--june-fontcolor) !important;
    cursor: pointer;
    content: "\e661" !important;
    font-family: "iconfont" !important;
    opacity: 0.4;
    padding-top: 2px;
    padding-right: 2px;
}

.category-lists .category-list .category-list-count {
    background: var(--june-secondbg);
    padding: 4px 4px;
    border-radius: var(--border-radius-small);
    color: var(--june-secondtext);
    line-height: 1;
    text-align: center;
    min-width: 35px;
    display: inline-block;
    font-size: 1rem;
    box-shadow: var(--june-shadow-border);
}

.category-lists .category-list .category-list-count:before,
.category-lists .category-list .category-list-count:after {
    content: '';
}

2. 追加标签页样式

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
/* 标签页 */
#page .tag-cloud-list {
    margin: 5em 0 3em;
}

#page .tag-cloud-list a {
    display: inline-flex;
    color: var(--june-fontcolor) !important;
    font-size: 1.2em !important;
    padding: 0.2em 0.5em;
    background: var(--june-card-bg);
    margin: 0.5em 0.5em;
    border-radius: var(--border-radius-large);
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    border: var(--style-border-always);
    box-shadow: var(--june-shadow-border);
    align-items: center;
}

#page .tag-cloud-list a:before {
    color: var(--june-fontcolor) !important;
    content: "\e661" !important;
    font-family: "iconfont" !important;
    opacity: 0.4;
    padding-top: 2px;
    padding-right: 2px;
}

#page .tag-cloud-list a:hover {
    background: var(--june);
    color: var(--june-white) !important;
}

#page .tag-cloud-list a > sup {
    top: auto;
    background: var(--june-secondbg);
    padding: 4px 4px;
    margin-left: 8px;
    border-radius: var(--border-radius-small);
    color: var(--june-secondtext);
    line-height: 1;
    text-align: center;
    min-width: 35px;
    display: inline-block;
    font-size: 1rem;
    box-shadow: var(--june-shadow-border);
}