创建页面

本章节中，我们会学习如何在 Docusaurus 中创建页面。

The @docusaurus/plugin-content-pages plugin empowers you to create one-off standalone pages like a showcase page, playground page, or support page. 你可以使用 React 组件，或是 Markdown。

备注

Pages do not have sidebars, only docs do.

信息

Check the Pages Plugin API Reference documentation for an exhaustive list of options.

Add a React page

React 是用于创建页面的 UI 库。 每个页面组件都应导出一个 React 组件，然后你就可以发挥 React 的表达力构建丰富的交互内容了。

Create a file /src/pages/helloReact.js:

/src/pages/helloReact.js

import React from 'react';
import Layout from '@theme/Layout';

export default function Hello() {
  return (
    <Layout title="Hello" description="Hello React Page">
      <div
        style={{
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          height: '50vh',
          fontSize: '20px',
        }}>
        <p>
          Edit <code>pages/helloReact.js</code> and save to reload.
        </p>
      </div>
    </Layout>
  );
}

保存后，开发服务器会自动刷新，呈现更改。 Now open http://localhost:3000/helloReact and you will see the new page you just created.

每个页面均没有样式。 You will need to import the Layout component from @theme/Layout and wrap your contents within that component if you want the navbar and/or footer to appear.

提示

You can also create TypeScript pages with the .tsx extension (helloReact.tsx).

Add a Markdown page

Create a file /src/pages/helloMarkdown.md:

/src/pages/helloMarkdown.md

---
title: 我的问候页面标题
description: 我的问候页面描述
hide_table_of_contents: true
---

# 你好

今天过得怎么样？

In the same way, a page will be created at http://localhost:3000/helloMarkdown.

Markdown 不如 React 页面灵活，因为它总是会用主题布局。

Here's an example Markdown page.

提示

You can use the full power of React in Markdown pages too, refer to the MDX documentation.

Routing

如果你熟悉 Jekyll 和 Next 等静态网站生成器，你就会了解这种路由方式。 Any JavaScript file you create under /src/pages/ directory will be automatically converted to a website page, following the /src/pages/ directory hierarchy. 举个例子：

• /src/pages/index.js → [baseUrl]
• /src/pages/foo.js → [baseUrl]/foo
• /src/pages/foo/test.js → [baseUrl]/foo/test
• /src/pages/foo/index.js → [baseUrl]/foo/

在这个基于组件的开发时代，我们鼓励你把样式、标记、行为都放在一个组件中。 每个页面都是组件。如果你需要使用样式自定义页面设计，我们推荐你把样式和页面组件共同放在独立的目录下。 举个例子，如果你要创建「支持」页面，你可以在下面两种方式中选择一种：

• Add a /src/pages/support.js file
• Create a /src/pages/support/ directory and a /src/pages/support/index.js file.

我们推荐后者，这样你可以把和页面相关的文件都放在这个文件夹里。 For example, a CSS module file (styles.module.css) with styles meant to only be used on the "Support" page.

备注

This is merely a recommended directory structure, and you will still need to manually import the CSS module file within your component module (support/index.js).

By default, any Markdown or JavaScript file starting with _ will be ignored and no routes will be created for that file (see the exclude option).

my-website
├── src
│   └── pages
│       ├── styles.module.css
│       ├── index.js
│       ├── _ignored.js
│       ├── _ignored-folder
│       │   ├── Component1.js
│       │   └── Component2.js
│       └── support
│           ├── index.js
│           └── styles.module.css
.

警告

All JavaScript/TypeScript files within the src/pages/ directory will have corresponding website paths generated for them. If you want to create reusable components into that directory, use the exclude option (by default, files prefixed with _, test files(.test.js), and files in __tests__ directory are not turned into pages).

Duplicate Routes

你可能会不小心创建映射到同一路由的多个页面。 When this happens, Docusaurus will warn you about duplicate routes when you run yarn start or yarn build (behavior configurable through the onDuplicateRoutes config), but the site will still be built successfully. 你只能访问最后创建的页面，而其他的冲突页面会被覆盖。 要解决此问题，你需要编辑或移除重复的路由。