Custom Pages · Docusaurus

You can add pages to your site that are not part of the standard docs or blog markdown files. You can do this by adding .js files to the website/pages directory. These files are React components and the render() is called to create them, backed by CSS classes, etc.

自定义您的主页

The easiest way to get started customizing your home page is to use the example site that was created when you ran the Docusaurus initialization script.

You can start your local server and go to http://localhost:3000 to see what the example home page looks like. 在那里，编辑website/pages/en/index.js文件以及它的各种组件来使用你的这个项目需要用到的图像和文本。

加入其它自定义页面

Docusaurus provides some helpful example pages in the website/pages/en directory, including index.js, users.js, and help.js. These are good examples to showcase how to create a custom page for Docusaurus.

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

You are also free to write your own pages. It is strongly suggested that you at least have an index page, but none of the pages provided are mandatory to include in your site. 有关如何使用提供的组件或包含您自己的部件的详细信息, 可在的处找到。有关如何链接到页眉导航栏中的不同页面的信息, 请的处找到。

If you want your page to show up in your navigation header, you will need to update siteConfig.js to add to the headerLinks element. e.g., { page: 'about-slash', label: 'About/' },

添加静态页面

Static .html files can also be used, but they will not include Docusaurus' header, footer, or styles by default. These can be added to the static directory in the same way as other static assets. Alternatively, they can be placed in the pages directory and would be served as-is instead of being rendered from React.

If you wish to use Docusaurus' stylesheet, you can access it at ${baseUrl}css/main.css. If you wish to use separate CSS for these static pages, you can exclude them from being concatenated to Docusaurus' styles by adding them into the siteConfig.separateCss field in siteConfig.js.

You can set the $wrapPagesHTML site config option in order to wrap raw HTML fragments with the Docusaurus site styling, header and footer.

自定义您的页脚

Starting from the example core/Footer.js file that was created when you ran the Docusaurus initialization script, edit the footer to include any links to pages on your site or other sites that you wish to have.

提供的例子有三部分, 左侧有页脚图像, 底部有Facebook 的开源标志和版权。如果您的项目不是 Facebook 开源项目, 请删除标志和版权。如果它是facebook的开源项目, 你就可以随意的使用你的页脚, 把它设计成任何你喜欢的样子！

一些建议你可能需要提供的链接: 文档, API （应用程序编程接口）, 推特, Discord（一种聊天软件）, facebook群组, Stack Overflow（一个IT技术问答网站）, GitHub（一个开源项目托管平台）等。

Your footer will automatically get applied to all pages on your site, including docs and blog posts. The sole exception to this is any static HTML pages you include.

If you do not want a footer for your site, change the render function of core/Footer.js to return null. e.g.,

const React = require('react');

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

module.exports = Footer;