跳到主要内容

侧边栏配置

我来详细介绍 sidebars.js 的配置方法。我创建了一个完整的 sidebars.js 配置指南！

核心配置类型​

1️⃣ 最简单配置​

const sidebars = {
  mySidebar: [
    'intro',
    'getting-started',
  ],
};

2️⃣ 分类配置​

const sidebars = {
  mySidebar: [
    {
      type: 'category',
      label: 'JavaScript',
      items: [
        'javascript/intro',
        'javascript/basic-syntax',
      ],
    },
  ],
};

3️⃣ 自动生成​

const sidebars = {
  mySidebar: [
    {
      type: 'autogenerated',
      dirName: '.', // 自动扫描 docs/ 目录
    },
  ],
};

实用技巧​

添加 emoji 图标：

{
  type: 'doc',
  id: 'intro',
  label: '🏠 首页',
}

外部链接：

{
  type: 'link',
  label: '📖 MDN 文档',
  href: 'https://developer.mozilla.org',
}

分隔线：

{
  type: 'html',
  value: '<hr/>',
}

控制折叠：

{
  type: 'category',
  label: '教程',
  collapsed: false,    // false = 默认展开
  collapsible: true,   // true = 可折叠
  items: [...],
}

目录结构与配置对应​

docs/
├── intro.md
├── javascript/
│   ├── intro.md
│   ├── basic-syntax.md
│   └── functions/
│       ├── intro.md
│       └── arrow.md

对应配置：

const sidebars = {
  mySidebar: [
    'intro',  // docs/intro.md
    {
      type: 'category',
      label: 'JavaScript',
      items: [
        'javascript/intro',  // docs/javascript/intro.md
        'javascript/basic-syntax',
        {
          type: 'category',
          label: '函数',
          items: [
            'javascript/functions/intro',
            'javascript/functions/arrow',
          ],
        },
      ],
    },
  ],
};

需要具体哪个部分的更详细说明吗？