版本：Canary 🚧

创建页面

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

@docusaurus/plugin-content-pages 插件允许你创建独立页面，比如案例展示页面、实时演示页面，或是支持页面。你可以使用 React 组件，或是 Markdown。

备注

Pages do not have sidebars, only docs do.

信息

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

添加 React 页面

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

创建文件 /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>
          修改 <code>pages/helloReact.js</code>，然后保存，页面会重载。
        </p>
      </div>
    </Layout>
  );
}

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

每个页面均没有样式。如果你想要显示导航栏、页脚等，需要从 @theme/Layout 中导入 Layout 组件，然后把你的内容用这个组件包裹。

提示

你也可以创建扩展名为 .tsx 的 TypeScript 组件 (helloReact.tsx)。

添加 Markdown 页面

创建文件 /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 页面灵活，因为它总是会用主题布局。

这里是一个 Markdown 页面示例。

提示

你也可以在 Markdown 页面中发挥 React 的全部功能，具体请参阅 MDX 文档。

路由

如果你熟悉 Jekyll 和 Next 等静态网站生成器，你就会了解这种路由方式。在 /src/pages/ 目录下所创建的任何 JavaScript 文件都会自动转换为网页，网站结构与 /src/pages/ 的目录结构一致。举个例子：

/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/

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

新建一个 /src/pages/support.js 文件
新建 /src/pages/support/ 目录及 /src/pages/support/index.js 文件

我们推荐后者，这样你可以把和页面相关的文件都放在这个文件夹里。比如说仅用于「支持」页面的 CSS 模块文件 (styles.module.css)。

备注

这只是推荐的项目结构。你仍需要在组件模块 (support/index.js) 里手动导入 CSS 模块文件。

默认情况下，以 _ 开头的任何 Markdown 或 Javascript 文件都会被忽略，也不会为其生成任何路由（参见 exclude 选项）。

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

注意

Docusaurus 会自动为 src/pages/ 内的所有 JavaScript/TypeScript 文件生成相应的网站路径。如果你想要在这个文件夹中创建可复用的组件，请使用 exclude 选项（默认情况下，以 _ 开头的文件、测试文件 (.test.js) 和 __tests__ 目录内的文件不会被转换成页面）。

重复路由

你可能会不小心创建映射到同一路由的多个页面。发生这种情况时，Docusaurus 会在运行 yarn start 或 yarn build 时提醒你存在重复路由，但此时网站仍然能构建成功。你只能访问最后创建的页面，而其他的冲突页面会被覆盖。要解决此问题，你需要编辑或移除重复的路由。

创建页面

添加 React 页面​

添加 Markdown 页面​

路由​

重复路由​

添加 React 页面

添加 Markdown 页面

路由

重复路由