next

Translate

Create Pages

In this section, we will learn about creating two types of pages in Docusaurus: a regular page and a documentation page.

Docusaurus MacBook {.docImage}

Create a Regular Page

  1. In the website/pages/en directory of your repository, save a text file called hello-world.js with the following contents:

    const React = require('react');

    const CompLibrary = require('../../core/CompLibrary.js');

    const Container = CompLibrary.Container; const GridBlock = CompLibrary.GridBlock;

    function HelloWorld(props) { return (

    Hello World!

    This is my first page!
    ); }

    module.exports = HelloWorld;

Use any text editor to make the file, such as Microsoft Visual Studio Code or Komodo Edit.

  1. Go to http://localhost:3000/hello-world and you should be able to see the new page.
  2. Change the text within the <p>...</p> to "I can write JSX here!" and save the file again. The browser should refresh automatically to reflect the change.
- <p>This is my first page!</p>
+ <p>I can write JSX here!</p>

React is being used as a templating engine for rendering static markup. You can leverage on the expressibility of React to build rich web content. Learn more about creating pages here.

Docusaurus React {.docImage}

Create a Documentation Page

  1. Create a new file in the docs folder called doc9.md. The docs folder is in the root of your Docusaurus project, same level as the website folder.

  2. Paste the following contents:

    id: doc9 title: This is Doc 9

    I can write content using GitHub-flavored Markdown syntax.

    Markdown Syntax

    Bold italic code Links

    Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse id sem consectetuer libero luctus adipiscing.

    • Hey
    • Ho
    • Let's Go
  1. The sidebars.json is where you specify the order of your documentation pages, so open website/sidebars.json and add "doc9" after "doc1". This ID should be the same one as in the metadata for the Markdown file above, so if you gave a different ID in Step 2, just make sure to use the same ID in the sidebar file.
{
  "docs": {
    "Docusaurus": [
      "doc1",
+     "doc9"
    ],
    "First Category": ["doc2"],
    "Second Category": ["doc3"]
  },
  "docs-other": {
    "First Category": ["doc4", "doc5"]
  }
}
  1. A server restart is needed to pick up sidebar changes, so go to your terminal, kill your dev server (Cmd + C or Ctrl + C), and run npm start or yarn start.
  2. Navigate to http://localhost:3000/docs/doc9 to see the new documentation page.

你已经创建了你一个文档页面到 Docusaurus！

Learn more about creating docs pages here.

← Create a New SitePublish the Site →