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/) 搭建。
