Facebook Docusaurus 中文文檔 自定義頁面

此係列文章的應用示例已發佈於 GitHub: docusaurus-docs-Zh_CN. 能夠 Fork 幫助改進或 Star 關注更新. 歡迎 Star.

自定義頁面

您能夠將網頁添加到您的網站，而不是做爲標準文檔或博客 markdown 文件的一部分。 你能夠經過在 website/pages 目錄中添加 .js 文件來實現。 這些文件是 React 組件，並調用 render() 來建立它們，由CSS類等支持。

自定義主頁

開始自定義主頁的最簡單方法是使用運行 Docusaurus 初始化腳本 時 建立 的示例網站。

你能夠 啓動 你的本地服務器並跳轉到 http://localhost:3000 來查看示例主頁的樣子。 從那裏，編輯 website/pages/en/index.js 文件及其各個組件以使用您想要的項目的圖像和文本。

添加其它自定義頁面

Docusaurus 在 website/pages/en 目錄中提供了一些簡單的示例頁面，包括 index.js，users.js 和 help.js。 這些是展現如何爲 Docusaurus 建立自定義頁面的很好的例子。

root-of-repo
├── docs
└── website
│   └── blog
│   └── core
│       └── Footer.js
│   └── node_modules
│   └── package.json
│   └── pages
│       └── index.js
│       └── users.js
│       └── help.js
│   └── sidebars.json
│   └── siteConfig.js
│   └── static

固然，你也能夠自由地寫你本身的網頁。 強烈建議您至少有一個索引頁面，而沒有提供的頁面是強制性的以包含在您的網站中。 有關如何使用提供的組件或包括您本身的更多信息能夠在這裏找到。 有關如何連接到頁眉導航欄中的不一樣頁面的信息能夠在這裏找到。

若是你想讓你的頁面顯示在你的導航頭文件中，你須要更新 siteConfig.js 來添加到 headerLinks 元素。 例如 { page: "about-slash", label: "About/"}

添加靜態頁面

也可使用靜態 .html 文件，但默認狀況下，它們不包括 Docusaurus 的頁眉，頁腳或樣式。 這些能夠像其餘 靜態資源 同樣添加到 static 文件夾中。 或者，它們能夠放在 pages 文件夾中，而不是從 React 中渲染。

若是你想使用 Docusaurus 的樣式表，你能夠在 ${baseUrl}css/main.css 中訪問它。 若是你想爲這些靜態頁面使用單獨的 css，你能夠經過將它們添加到 siteConfig.js 中的 siteConfig.separateCss 字段來排除它們與 Docusaurus 的樣式的關聯。

自定義網站頁腳

從運行 Docusaurus 初始化腳本 時 建立 的示例 core/Footer.js 文件開始，編輯頁腳以包含您網站上的任何連接或其餘您但願擁有的網站。

所提供的示例有三列，左側有一個頁腳圖像，Facebook 的開放源代碼標識和版權在底部。 若是您的項目不是 Facebook 開源項目，請刪除徽標和版權。 固然，您也能夠隨意創造頁腳，讓它看起來成爲您想要的樣子！

可能提供的連接的一些建議：Docs，API，Twitter，Discord，Facebook groups，Stack Overflow，GitHub等

您的頁腳將自動應用到您網站上的全部頁面，包括文檔和博客文章。 惟一的例外是你所包含的任何靜態 html 頁面。

若是你不想爲你的站點添加頁腳，把 core/Footer.js 的 render 函數改成返回 null。 例如:

const React = require("react");

class Footer extends React.Component {
  render() {
    return null;
  }
}

module.exports = Footer;

此係列文章的應用示例已發佈於 GitHub: docusaurus-docs-Zh_CN. 能夠 Fork 幫助改進或 Star 關注更新. 歡迎 Star.