Skip to main content

Docusaurus

目录结构#

  • /
    • blog
    • docs
    • src
      • theme
      • css
        • custom.css
      • pages
        • styles.module.css
        • index.js
    • static/
      • img/
    • docusaurus.config.js
    • package.json
    • sidebars.js
# [name] [template]# @docusaurus/preset-classic# @docusaurus/preset-bootstrapnpx @docusaurus/[email protected] init my-website classic

Docs#

# 默认为文件名id: doc-markdown# 也支持 slug 控制 - 但一般不用# slug: part1.html# 默认为 idtitle: Markdown Features# hide_title 是否隐藏顶部标题 - 如果 markdown 本身包含了 title 可以考虑隐藏hide_title: false# 隐藏目录hide_table_of_contents: false# 默认为 title - 显示在左侧 sidebar 和上下文章位置sidebar_label: Markdown :)# 编辑地址 - 默认 editUrl 传递给 docusaurus-plugin-content-docs 插件custom_edit_url: https://github.com/facebook/docusaurus/edit/master/docs/api-doc-markdown.md# 描述信息 - <meta name="description" content="..."/> <meta property="og:description" content="..."/># 默认为内容第一行description: How do I find you when I cannot solve this problemkeywords:  - docs  - docusaurus# thumbnailimage: https://i.imgur.com/mErPwqL.png

支持提示信息#

note

The content and title can include markdown.

自定义标题

Heads up! Here's a pro-tip.

info

Useful information.

caution

Warning! You better pay attention!

danger

Danger danger, mayday!

代码块支持标题#

/src/components/HelloCodeTitle.js
function HelloCodeTitle(props) {  // Hello there  return <h1>Hello, {props.name}</h1>;}

Mermaid#

yarn add mermaid
src/theme/Mermaid.js
import React, { useEffect } from 'react';import mermaid from 'mermaid';
mermaid.initialize({  startOnLoad: true,});
const Mermaid = ({ chart }) => {  useEffect(() => {    mermaid.contentLoaded();  }, []);  return <div className="mermaid">{chart}</div>;};
export default Mermaid;
doc.md
import Mermaid from '@theme/Mermaid';
<Mermaid  chart={`  graph LR;    A-->B;    B-->C;    B-->D[plop lanflz eknlzeknfz];`}/>
graph LR; A-->B; B-->C; B-->D[plop lanflz eknlzeknfz];