此系列文章的應用示例已發(fā)布于 GitHub: docusaurus-docs-Zh_CN. 可以 Fork 幫助改進或 Star 關注更新. 歡迎 Star.

自定義頁面

您可以將網(wǎng)頁添加到您的網(wǎng)站，而不是作為標準文檔或博客 markdown 文件的一部分。 你可以通過在 website/pages 目錄中添加 .js 文件來實現(xiàn)。 這些文件是 React 組件，并調(diào)用 render() 來創(chuàng)建它們，由CSS類等支持。

自定義主頁

開始自定義主頁的最簡單方法是使用運行 Docusaurus 初始化腳本 時 創(chuàng)建 的示例網(wǎng)站。

你可以 啟動 你的本地服務器并跳轉(zhuǎn)到 http://localhost:3000 來查看示例主頁的樣子。 從那里，編輯 website/pages/en/index.js 文件及其各個組件以使用您想要的項目的圖像和文本。

添加其它自定義頁面

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

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

當然，你也可以自由地寫你自己的網(wǎng)頁。 強烈建議您至少有一個索引頁面，而沒有提供的頁面是強制性的以包含在您的網(wǎng)站中。 有關如何使用提供的組件或包括您自己的更多信息可以在這里找到。 有關如何鏈接到頁眉導航欄中的不同頁面的信息可以在這里找到。

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

添加靜態(tài)頁面

也可以使用靜態(tài) .html 文件，但默認情況下，它們不包括 Docusaurus 的頁眉，頁腳或樣式。 這些可以像其他 靜態(tài)資源 一樣添加到 static 文件夾中。 或者，它們可以放在 pages 文件夾中，而不是從 React 中渲染。

如果你想使用 Docusaurus 的樣式表，你可以在 ${baseUrl}css/main.css 中訪問它。 如果你想為這些靜態(tài)頁面使用單獨的 css，你可以通過將它們添加到 siteConfig.js 中的 siteConfig.separateCss 字段來排除它們與 Docusaurus 的樣式的關聯(lián)。

自定義網(wǎng)站頁腳

從運行 Docusaurus 初始化腳本 時 創(chuàng)建 的示例 core/Footer.js 文件開始，編輯頁腳以包含您網(wǎng)站上的任何鏈接或其他您希望擁有的網(wǎng)站。

所提供的示例有三列，左側(cè)有一個頁腳圖像，Facebook 的開放源代碼標識和版權(quán)在底部。 如果您的項目不是 Facebook 開源項目，請刪除徽標和版權(quán)。 當然，您也可以隨意創(chuàng)造頁腳，讓它看起來成為您想要的樣子！

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

您的頁腳將自動應用到您網(wǎng)站上的所有頁面，包括文檔和博客文章。 唯一的例外是你所包含的任何靜態(tài) html 頁面。

如果你不想為你的站點添加頁腳，把 core/Footer.js 的 render 函數(shù)改為返回 null。 例如:

const React = require("react");class Footer extends React.Component {render() {return null;} }module.exports = Footer; 此系列文章的應用示例已發(fā)布于 GitHub: docusaurus-docs-Zh_CN. 可以 Fork 幫助改進或 Star 關注更新. 歡迎 Star.

總結(jié)

以上是生活随笔為你收集整理的Facebook Docusaurus 中文文档 自定义页面的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。