Docusaurus 使用文档

文档地址：https://docusaurus.io/zh-CN/docs

一. 安装

node 版本 18.0 或者更高版本

二.使用脚手架生成站点

npx create-docusaurus@latest my-website classic  --typescript

四. 项目结构

my-website
├── blog ### 博客目录
│   ├── 2019-05-28-hola.md
│   ├── 2019-05-29-hello-world.md
│   └── 2020-05-30-welcome.md
├── docs ### 文档目录
│   ├── doc1.md
│   ├── doc2.md
│   ├── doc3.md
│   └── mdx.md
├── src
│   ├── css
│   │   └── custom.css
│   └── pages
│       ├── styles.module.css
│       └── index.js
├── static
│   └── img
├── docusaurus.config.js
├── package.json
├── README.md
├── sidebars.js
└── yarn.lock

注意📢：如果不想使用blog 和 docs 目录的情况下可以删除掉并且使用自定义页面路由的方式新建页面

五. 运行

cd my-website
yarn start

六. 新建自定义页面

1.使用第三方组件

例如新建src/pages/navigation/index.tsx页面

import React from 'react';
import Layout from '@theme/Layout'; 

export default function Navigation() {
  return (
    <Layout title="导航">
      Hello
    </Layout>
  );
}

2.使用md文档自定义页面

例如新建src/pages/navigation/index.md 文件

# My Markdown page

This is a Markdown page

启动项目，之后在http://localhost:3000/navigation就可以看到自己的导航页面了。自定义的页面没有自带网站布局样式，所以从@theme/Layout中导入Layout组件，使用网站统一的导航栏、页脚等。

然后在Layout 或者 index.md内编写自己的内容就好了。

将新页面添加到导航栏

修改docusaurus.config.js，添加自定义页面的路由。

...
const config = {
  ...
  themeConfig:
    ({
      navbar: {
        ...
        items: [
          {to: '/blog', label: 'Blog', position: 'left'},
          {type: 'doc', docId: 'intro', position: 'left', label: 'Docs'},
          // highlight-start
          {
            to: '/navigation',
            position: 'left',
            label: '导航',
          },
          // highlight-end
          {href: 'https://github.com/ddupg', label: 'GitHub', position: 'right'},
        ],
      },
      ...
    }),
};

再刷新页面，导航栏上就会出现自定义的页面了。