Butterfly 分类标签归档页增加文章索引

前言

本文教程主要针对 Hexo Butterfly 主题博客，基于原版主题增加文章索引可能不够美观，只是分享思路，有兴趣和有基础的小伙伴可以对此二次魔改。

开发思路：参考 Hexo 页面变量 中的 page.current 获取当前页码，以及 Hexo 配置文件中 [Blogroot]\_config.yml 的 per_page 每页显示的文章量计算文章索引。

修改文章渲染函数

打开 \themes\butterfly\layout\includes\mixins\article-sort.pug 文件。

butterfly4.2.2本站魔改

基于原版主题，增加文章索引可能不够美观，只是分享思路。

修改以下代码

- mixin articleSort(posts)
+ mixin articleSort(posts, current)
    .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)
          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
            .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
+           span.article-sort-item-index= (current - 1) * config.per_page + post_index + 1
      - })

需配合本站 CSS 样式魔改，有一定的前端基础。

替换为以下代码

mixin articleSort(posts, current)
  .article-sort
    - var year
    - posts.each(function (article, post_index) {
      - 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)
        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
          a.article-sort-item-title(href=url_for(article.path) title=title)= title
          span.article-sort-item-index= (current - 1) * config.per_page + post_index + 1
          .article-meta-wrap
            if (theme.post_meta.page.categories && article.categories.data.length > 0)
              span.article-sort-item-categories
                i.fas.fa-inbox
                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
                i.fas.fa-tag
                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)
    - })

修改归档、分类、标签页面

归档页面

\themes\butterfly\layout\archive.pug

extends includes/layout.pug

block content
  include ./includes/mixins/article-sort.pug
  #archive
    .article-sort-title= _p('page.articles') + ' - ' + site.posts.length
-   +articleSort(page.posts)
+   +articleSort(page.posts, page.current)
    include includes/pagination.pug

分类页面

\themes\butterfly\layout\category.pug

extends includes/layout.pug

block content
  if theme.category_ui == 'index'
    include ./includes/mixins/post-ui.pug
    #recent-posts.recent-posts.category_ui   
      +postUI
      include includes/pagination.pug    
  else
    include ./includes/mixins/article-sort.pug
    #category
      .article-sort-title= _p('page.category') + ' - ' + page.category
-     +articleSort(page.posts)
+     +articleSort(page.posts, page.current)
      include includes/pagination.pug

标签页面

\themes\butterfly\layout\tag.pug

extends includes/layout.pug

block content
  if theme.tag_ui == 'index'
    include ./includes/mixins/post-ui.pug
    #recent-posts.recent-posts
      +postUI
      include includes/pagination.pug
  else
    include ./includes/mixins/article-sort.pug
    #tag
      .article-sort-title= _p('page.tag') + ' - ' + page.tag
-     +articleSort(page.posts)
+     +articleSort(page.posts, page.current)
      include includes/pagination.pug

增加文章索引样式

\themes\butterfly\source\css\_page\archives.styl，大概在 100 行的位置，增加 .article-sort-item-index 的样式.

.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

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

+   &-index
+     opacity: .5
+     position: absolute
+     top: .5rem
+     right: .5rem
+     font-style: italic
+     font-size: 2.5rem
+     line-height: 1.5rem

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

      img
        @extend .imgHover

    &-info
      flex: 1
      padding: 0 16px

Hexo 三连

执行 Hexo 三连

hexo clean && hexo g && hexo s