跳转至主内容
Version: 2.0.0-beta.10 🚧

创建页面

本章节中,您将学到如何在 Docusaurus 内创建页面。

此方法适合创建单次使用的独立页面,如展示页、代码沙盒或试用页及支持页。

页面功能由 @docusaurus/plugin-content-pages 驱动。

您可使用 React 组件,或是 Markdown。

note

页面没有侧边栏,仅有文档会有。

信息

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

添加 React 页面

创建文件 /src/pages/helloReact.js

/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>
Edit <code>pages/helloReact.js</code> and save to reload.
</p>
</div>
</Layout>
);
}

export default Hello;

保存后,开发服务器将为您自动刷新以呈现更改。 打开 http://localhost:3000/helloReact,您将看到刚刚创建的新页面。

每个页面均没有样式。 您需要从 @theme/Layout 中导入 Layout 组件。若您需要导航栏,且/或需要显示页脚,请将您的内容包裹于此组件中.

tip

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

添加 Markdown 页面

创建文件 /src/pages/helloMarkdown.md

/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 startyarn build 时提醒您存在重复路由,但此时网站仍能构建成功。 您只能访问最后创建的页面,而其他的冲突页面将被覆盖。 要解决此问题,您应该编辑或移除重复的路由。