butterfly 主题的侧边栏 aside 默认由下面元素组成：

  • 博主信息卡片： #body-wrap #aside-content .card-author
  • 网站公告卡片： #body-wrap #aside-content .card-announcement
  • 最新文章卡片： #body-wrap #aside-content .card-recent-post
  • 文章分类卡片： #body-wrap #aside-content .card-categories
  • 文章标签卡片： #body-wrap #aside-content .card-tags
  • 文章归档卡片： #body-wrap #aside-content .card-archives
  • 网站资讯卡片： #body-wrap #aside-content .card-webinfo

  但是在部分页面我并不希望显示所有卡片，比如在 文章分类页面，侧边栏如果仍显示 文章分类卡片 ，信息就显得冗余了。因此接下来介绍一种自定义侧边栏卡片隐藏的方案：
  在 hexo 编译输出的过程中，使用 js 脚本将 侧边栏隐藏 css 样式 强制注入到 .html 文件 <head> 标签中，这样无需改动主题模板文件，实现自定义页面的侧边栏卡片隐藏。方案步骤如下：

  • 在 Hexo 博客根目录下创建 /scripts/custom_sidebar.js 文件：
1
2
3
cd 博客根目录
mkdir scripts/
touch /scripts/custom_sidebar.js
  • 在文件中写入以下逻辑：
1
2
3
4
5
6
7
8
9
10
11
hexo.extend.filter.register('after_render:html', function(str, data) {
    if (data && data.page && data.page.hide_cards && Array.isArray(data.page.hide_cards)) {
        let cssRules = '';
        data.page.hide_cards.forEach(card => {
            cssRules += `#body-wrap #aside-content .card-${card} { display: none !important; }\n`;
        });
        const styleTag = `<style type="text/css" class="custom-pjax-sidebar">\n${cssRules}</style>`;
        return str.replace(/(<div[^>]*id=["']body-wrap["'][^>]*>)/i, '$1\n' + styleTag);
    }
    return str;
});
  • 在目标页面使用：

  打开任何想自定义隐藏侧边栏的 .md 文件，在头部的 Front-matter 中写入想隐藏卡片的名称：

1
2
3
4
5
6
7
8
---
title: 关于我
date: 2026-03-01 12:00:00
hide_cards:
  - announcement
  - recent-post
  - tags
---

  hide_cards为隐藏卡片配置字段，具体参数配置如下：

参数名称 隐藏侧边栏卡片类型
author 博主信息
announcement 网站公告
recent-post 最新文章
categories 文章分类
tags 文章标签
archives 文章归档
webinfo 网站资讯

  重新部署博客并刷新页面，即可生效。