Docusaurus实用指南

一直在找一个即时尚又支持侧边栏+TOC效果，还能直接渲染md文件的文档工具，之前用的是Docsify、Hexo之流，各有缺陷，土里土气的，直到遇到Facebook的Docusaurus，一切就是这么完美~

Docusaurus官网

Docusaurus默认会展示：

• 主页
• Docs
• Blog

我目前个人诉求，只用于Docs， 话不多说，上图：

Docusaurus纯Docs效果

所有的配置内容在docusaurus.config.js里，上配置：

module.exports = {
  title: 'My Site',
  tagline: 'The tagline of my site',
  url: '/',
  baseUrl: '/',
  onBrokenLinks: 'throw',
  onBrokenMarkdownLinks: 'warn',
  favicon: 'img/favicon.ico',
  organizationName: 'Test', // Usually your GitHub org/user name.
  projectName: 'docusaurus', // Usually your repo name.
  themeConfig: {
    hideableSidebar: true,
    colorMode: {
      defaultMode: 'dark',
      disableSwitch: false,
      respectPrefersColorScheme: true,
      switchConfig: {
        darkIcon: '',
        lightIcon: '\u2600',
        // React inline style object
        // see https://reactjs.org/docs/dom-elements.html#style
        darkIconStyle: {
          marginLeft: '2px',
        },
        lightIconStyle: {
          marginLeft: '1px',
        },
      },
    },
    navbar: {
      title: 'Test',
      logo: {
        alt: 'Test Project Logo',
        src: 'img/logo.svg',
      },
    }
  },
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {
          sidebarPath: require.resolve('./sidebars.js'),
          path: 'docs/',
          routeBasePath: '/',
        },
        theme: {
          customCss: require.resolve('./src/css/custom.css'),
        },
      },
    ],
  ],
};

细节说明：

1. 修改docusaurus.config.js下的presets信息：

• path 属性，它的值为./doc，也就是指向 doc 的文件夹。
• routeBasePath 属性，这个是访问这个文档的路径，设置成/就是默认网站的首页。

2. 把 src/pages 下边 index.js 的改成别的名字或者是给删除。

3. 默认为暗黑模式，themeConfig下colorMode的defaultMode设置为dark：

colorMode: {
      defaultMode: 'dark',
}

4. 侧边栏支持折叠，themeConfig下hideableSidebar设置为true：

themeConfig: {
    hideableSidebar: true,
}

以上，
如果是想用这个做一个Blog，把上面的Docs改成Blog即可！