跳到主要内容

配置

关于文档的创建和配置

在 docusaurus.config.ts 文件中进行配置， config - themeConfig - navbar - items

单级导航​

在 docs 文件夹下创建 test.md 文件，并在 items 配置项中添加：

{
  // ...
  "items": [
    {
      "to": "/docs/test",
      "label": "test"
    }
  ]
}

刷新页面，即可进行预览

多级导航​

docusaurus 的 navbar 最多支持两级导航，比如：

{
  // ...
  "items": [
    {
      "type": "dropdown",
      "label": "编程语言",
      "position": "left",
      "items": [
        {
          "label": "Stack Overflow",
          "href": "https://stackoverflow.com/questions/tagged/docusaurus"
        },
        {
          "label": "Discord",
          "href": "https://discordapp.com/invite/docusaurus"
        }
      ]
    }
  ]
}

图标配置​

以 Github 图标为例 修改 docusaurus.config.ts 文件：

{
  // ...
  "items": [
    {
      "aria-label": "GitHub Repository",
      "className": "navbar--github-link",
      "href": "https://github.com/oneao",
      "position": "right",
      "title": "Github"
    }
  ]
}

在 src/css/custom.css 中添加以下内容：

.navbar--github-link {
  width: 2rem;
  height: 2rem;
  padding: 0.25rem;
  margin: 0rem 0.2rem;
  border-radius: 50%;
  transition: background var(--ifm-transition-fast);
}

.navbar--github-link:hover {
  background: var(--ifm-color-emphasis-200);
}

.navbar--github-link:before {
  content: '';
  height: 100%;
  display: block;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
    no-repeat;
}

html[data-theme='dark'] .navbar--github-link:before {
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
    no-repeat;
}

/* 兼容屏幕过小情况，转为文字 */
@media screen and (max-width: 996px) {
  .navbar--github-link {
    margin: 0rem;
    padding: var(--ifm-menu-link-padding-vertical) var(--ifm-menu-link-padding-horizontal);
    line-height: 1.25;
    width: 100%;
    color: var(--ifm-menu-color);
    font-size: 1rem;
  }

  .navbar--github-link::before {
    content: 'GitHub';
    background-image: none;
  }

  [data-theme='dark'] .navbar--github-link::before {
    content: 'GitHub';
    background-image: none;
  }
}

提供两个工具网站仅供参考：

侧边栏配置​

docs 的侧边栏配置主要在 sidebars.ts 文件中

自动生成​

在 docs 目录中创建 coding/java 目录，在 sidebar.ts 文件中添加配置：

import type { SidebarsConfig } from '@docusaurus/plugin-content-docs'

const sidebars: SidebarsConfig = {
  // coding 目录下的自动生成的 Java 相关文档
  javaSidebar: [{ type: 'autogenerated', dirName: 'coding/java' }]
}

export default sidebars

修改 docusaurus.config.ts 文件：

{
  // ...
  "items": [
    {
      "type": "dropdown",
      "label": "编程语言",
      "position": "left",
      "items": [
        {
          "type": "docSidebar",
          "label": "Java",
          "sidebarId": "javaSidebar"
        }
      ]
    }
  ]
}

提示：

  • sidebarId 需要和 SidebarsConfig 中的 key 保持一致
  • type: 'autogenerated' 表示自动生成
  • 自动生成模式下 将自动根据目录和目录下的文件自动构建侧边栏

手动配置​

import type { SidebarsConfig } from '@docusaurus/plugin-content-docs'

const sidebars: SidebarsConfig = {
  // 手动配置的侧边栏
  javaSidebar: [
    {
      type: 'category',
      label: 'Java 基础',
      items: ['coding/java/intro', 'coding/java/advanced'],
    },
    {
      type: 'category',
      label: 'Java 框架',
      items: ['coding/java/spring-boot', 'coding/java/hibernate'],
    },
  ]
}

export default sidebars