创建页面

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

@docusaurus/plugin-content-pages 插件使您能够创建一次性独立页面，例如展示页面、游乐场页面或支持页面。您可以使用 React 组件或 Markdown。

添加一个React页面​

React 被用作创建页面的 UI 库。每个页面组件都应导出一个 React 组件，你可以利用 React 的表现力来构建丰富且交互性强的内容。

创建一个文件 /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>
  );
}

一旦你保存了文件，开发服务器将自动重新加载更改。现在打开http://localhost:3000/helloReact，你将看到你刚刚创建的新页面。

每个页面都没有自带任何样式。如果你希望导航栏和/或页脚出现，你需要从@theme/Layout导入Layout组件，并将你的内容包裹在该组件内。

添加一个Markdown页面​

创建一个文件 /src/pages/helloMarkdown.md:

---
title: my hello page title
description: my hello page description
hide_table_of_contents: true
---

# Hello

How are you?

同样地，一个页面将在http://localhost:3000/helloMarkdown创建。

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

这里有一个示例Markdown页面。

路由​

如果你熟悉其他静态网站生成器，如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），其样式仅用于“支持”页面。

默认情况下，任何以_开头的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 在您运行 yarn start 或 yarn build 时会警告您有关重复路由的问题（行为可通过 onDuplicateRoutes 配置进行调整），但站点仍将成功构建。最后创建的页面将可访问，但它将覆盖其他冲突的页面。要解决此问题，您应修改或删除任何冲突的路由。