创建页面(Pages)

在本章节中,我们将学习如何使用 React 在 Docusaurus 中创建临时页面(pages)。这对于创建一次性的独立页面(例如展示页面、在线试用页面或支持页面)非常有用。

页面(Pages)功能由 @docusaurus/plugin-content-pages 实现。

添加新页面

/src/pages/ 目录下,创建一个名为 hello.js 的文件,并输入如下内容:

/src/pages/hello.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/hello.js</code> and save to reload.
</p>
</div>
</Layout>
);
}
export default Hello;

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

每个页面默认没有任何样式。如果你想显示导航栏和/或页脚,则需要从 @theme/Layout 中导入 Layout 组件并将你要输出的内容包裹在该组件中。

tip

你还可以使用 TypeScript 创建页面,在这种情况下,文件名应使用 .tsx 扩展名,例如 hello.tsx

路由

如果您熟悉其他静态站点生成器(例如 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/

在这个基于组件开发的时代,鼓励将样式、标记(marku)和行为共同组合为组件。每个页面都是一个组件,如果你需要使用自己的样式来自定义页面设计,我们建议你将样式与页面组件一起放置在其自己的目录中。例如,要创建 "Support" 页面,你可以执行以下任一操作:

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

首选后一种方式,因为它具有让你将与页面相关的文件统统放在该目录中的优点。例如,用于定义样式的 CSS 模块文件(styles.module.css)仅应在 "Support" 页面上使用。 注意:这只是建议的目录结构,你仍然需要在组件模块(support/index.js)中手动导入 CSS 模块文件。

my-website
├── src
│ └── pages
│ ├── styles.module.css
│ ├── index.js
│ └── support
│ ├── index.js
│ └── styles.module.css
.
caution

src/pages/ 目录中的所有 JavaScript 或 TypeScript 文件都会为其生成相对应的网站路径。请勿将可重用的组件或测试文件(以 .test.js 结尾的文件)放入该目录中,否则它们将被转换为页面,这可能是不希望的。

使用React

React 是用于创建页面的 UI 库。每个页面组件都应导出(export)一个 React 组件,你可以利用 React 的表现力来构建丰富的交互式内容。

Last updated on by wangsai