Skip to main content

Conf

Docusaurus is so popular because its configuration is simple, it can achieve powerful functions with simple configuration, and supports rich customization capabilities. Due To The Official Default Docs Style Configuration, I Found That Docusaurus Is Also Suitable As A Book Style. Of Course, You Can Also Customize The Development. I'm Just Using The Common Configuration Functions Provided By The Official To Demonstrate.

This article is about some common configurations in two styles. Of course, there are many official configurations. Here are only the common configurations. For more configurations, please refer to the official documents.

There are two ways to use the sidebar, one is manual configuration, and the other can be automatically generated according to the specified path. No matter which method is used, it requires two steps:

1. Definition sidebar.ts​

There are many types when configuring the sidebar.

  1. Doc: link to a doc page, associating it with the sidebar
  2. Link: link to any internal or external page
  3. Category: creates a dropdown of sidebar items
  4. Autogenerated: generate a sidebar slice automatically
  5. HTML: renders pure HTML in the item's position
  6. *Ref: link to a doc page, without making the item take part in navigation generation
sidebars.ts
export default {
  mySidebar: [
    // 常规语法：
    {
      type: 'doc',
      id: 'doc1', // 文档 ID
      label: 'Getting started', // 侧边栏标签
    },
    // 简写语法：
    'doc2', // 文档 ID
    ],
};

2. docusaurus.config.ts​

直接将此对象传入 @docusaurus/plugin-docs 或通过 @docusaurus/preset-classic 传入

docusaurus.config.ts
export default {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {
          sidebarPath: './sidebars.ts',
        },
      },
    ],
  ],
};

Theme​

Available by Infima generate theme colors

src/css/custom.css
/* 默认颜色. */
:root {
  --ifm-color-primary: #2e8555;
  --ifm-color-primary-dark: #29784c;
  --ifm-color-primary-darker: #277148;
  --ifm-color-primary-darkest: #205d3b;
  --ifm-color-primary-light: #33925d;
  --ifm-color-primary-lighter: #359962;
  --ifm-color-primary-lightest: #3cad6e;
  --ifm-code-font-size: 95%;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
}

/* dark 模式颜色. */
[data-theme='dark'] {
  --ifm-color-primary: #25c2a0;
  --ifm-color-primary-dark: #21af90;
  --ifm-color-primary-darker: #1fa588;
  --ifm-color-primary-darkest: #1a8870;
  --ifm-color-primary-light: #29d5b0;
  --ifm-color-primary-lighter: #32d8b4;
  --ifm-color-primary-lightest: #4fddbf;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}

Code blocks​

info

The following shows the language configuration that Docusaurus does not support by default.

docusaurus.config.ts
const config: Config = {
  themeConfig: {
    prism: {
      additionalLanguages: [
        'java',
        'bash',
        'json'
      ],
    }
  }
}

In 3.4.0 Version, Due to jiti version issues Add languages not supported by Docusaurus, It does not take effect. The version of jiti can be mandatory.

package.json
"resolutions": {
  "jiti": "1.21.0"},
Last updated on