魔改笔记五：分类条及外链卡片

魔改教程
注意：由于本次魔改修改了主题内部文件，一定要注意提前备份！一定要注意提前备份！一定要注意提前备份！如果没有魔改基础建议紧跟教程，如果有任何问题可以在下方评论区提出。

分类条
我原有的分类是店长的分类卡片，但总感觉占用空间有点大，且如果分类超过三个会显示滚动条。我在网站设计中尽量避免显示滚动条，因为感觉不够美观。为了使网站更加简洁，我决定按照朋友 klcdm 的推荐，使用洪哥的分类条。然而，洪哥的分类条是纯静态的，分类需要手动添加上去，明显不符合我的懒蛋需求。因此，我决定修改洪哥的分类条，并从 hexo-theme-solitude 中提取出动态分类条的功能，以便更简洁地显示所有分类并快捷切换。

效果展示
以下是分类条的展示效果，具体效果可以在首页自行感受。

为了美观，我把横向分类的滚动条移除了，但是仍然可以移动，如果是手机的话，通过左右滑动即可拉动滚动条，但是不太明显，有需要的可以自行添加其他元素。

教程

新建文件[BlogRoot]\themes\butterfly\layout\includes\categoryBar.pug文件，写入：

.category-bar-items#category-bar-items(class=is_home() ? 'home' : '')
  .category-bar-item(class=is_home() ? 'select' : '', id="category-bar-home")
    a(href=url_for('/'))= __('博客首页')
  each item in site.categories.find({ parent: { $exists: false } }).data
    .category-bar-item(class=select ? (select === item.name ? 'select' : '') : '', id=item.name)
      a(href=url_for(item.path))= item.name
  .category-bar-item
    a(href=url_for('/archives/'))= __('文章存档')
div.category-bar-right
  a.category-bar-more(href=url_for('/categories/'))= __('更多分类')

以上就是该滚动条的结构，下面我们开始实现样式的定义，新建文件[BlogRoot]\themes\butterfly\source\css_layout\category-bar.styl写入以下文件：

#category-bar
  padding 7px 11px
  background var(--card-bg)
  border-radius 8px
  display flex
  white-space nowrap
  overflow hidden
  transition 0.3s
  height 50px
  width 100%
  justify-content space-between
  user-select none
  align-items center
  margin-bottom 20px

  .category-bar-right
    display flex
    border-radius 8px
    align-items center

    .category-bar-more
      margin-left 4px
      margin-right 4px
      font-weight 700
      border-radius 8px
      padding 0 8px

  .category-bar-items
    width 100%
    white-space nowrap
    overflow-x scroll
    scrollbar-width: none
    -ms-overflow-style: none
    overflow-y hidden
    display flex
    border-radius 8px
    align-items center
    height 30px

    &::-webkit-scrollbar
      display: none

    .category-bar-item
      a
        padding .1rem .5rem
        margin-right 6px
        font-weight 700
        border-radius 8px
        display flex
        align-items center
        height 30px

      &.select
        a
          background #3eb8be
          color var(--btn-color)

在pug文件中，所有的颜色我都尽量使用了butterfly主题自带的变量进行了替代，确保大部分人可以正常显示。

然后将其添加到不同的位置，比如我这里实现了添加到分类页面等位置，配合上pjax可以做到无刷更新，效果很好，打开文件[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
+      #category-bar.category-bar
+        include includes/categoryBar.pug
      +postUI
      include includes/pagination.pug
  else
    include ./includes/mixins/article-sort.pug
    #category
      <div id="categories-chart" data-parent="true" style="height: 300px; padding: 10px;"></div>
      .article-sort-title= _p('page.category') + ' - ' + page.category
      +articleSort(page.posts)
      include includes/pagination.pug

注意上方的修改，需要将配置文件中，分类页面的主题改成index，否则不会显示。

下面我们将其添加到主页，打开文件[BlogRoot]\themes\butterfly\layout\index.pug文件，添加下面两行

extends includes/layout.pug

block content
  include ./includes/mixins/post-ui.pug
  #recent-posts.recent-posts
+    #category-bar.category-bar
+      include includes/categoryBar.pug
    +postUI
    include includes/pagination.pug

然后就是实现点击切换后，高亮部分跟随分类页面走的部分，为了和主题融合我还是修改源码，打开[BlogRoot]\themes\butterfly\source\js\main.js，添加js函数，比如我添加到了778行左右，switchComments函数的上面：

/**
   * 自己写的，实现功能切换类别表
   */ 
  const setCategoryBarActive = () => {
    const categoryBar = document.querySelector("#category-bar");
    const currentPath = decodeURIComponent(window.location.pathname);
    const isHomePage = currentPath === GLOBAL_CONFIG.root;

    if (categoryBar) {
        const categoryItems = categoryBar.querySelectorAll(".category-bar-item");
        categoryItems.forEach(item => item.classList.remove("select"));

        const activeItemId = isHomePage ? "category-bar-home" : currentPath.split("/").slice(-2, -1)[0];
        const activeItem = document.getElementById(activeItemId);

        if (activeItem) {
            activeItem.classList.add("select");
        }
    }
};

然后再在引用部分执行这个函数，在同一个文件，找到下面的函数并添加函数的调用，位置看下方注释：

window.refreshFn = function () {
  initAdjust()

  if (GLOBAL_CONFIG_SITE.isPost) {
    GLOBAL_CONFIG.noticeOutdate !== undefined && addPostOutdateNotice()
    GLOBAL_CONFIG.relativeDate.post && relativeDate(document.querySelectorAll('#post-meta time'))
  } else {
    GLOBAL_CONFIG.relativeDate.homepage && relativeDate(document.querySelectorAll('#recent-posts time'))
    GLOBAL_CONFIG.runtime && addRuntime()
    addLastPushDate()
    toggleCardCategory()
    setCategoryBarActive()      // 自己加的，用于切换类别栏目
  }