【butterfly】动态分类标签导航栏

新建 catalog_list.js

[Blogroot]\themes\butterfly\scripts\helpers\ 目录下新建文件 catalog_list.js，type 参数表示生成分类导航栏 categories 还是标签导航栏 tags，其中 <sup>${item.length}</sup> 是使用上标显示文章数量。

hexo.extend.helper.register('catalog_list', function (type) {
  let html = ``
  hexo.locals.get(type).map(function (item) {
    html += `
    <div class="catalog-list-item" id="/${item.path}">
      <a href="/${item.path}">${item.name}<sup>${item.length}</sup></a>
    </div>
    `
  })
  return html
})

新增自定义样式

在自定义scss文件中添加以下代码：

// 分类目录条、标签目录条start
#catalog-bar {
  padding: .4rem .8rem;
  border-radius: .5rem;
  display: flex;
  border: 1px solid var(--forecolor);
  margin-bottom: 1rem;
  justify-content: space-between;
  &:hover {
    border-color: var(--forecolor);
  }
  i {
    line-height: inherit;
  }
  #catalog-list {
    /* 分类/标签较少时，可以选择不设置 width，居中显示 catalog-list-item */
    /* width: 100%; */
    margin: 0 .5rem;
    display: flex;
    white-space: nowrap;
    overflow-x: scroll;
    .catalog-list-item {
      a {
        margin: 0 .2em;
        padding: 0.2em 0.3em 0.3em;
        border-radius: .5rem;
        color: var(--font-color);
        -webkit-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
      }
      &.selected a {
        background: var(--backcolor);
      }
      &:hover a {
        background: var(--forecolor);
        color: var(--white);
      }
    }
  }
  .catalog-more {
    min-width: fit-content;
    font-weight: bold;
    color: #4c4948;
    &:hover {
      color: var(--forecolor);
    }
  }
  &::-webkit-scrollbar {
    display: none;
  }
}
// 分类目录条、标签目录条end

当前所在分类/标签页高亮

在自定义js文件中加入以下代码：

function catalogActive () {
  let $list = document.getElementById('catalog-list')
  if ($list) {
    // 鼠标滚轮滚动
    $list.addEventListener('mousewheel', function (e) {
      // 计算鼠标滚轮滚动的距离
      $list.scrollLeft -= e.wheelDelta / 2
      // 阻止浏览器默认方法
      e.preventDefault()
    }, false)

    // 高亮当前页面对应的分类或标签
    let $catalog = document.getElementById(decodeURIComponent(window.location.pathname))
    $catalog.classList.add('selected')

    // 滚动当前页面对应的分类或标签到中部
    $list.scrollLeft = ($catalog.offsetLeft - $list.offsetLeft) - ($list.offsetWidth - $catalog.offsetWidth) / 2
  }
}
catalogActive()

使用分类导航栏

[Blogroot]\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
+     #catalog-bar
+       i.fa-fw.fas.fa-shapes
+       #catalog-list
+         !=catalog_list("categories")
+       a.catalog-more(href="/categories/")!= '更多'
      .article-sort-title= _p('page.category') + ' - ' + page.category
      +articleSort(page.posts)
      include includes/pagination.pug

使用标签导航栏

[Blogroot]\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
+     #catalog-bar
+       i.fa-fw.fas.fa-tags
+       #catalog-list
+         !=catalog_list("tags")
+       a.catalog-more(href="/tags/")!= '更多'
      .article-sort-title= _p('page.tag') + ' - ' + page.tag
      +articleSort(page.posts)
      include includes/pagination.pug