此系列文章的应用示例已发布于 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.jsusers.jshelp.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.jsrender 函数改为返回 null。 例如:

const React = require("react");class Footer extends React.Component {render() {return null;}
}module.exports = Footer;

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

Facebook Docusaurus 中文文档 自定义页面相关推荐

  1. Facebook Docusaurus 中文文档 安装指南

    此系列文章的应用示例已发布于 GitHub: docusaurus-docs-Zh_CN. 可以 Fork 帮助改进或 Star 关注更新. 欢迎 Star. 安装指南 Docusaurus 是从全新 ...

  2. Springboot 中文文档 —— Actuator

    文章目录 1 **启用** 2 **端点(endpoints)** 2.1 启用端点 2.2 公开端点 2.3 保护HTTP端点 2.4 配置端点缓存 2.5 配置 /actuator 路径 2.6 ...

  3. Spring 系列框架的中文文档

    现在互联网上的 Spring 框架相关的中文文档基本上都是机器翻译,内容晦涩难懂且常年未更新.例如,像 spring-security 等这种概念繁多,体系复杂的技术,对于新手来说,没有优质的技术文档 ...

  4. React + webpack 开发单页面应用简明中文文档教程(一)一些基础概念

    React + webpack 开发单页面应用简明中文文档教程(一)一些基础概念 React 入门系列教程导航 React + webpack 开发单页面应用简明中文文档教程(一)一些基础概念 Rea ...

  5. perfect-scrollbar 一个全浏览器适用的自定义scrollbar,使用方法 中文文档

    在开发过程中为了保持界面样式的一致性,需要自定义scrollbar的样式,可是只有chrome可以定义样式,IE只能设置颜色,火狐是直接不可以设置,于是就找了这个库,它是github开源的,但没有中文 ...

  6. Spring Security中文文档

    Spring Security中文文档 来源:https://www.springcloud.cc/spring-security.html#overall-architecture 作者 Ben A ...

  7. 【翻译】fancyBox3 中文文档

    fancyBox3 中文文档 译文永久地址:kangkai124.github.io/fancybox/ 说明:本文档仅供参考,更新不及时请查看官方文档 1. 介绍 fancyBox 是一个 Java ...

  8. source insight3.5显示中文_Doxygen 中文文档

    Doxygen 中文文档 原文:http://doxygen.nl/manual 本文档摘取重点进行了介绍. Getting started doxygen是解析源文件和生成文档的主要程序.详细使用方 ...

  9. Juicer 中文文档

    Juicer 中文文档 当前最新版本: 0.6.8-stable Juicer 是一个高效.轻量的前端 (Javascript) 模板引擎,使用 Juicer 可以是你的代码实现数据和视图模型的分离( ...

最新文章

  1. iPhone开发技巧之工具篇(4)--- 使用afconvert转换WAV文件
  2. [LeetCode]题解(python):150-Evaluate Reverse Polish Notation
  3. 网络抖动多少ms算正常_男性身高175,体重多少算正常?对照公式算一下,你达标了吗?...
  4. Xamarin Essentials教程屏幕状态DeviceDisplay
  5. GIVE_A_TRY.exe 逆向(NCK逆向初级第9,10,11课作业)
  6. 【算法知识】详解基数排序算法
  7. Altera的几个常用的Synthesis attributes(转载)
  8. #pragma code_seg(INIT)/code_seg(PAGE)
  9. 电脑时间校对器_笔记本电脑如何保养?华为教你五招轻松延长使用时间
  10. android 编译 sdl,SDL编译 - Android本地视频播放器开发_Linux编程_Linux公社-Linux系统门户网站...
  11. 推荐几个顶级的IT技术公众号
  12. .NET应用服务器(中间件)来到
  13. 初中节点法分析电路_初三物理电路图解题思路:电路简化原理
  14. Mysql 8踩坑之1054(42S22):Unkown column ‘password‘ in ‘field list‘ 与1251- Client deos not support authen
  15. 怎样设置公众号自动回复
  16. [敏捷开发培训] 构建Agile MVP
  17. 三、E906移植----FPGA生成可用的比特流并实现串口发送
  18. 打印100以内的质数
  19. Latex模板排版等相关设置
  20. File 和 InputStream, OutputStream 的用法

热门文章

  1. [置顶] 贝叶斯分类(一)
  2. window连接不上linux ftp_Linux文件自动备份方案
  3. [ERR] Not all 16384 slots are covered by nodes.
  4. win10 uwp DataContext
  5. mysql更新一个表里的字段等于另一个表某字段的值
  6. C++ Builder技巧集锦
  7. 【转】激活 ActiveX 控件
  8. Linux下Mysql的基本操作
  9. 使用OpenCV进行人脸识别的三种方法
  10. 传说中的贝叶斯统计到底有什么来头?