Hexo博客 | 动态分类标签条，自动获取全站分类与标签进行展示

1. 前言

本文是对Heo博主写的Butterfly魔改：动态分类条，可以根据页面变化而改变的分类列表展示方式文章的补充，增加了动态标签条，并且可以自动获取全站分类和标签名称。

2. 预览

3. 配置

3.1 新建PUG文件

首先是分类条，在themes/butterfly/layout/includes/处新建文件categoryBar.pug

代码语言：javascript复制

#category-bar
  .category-bar-items#category-bar-items
    !=getarray_bar("category")
  a.category-bar-more(href="/categories/") 更多

其次是标签条，在themes/butterfly/layout/includes/处新建文件tagBar.pug，因为样式一样，所以没有更改id和class名称。

代码语言：javascript复制

#category-bar
  .category-bar-items#category-bar-items
    !=getarray_bar("tag")
  a.category-bar-more(href="/tags/") 更多

3.2 新建Hexo辅助函数

在theme/butterfly/scripts/helpers/中创建get_arrays.js

代码语言：javascript复制

hexo.extend.helper.register('getarray_bar', function (types) {
  if (!types) {
    types = "category"
  }
  const categoriesBar = function (categories) {
    if (!categories || !categories.length) return ``
    const categoryArr = []
    hexo.locals.get('categories').map(function (category) {
      categoryArr.push({ name: category.name, value: category.length })
    })
    categoryArr.sort((a, b) => { return b.value - a.value })
    let strCategoriesBar = ``
    for (let i = 0; i < categories.length; i  ) {
      strTemp=`
      <div class="category-bar-item" id="${categoryArr[i].name}">
      <a href="/categories/${categoryArr[i].name}/">${categoryArr[i].name}</a>
      </div>`
      strCategoriesBar =strTemp
    }
    return strCategoriesBar
  }
  const tagsBar = function(tags) {
    if (!tags || !tags.length) return ``
    const tagArr = []
    hexo.locals.get('tags').map(function (tag) {
      tagArr.push({ name: tag.name, value: tag.length })
    })
    tagArr.sort((a, b) => { return b.value - a.value })
    let strTagsBar = ``
    for (let i = 0; i < tags.length; i  ) {
      strTemp=`
      <div class="category-bar-item" id="${tagArr[i].name}">
      <a href="/tags/${tagArr[i].name}/">${tagArr[i].name}</a>
      </div>`
      strTagsBar =strTemp
    }
    return strTagsBar
  }
  if (types == "category"){
    return categoriesBar(this.site.categories)
  }
  if (types == "tag"){
    return tagsBar(this.site.tags)
  }
})

3.3 引用模块

在需要的位置引用该模块，例如：

在分类页面引用：找到theme/butterfly/layout/category.pug

代码语言：javascript复制

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
       .category-in-bar
         .category-in-bar-tips
           i.fa-fw.fas.fa-folder-open
         include includes/categoryBar.pug
      .article-sort-title= _p('page.category')   ' - '   page.category
       articleSort(page.posts)
      include includes/pagination.pug

在标签页引用：找到theme/butterfly/layout/tag.pug

代码语言：javascript复制

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
       .category-in-bar
         .category-in-bar-tips
           i.fa-fw.fas.fa-tags
         include includes/tagBar.pug
      .article-sort-title= _p('page.tag')   ' - '   page.tag
       articleSort(page.posts)
      include includes/pagination.pug

4. 引入js和css文件

这一部分和Heo博主的教程Butterfly魔改：动态分类条，可以根据页面变化而改变的分类列表展示方式 | 张洪Heo (zhheo.com)一致。

不过如果添加了标签条，js文件需要增加一个函数

代码语言：javascript复制

//标签条
function tagsBarActive(){
  var urlinfo = window.location.pathname;
  urlinfo = decodeURIComponent(urlinfo)
  //console.log(urlinfo);
  //判断是否是首页
  if (urlinfo == '/'){
    if (document.querySelector('#tags-bar')){
      document.getElementById('首页').classList.add("select")
    }
  }else {
    // 验证是否是分类链接
    var pattern = //tags/.*?//;
    var patbool = pattern.test(urlinfo);
    //console.log(patbool);
    // 获取当前的标签
    if (patbool) {
      var valuegroup = urlinfo.split("/");
      //console.log(valuegroup[2]);
      // 获取当前分类
      var nowTag = valuegroup[2];
      if (document.querySelector('#category-bar')){
        document.getElementById(nowTag).classList.add("select");
      }
    }
  } 
}
tagsBarActive()

class com layout pug themes

1 人点赞