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

创建页面

本章节中,您将学到如何在 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。

note

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

信息

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

添加 React 页面

React 是用于创建页面的 UI 库。 Every page component should export a React component, and you can leverage the expressiveness of React to build rich and interactive content.

创建文件 /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.

每个页面均没有样式。 您需要从 @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 pages are less flexible than React pages because it always uses the theme layout.

这里是一个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/

In this component-based development era, it is encouraged to co-locate your styling, markup, and behavior together into components. 每个页面都是组件。若您需要使用样式自定义页面设计,我们推荐您将样式和页面组件共同放在独立的目录下。 举个例子,假设您要创建 "支持" 页面,您可以任选一种方式:

  • 添加 /src/pages/support.js 文件
  • 创建 /src/pages/support/ 目录及 /src/pages/support/index.js 文件

我们推荐后者,这样您可将页面的相关文件放入此文件夹中。 举例而言,假设存在仅用于 "支持" 页面的 CSS 模块文件(styles.module.css)。

note

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
.
caution

Docusaurus 将自动为 src/pages/ 内的所有 JavaScript/TypeScript 文件生成相应的网站路径。 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).

重复路由

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