二级分类标签页

双栏布局

原版单栏索引有点浪费空间，只需要调整CSS即可

css

.article-sort {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.article-sort-item.year {
    width: 100%;
}

.article-sort-item {
    padding: .5rem;
    margin: .3rem 0;
    border-radius: var(--border-radius);
}

.article-sort-item:not(.year) {
    width: 100%;
    box-shadow: var(--card-box-shadow);
}

@media screen and (min-width: 901px) {
    .article-sort-item:not(.year) {
        width: calc(50% - 0.25rem);
        box-shadow: var(--card-box-shadow);
    }
}

.article-sort-item:not(.year):before {
    content: unset;
}

.article-sort-item:before {
    left: calc(-20px - 7px);
}

微调，让标题显示在日期上方，修改themes\butterfly\layout\includes\mixins\article-sort.pug

diff

mixin articleSort(posts)
  .article-sort
    - let year
    - posts.forEach(article => {
      - const tempYear = date(article.date, 'YYYY')
      - const noCoverClass = article.cover === false || !theme.cover.archives_enable ? 'no-article-cover' : ''
      - const title = article.title || _p('no_title')
      if tempYear !== year
        - year = tempYear
        .article-sort-item.year= year
      .article-sort-item(class=noCoverClass)
        if article.cover && theme.cover.archives_enable
          a.article-sort-item-img(href=url_for(article.path) title=title)
            if article.cover_type === 'img'
              img(src=url_for(article.cover) alt=title onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'`)
            else
              div(style=`background: ${article.cover}`)
        .article-sort-item-info
+         a.article-sort-item-title(href=url_for(article.path) title=title)= title
          .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)
-         a.article-sort-item-title(href=url_for(article.path) title=title)= title
    - })

二级分类标签页 ​

双栏布局 ​

二级分类标签页

双栏布局