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.
相關文章
相關標籤/搜索