跳到主要内容

创建页面

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

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

备注

页面没有侧边栏,只有 文档 才有。

信息

查看 页面插件 API 参考文档 以获取所有选项的详尽列表。

添加 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>
);
}

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

每个页面都没有任何样式。如果您希望显示导航栏和/或页脚,则需要从 @theme/Layout 导入 Layout 组件并将您的内容包含在该组件中。

提示

您也可以使用 .tsx 扩展名 (helloReact.tsx) 创建 TypeScript 页面。

添加 Markdown 页面

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

/src/pages/helloMarkdown.md
---
title: 我的问候页面标题
description: 我的问候页面描述
hide_table_of_contents: true
---

# 问候

你好吗?

同样,将在 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
.
注意

src/pages/ 目录中的所有 JavaScript/TypeScript 文件都将生成相应的网站路径。如果您想将可重用的组件创建到该目录中,请使用 exclude 选项(默认情况下,以 _ 开头的文件、测试文件(.test.js)和 __tests__ 目录中的文件不会转换为页面)。

重复路由

您可能会意外地创建多个旨在访问同一路由的页面。发生这种情况时,当您运行 yarn startyarn build 时,Docusaurus 将警告您有关重复路由的问题(行为可通过 onDuplicateRoutes 配置进行配置),但站点仍将成功构建。最后创建的页面将可访问,但它将覆盖其他冲突的页面。要解决此问题,您应该修改或删除任何冲突的路由。