这里进行archives页面美化，详情看archives页面

布置过程

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
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
: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))
}

/* 归档、标签、分类页 */
.layout.hide-aside{
  max-width:1200px;
}

#archive,#tag,#category {
  background: var(--icemyst-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(--icemyst-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(--icemyst-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: 15px;
  padding-left: 10px;
  margin: 10px 0;
  line-height:25px;
  text-overflow:ellipsis;
}

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

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

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

.article-sort-meta > .article-sort-item-time{
  opacity: 0;
  float: right;
  color:var(--icemyst-light-grey)!important;
}

.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: 0px 0px 0 10px;
  text-overflow:ellipsis;
}

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

.article-sort-item:hover:not(.year){
  background-color:var(--icemyst-color);
  box-shadow: 0 0 10px var(--icemyst-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-meta > .article-sort-item-time:not(.year) {
  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(--icemyst-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:hover:not(.year){
  color:var(--icemyst-light-grey)!important;
}

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

.article-sort-item:hover(.year).article-sort-item:hover:not(.year) .article-sort-item-info:hover:not(.year) .article-sort-item-time:hover:not(.year) > i {
  color:var(--icemyst-light-grey)!important;
}


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

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

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

.article-sort-item:hover:not(.year) .article-sort-item-tags:hover{
  background:var(--icemyst-purple);
  box-shadow:0 0 5px var(--icemyst-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
    - })

如果你用的是anzhuyu主题，这里就要更改archives.styl文件，直接全部覆盖即可。

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
.article-sort
  margin-left: 10px
  padding-left: 20px
  border-left: 2px solid lighten($light-blue, 20)

  &-title
    position: relative
    margin-left: 10px
    padding-bottom: 20px
    padding-left: 20px
    font-size: 1.72em
    margin: 0.25rem;
    padding: 0;
    border: none;
    font-weight: bold;
    font-size: 2em;

    &:hover
      &:before
        border-color: var(--pseudo-hover)

    &:before
      position: absolute
      top: calc(((100% - 36px) / 2))
      left: -9px
      z-index: 1
      width: w = 10px
      height: h = w
      border: .5 * w solid $light-blue
      border-radius: w
      background: var(--card-bg)
      content: ''
      line-height: h
      transition: all .2s ease-in-out

    &:after
      position: absolute
      bottom: 0
      left: 0
      z-index: 0
      width: 2px
      height: 1.5em
      background: lighten($light-blue, 20)
      content: ''

  &-item
    position: relative
    display: flex
    align-items: center
    margin: 0 0 20px 10px
    transition: all .2s ease-in-out

    &:hover
      &:before
        border-color: var(--pseudo-hover)

    &:before
      $w = 6px
      position: absolute
      left: calc(-20px - 17px)
      width: w = $w
      height: h = w
      border: .5 * w solid $light-blue
      border-radius: w
      background: var(--card-bg)
      content: ''
      transition: all .2s ease-in-out

    &.no-article-cover
      height: 80px

      .article-sort-item-info
        padding: 0

    &.year
      font-size: 1.43em

      &:hover
        &:before
          border-color: $light-blue

      &:before
        border-color: var(--pseudo-hover)

    &-time
      color: $theme-meta-color
      font-size: 95%

      time
        padding-left: 6px
        cursor: default

    &-title
      @extend .limit-more-line
      color: var(--font-color)
      font-size: 1.1em
      transition: all .3s
      -webkit-line-clamp: 2

      &:hover
        color: $text-hover
        transform: translateX(10px)

    &-img
      overflow: hidden
      width: 80px
      height: 80px

      :first-child
        @extend .imgHover

    &-info
      flex: 1
      padding: 0 0 0 16px