跳转至主内容
Version: 2.0.0-alpha.75

创建页面

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

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

The functionality of pages is powered by @docusaurus/plugin-content-pages.

You can use React components, or Markdown.

note

Pages do not have sidebars, only docs have.

添加 React 页面#

Create a file /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>          编辑 <code>pages/hello.js</code> 并保存以刷新。        </p>      </div>    </Layout>  );}
export default Hello;

Once you save the file, the development server will automatically reload the changes. Now open http://localhost:3000/helloReact, you will see the new page you just created.

Each page doesn't come with any styling. You will need to import the Layout component from @theme/Layout and wrap your contents within that component if you want the navbar and/or footer to appear.

tip

You can also create TypeScript pages with the .tsx extension (helloReact.tsx).

添加 Markdown 页面#

Create a file /src/pages/helloMarkdown.md:

/src/pages/helloMarkdown.md
---title: 我的你好页面标题description: 我的你好页面描述hide_table_of_contents: true---
# 你好
今天过得怎么样?

In the same way, a page will be created at http://localhost:3000/helloMarkdown.

Markdown pages are less flexible than React pages, because it always uses the theme layout.

Here's an example Markdown page.

tip

You can use the full power of React in Markdown pages too, refer to the MDX documentation.

路由#

If you are familiar with other static site generators like Jekyll and Next, this routing approach will feel familiar to you. Any JavaScript file you create under /src/pages/ directory will be automatically converted to a website page, following the /src/pages/ directory hierarchy. 举个例子:

  • /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. Each page is a component, and if you need to customize your page design with your own styles, we recommend co-locating your styles with the page component in its own directory. For example, to create a "Support" page, you could do one of the following:

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

The latter is preferred as it has the benefits of letting you put files related to the page within that directory. For example, a CSS module file (styles.module.css) with styles meant to only be used on the "Support" page. 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).

我的网站├── src│   └── pages│       ├── styles.module.css│       ├── index.js|       ├──_ignored.js│       └── support│           ├── index.js│           └── styles.module.css.
注意

All JavaScript/TypeScript files within the src/pages/ directory will have corresponding website paths generated for them. 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).

使用 React#

React is used as the UI library to create pages. Every page component should export a React component, and you can leverage on the expressiveness of React to build rich and interactive content.

重复路由#

You may accidentally create multiple pages that are meant to be accessed on the same route. When this happens, Docusaurus will warn you about duplicate routes when you run yarn start or yarn build, but the site will still be built successfully. The page that was created last will be accessible, but it will override other conflicting pages. To resolve this issue, you should modify or remove any conflicting routes.