3.Guides - Pages | YYC的博客

套用主题

欢迎来到我的网站

Creating Pages

In this section, we will learn about creating pages in Docusaurus.

The @docusaurus/plugin-content-pages plugin empowers(授权) you to create one-off standalone pages(一次性独立页面) like a showcase page, playground page, or support page. You can use React components, or Markdown.

Add a React page

React is used as the UI library to create pages. Every page component should export a React component, and you can leverage(充分利用) the expressiveness of React to build rich and interactive(交互式的) content.

Create a file /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>
  );
}

Once you save the file, the development server will automatically reload the changes. Now open http://localhost:3000/helloReact and 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.

个人心得:一个最简单的标准页面模版(没有添加任何例如页眉页脚模版) , 导入React , Layout , 下面代码并没有使用React库,可以删除. Layout就是css的自定义库

Add a Markdown page

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

---
title: my hello page title
description: my hello page description
hide_table_of_contents: true
---

# Hello

How are you?

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.

Routing

Any JavaScript file you create under /src/pages/ directory will be automatically converted to a website page, following the /src/pages/ directory hierarchy( /ˈhaɪərɑːki/ 等级制度 /层次 /层次结构). For example:

/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:

在这个基于组件的开发时代，鼓励将样式、标记和行为一起放置到组件中。每个页面都是一个组件，如果您需要使用自己的样式自定义页面设计，我们建议将您的样式与页面组件共同放置在其单独的目录中。例如，要创建一个“支持”页面，您可以执行以下操作之一:

Add a /src/pages/support.js file
Create a /src/pages/support/ directory and a /src/pages/support/index.js file. (推荐)

第二种方法是首选，好处是允许将与该页相关的文件放在该目录中。例如，一个CSS模块文件(styles.module. CSS)只能在“Support”页面上使用。

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

Duplicate Routes(重复路由)

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 (behavior configurable through the onDuplicateRoutes config), 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.