创建页面
本章节中，您将学到如何在 Docusaurus 内创建页面。
此方法适合创建单次使用的独立页面，如展示页、代码沙盒或试用页及支持页。
页面功能由 @docusaurus/plugin-content-pages 驱动。
您可使用 React 组件，或是 Markdown。
note
页面没有侧边栏，仅有文档会有。
添加 React 页面#
创建文件 /src/pages/helloReact.js：
import React from 'react';import Layout from '@theme/Layout';
function Hello() { return ( <Layout title="Hello"> <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh', fontSize: '20px', }}> <p> 编辑 <code>pages/hello.js</code> 并保存以刷新。 </p> </div> </Layout> );}
export default Hello;保存后，开发服务器将为您自动刷新以呈现更改。 打开 http://localhost:3000/helloReact，您将看到刚刚创建的新页面。
每个页面均没有样式。 您需要从 @theme/Layout 中导入 Layout 组件。若您需要导航栏，且/或需要显示页脚，请将您的内容包裹于此组件中.
tip
您也可以创建扩展名为 .tsx 的 TypeScript 组件（helloReact.tsx）。
添加 Markdown 页面#
创建文件 /src/pages/helloMarkdown.md：
---title: 我的你好页面标题description: 我的你好页面描述hide_table_of_contents: true---
# 你好
今天过得怎么样？同样，新页面将创建在 http://localhost:3000/helloMarkdown 上。
Markdown 比 React 页面更不灵活，这是因为它总是使用主题布局。
这里是一个Markdown 页面示例。
tip
您也可以在 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 选项）。
我的网站├── src│ └── pages│ ├── styles.module.css│ ├── index.js| ├──_ignored.js│ └── support│ ├── index.js│ └── styles.module.css.caution
Docusaurus 将自动为 src/pages/ 内的所有 JavaScript/TypeScript 文件生成相应的网站路径。 若您想要在此文件夹中创建可复用的组件，请使用 exclude 选项（默认情况下，以 _ 开头的文件、测试文件（.test.js）和 __tests__ 目录内的文件将不会转换至页面）。
使用 React#
React 是用于创建页面的 UI 库。 每个页面组件都应导出一个 React 组件，您因而可以站在 React 的肩膀上构建丰富的交互内容。
重复路由#
您可能会不经意间创建映射到同一路由的多个页面。 发生这种情况时，Docusaurus 将在您运行 yarn start 或 yarn build 时提醒您存在重复路由，但此时网站仍能构建成功。 您只能访问最后创建的页面，而其他的冲突页面将被覆盖。 要解决此问题，您应该编辑或移除重复的路由。