Docusaurus 上手总结

Docusaurus 是一个静态网站生成器。它使用快速的客户端导航构建单页面应用程序，并充分利用 React 的全部功能使你的网站具有互动性。它提供开箱即用的文档功能，但也可以用来创建任何类型的网站（个人网站、产品展示、博客、营销页面等）。

使用

初始化项目，并安装主题 classic

npx create-docusaurus@latest my-website classic

启动

npx docusaurus start

创建页面

classic 主题已经配置了相应插件，提供了3种页面类型

• blog
• docs
• src/pages

示例内容目录树参考

blog
├── 2019-05-28-first-blog-post.md
├── 2019-05-29-long-blog-post.md
├── 2021-08-01-mdx-blog-post.mdx
├── 2021-08-26-welcome
│   ├── docusaurus-plushie-banner.jpeg
│   └── index.md
└── authors.yml

docs
├── intro.md
├── tutorial-basics
│   ├── _category_.json
│   ├── congratulations.md
│   ├── create-a-blog-post.md
│   ├── create-a-document.md
│   ├── create-a-page.md
│   ├── deploy-your-site.md
│   └── markdown-features.mdx
├── tutorial-extras
│   ├── _category_.json
│   ├── img
│   │   ├── docsVersionDropdown.png
│   │   └── localeDropdown.png
│   ├── manage-docs-versions.md
│   └── translate-your-site.md
└── 总结.md

src/pages
├── blank.js
├── helloReact.js
├── index.js
├── index.module.css
└── markdown-page.md

配置

...

Reack-live Test

实时编辑器

function Clock(props) { const [date, setDate] = useState(new Date()); useEffect(() => { const timerID = setInterval(() => tick(), 1000); return function cleanup() { clearInterval(timerID); }; }); function tick() { setDate(new Date()); } return ( <div> <h2>It is {date.toLocaleTimeString()}.</h2> </div> ); }

function Clock(props) {
  const [date, setDate] = useState(new Date());
  useEffect(() => {
    const timerID = setInterval(() => tick(), 1000);

    return function cleanup() {
      clearInterval(timerID);
    };
  });

  function tick() {
    setDate(new Date());
  }

  return (
    <div>
      <h2>It is {date.toLocaleTimeString()}.</h2>
    </div>
  );
}

结果

Loading...