Skip to main content

learn docusaurus

· 4 min read

添加 Markdown 页面​

/src/pages/helloMarkdown.md

---
title: 我的问候页面标题
description: 我的问候页面描述
hide_table_of_contents: true
---

创建文档​

设置id以及打tags​

---
id: doc-with-tags
title: 一篇包含标签的文档
tags:
  - 演示
  - 开始上手
---

文档 URL​

---
slug: /bonjour
---

Lorem ipsum

你可以使用：

绝对路径：slug: /mySlug、slug: /...

相对路径：slug: mySlug、slug: ./../mySlug...

侧边栏​

sidebars.js
type SidebarItemDoc =
  // 普通语法
  | {
      type: 'doc';
      id: string;
      label: string; // 侧边栏标签文本
      className?: string; // 侧边栏标签类名
      customProps?: Record<string, unknown>; // 自定义属性
    }

  // 简写语法
  | string; // 文档 ID 简写

如果你用了文档简写，或者自动生成侧边栏，你就不能通过侧边栏项的定义来自定义侧边栏标签了。 然而，你可以在这篇文档中使用 sidebar_label Markdown 前言。它会优先于侧边栏项目中的 label 字段。 类似地，你可以用 sidebar_custom_props 来声明文档页面的自定义元数据。

Category - 创建分类层级​

sidebars.js
module.exports = {
  docs: [
    {
      type: 'category',
      label: 'Guides',
      collapsible: true,
      collapsed: false,
      items: [
        'creating-pages',
        {
          type: 'category',
          label: 'Docs',
          items: ['introduction', 'sidebar', 'markdown-features', 'versioning'],
        },
      ],
    },
  ],
};

生成索引页 你可以自动生成一个索引页，显示此类别的所有直接子项。 slug 允许你自定义生成页面的路径，默认为 /category/[类别名]。

sidebars.js
module.exports = {
  docs: [
    {
      type: 'category',
      label: '教程',
      link: {
        type: 'generated-index',
        title: 'Docusaurus 教程',
        description: '学习最重要的 Docusaurus 概念！',
        slug: '/category/docusaurus-guides',
        keywords: ['guides'],
        image: '/img/docusaurus.png',
      },
      items: ['pages', 'docs', 'blog', 'search'],
    },
  ],
};

在文档页面中嵌入生成索引​

你可以通过 DocCardList 组件，在普通的文档页中也嵌入自动生成的卡片列表。 它会显示当前文档所属类别的所有侧边栏项目。

docs/sidebar/index.md
import DocCardList from '@theme/DocCardList';

<DocCardList />

自动生成侧边栏元数据​

label、className、customProps 属性在前言中声明，对应的字段分别是 sidebar_label、sidebar_class_name、sidebar_custom_props。 相对位置可以用一样的方法声明，也就是 sidebar_position 前言。

docs/tutorials/tutorial-easy.md
---
sidebar_position: 2
sidebar_label: 简单
sidebar_class_name: green
---

# 简单教程

这里是简单教程！

博客​

初始设置​

要为你的站点设置博客，请先创建 blog 目录。

然后，在 docusaurus.config.js 内创建指向你的博客的链接项。

docusaurus.config.js

module.exports = {
  themeConfig: {
    // ...
    navbar: {
      items: [
        // ...
        {to: 'blog', label: '博客', position: 'left'}, // 或 position: 'right'
      ],
    },
  },
};

新建帖子​

website/blog/2019-09-05-hello-docusaurus-v2.md
---
title: 欢迎来到 Docusaurus v2
description: 这是我关于 Docusaurus 2 的第一篇博文。
slug: welcome-docusaurus-v2
authors:
  - name: Joel Marcey
    title: Docusaurus 1 合作创造者
    url: https://github.com/JoelMarcey
    image_url: https://github.com/JoelMarcey.png
  - name: Sébastien Lorber
    title: Docusaurus 维护者
    url: https://sebastienlorber.com
    image_url: https://github.com/slorber.png
tags: [hello, docusaurus-v2]
image: https://i.imgur.com/mErPwqL.png
hide_table_of_contents: false
---

欢迎来到本博客。 此博客使用 [**Docusaurus 2**](https://docusaurus.io/) 搭建。

<!--truncate-->

这是我在 Docusaurus 2 上的首篇博文。

下方是一系列内容。