此系列文章的应用示例已发布于 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.
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。