Skip to main content

· 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: /mySlugslug: /...

相对路径:slug: mySlugslug: ./../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/) 搭建。

· One min read
Sébastien Lorber
Yangshun Tay

Docusaurus blogging features are powered by the blog plugin.

Simply add Markdown files (or folders) to the blog directory.

Regular blog authors can be added to authors.yml.

The blog post date can be extracted from filenames, such as:

  • 2019-05-30-welcome.md
  • 2019-05-30-welcome/index.md

A blog post folder can be convenient to co-locate blog post images:

Docusaurus Plushie

The blog supports tags as well!

And if you don't want a blog: just delete this directory, and use blog: false in your Docusaurus config.

· One min read
Gao Wei

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet