Facebook Docusaurus 中文文档 准备网站

此系列文章的应用示例已发布于 GitHub: docusaurus-docs-Zh_CN. 能够 Fork 帮助改进或 Star 关注更新. 欢迎 Star.

准备网站

安装 Docusaurus 以后,您如今有一个框架能够为您特定的网站工做。 经过一些更改,您能够经过在本地运行网站来验证 Docusaurus 是否已正确安装。html

目录结构

如安装 Docusaurus 以后所示,初始化脚本建立了一个相似于如下内容的目录结构:node

root-of-repo
├── docs-examples-from-docusaurus
│   └── doc1.md
│   └── doc2.md
│   └── doc3.md
│   └── exampledoc4.md
│   └── exampledoc5.md
└── website
│   └── blog-examples-from-docusaurus
│       └── 2016-03-11-blog-post.md
│       └── 2017-04-10-blog-post-two.md
│   └── core
│       └── Footer.js
│   └── node_modules
│   └── package.json
│   └── pages
│   └── sidebars.json
│   └── siteConfig.js
│   └── static
  • website/core/Footer.js 文件是一个 React 组件,充当 Docusaurus 生成的网站的页脚,应该由用户自定义。
  • website/blog-examples-from-docusaurus 文件夹包含用 markdown 编写的博客文章的例子。
  • docs-examples-from-docusaurus 文件夹包含用 markdown 编写的示例文档文件。
  • website/pages 文件夹包含该网站的示例顶级页面。
  • website/static 文件夹包含示例网站使用的静态资源。
  • website/siteConfig.js 文件是 Docusaurus 使用的主要配置文件。

你须要保留 website/siteConfig.jswebsite/core/Footer.js 文件,可是能够随意编辑它们。git

你应该保留 website/pageswebsite/static 文件夹,但能够如你所愿的改变其内容。 最低限度,你应该有一个在 website/pages 内的 en/index.jsen/index.html 文件和一个图像用做 website/static 内的标题图标。github

website/blog-examples-from-docusaurusdocs-examples-from-docusaurus 文件夹包含示例博客和文档的 markdown 文件。 以下文所示,当您确认示例网站正确运行时,若是您但愿使用这些文件运行 Docusaurus,则须要分别将文件夹重命名为website/blogdocsweb

验证安装

运行 Docusaurus 初始化脚本 docusaurus-init 后,会生成一个可运行的示例网站,以此为基础开发您的网站。npm

  1. 在根目录, 重命名 docs-examples-from-docusaurusdocs.
  2. cd website
  3. 重命名 blog-examples-from-docusaurusblog.
  4. 经过 yarn startnpm start 运行本地 web 服务器.
  5. 经过 http://localhost:3000 访问示例网站。 你应该看到浏览器加载的示例网站。

此系列文章的应用示例已发布于 GitHub: docusaurus-docs-Zh_CN. 能够 Fork 帮助改进或 Star 关注更新. 欢迎 Star.
相关文章
相关标签/搜索