前言

2022-08-04 更新文章 butterfly4.3.0 版本已增加 tag 和 category 页面可隐藏 aside，但不能隐藏某个 标签 或 分类 的侧边栏。

本文教程主要针对 Hexo Butterfly 主题博客，当用户进入归档、分类、标签页面时，已经是有目的性地浏览文章，此时可以隐藏侧边栏，避免 归档、分类、标签 信息的重复显示，_config.butterfly.yml 配置文件已经有了 归档页 的设置项了，我们需要加上 分类页 和 标签页 的设置项，修改主题源码。

Butterfly 分类页和标签页隐藏侧栏

修改主题配置文件

打开 _config.butterfly.yml 文件，找到 aside 配置项，添加 分类页 和 标签页 是否显示侧栏的设置项。

1
2
3
4
5
6
7
8
9
10
11
12
  aside:
    enable: true
    hide: false
    button: true
    mobile: true # display on mobile
    position: right # left or right
    archives: false # 归档页隐藏侧栏
+   categories: false # 分类页隐藏侧栏
+   tags: false # 标签页隐藏侧栏
    card_author:
      enable: true
      description:

打开 _config.butterfly.yml 文件，找到 aside 配置项，添加 友链页 是否显示侧栏的设置项。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  aside:
    enable: true
    hide: false
    button: true
    mobile: true # display on mobile
    position: right # left or right
    display:
      archive: false # 归档页隐藏侧栏
      tag: false # 分类页隐藏侧栏
      category: false # 标签页隐藏侧栏
+     flink: false # 友链页隐藏侧栏
    card_author:
      enable: true
      description:

修改主题源码文件

打开主题源码文件 \themes\butterfly\layout\includes\layout.pug，修改渲染文件。

  • is_category：检查当前页面是否为分类归档页面。
  • is_tag：检查当前页面是否为标签归档页面。
  • page.type 为 index.md 的 type 属性，可以在 \categories\index.md 和 \tags\index.md 目录找到，同理可以 添加 友链页 page.type = 'link' 是否显示侧栏配置项。

butterfly4.3.0 版本已增加 tag 和 category 页面可隐藏 aside，但不能隐藏某个 标签 或 分类 的侧边栏。

可以通过增加 page.type === 'categories' 或 page.type === 'tags' 来实现隐藏某个 标签 或 分类 的侧边栏。

1
2
3
4
5
6
7
8
    - var htmlClassHideAside = theme.aside.enable && theme.aside.hide ? 'hide-aside' : ''
-   - page.aside = is_archive() ? theme.aside.display.archive: is_category() ? theme.aside.display.category : is_tag() ? theme.aside.display.tag : page.aside
+   - page.aside = is_archive() ? theme.aside.archives : page.aside // - 归档页隐藏侧栏
+   - page.aside = is_category() || page.type === 'categories' ? theme.aside.categories : page.aside // - 分类页隐藏侧栏
+   - page.aside = is_tag() || page.type === 'tags' ? theme.aside.tags : page.aside // - 标签页隐藏侧栏
+   - page.aside = page.type === 'link' ? theme.aside.display.flink : page.aside // - 友链页隐藏侧栏
    - var hideAside = !theme.aside.enable || page.aside === false ? 'hide-aside' : ''
    - var pageType = is_post() ? 'post' : 'page'

另外可以参看 Hexo 自带判断页面类型的函数，详见 条件函数 自行添加其他配置项。

Hexo 三连

执行 Hexo 三连

1
hexo clean && hexo g && hexo s