Translate

Create Pages

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

{.docImage}

Creating a Regular Page

1. Go into the pages/en directory and create a 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;

2. Go to http://localhost:3000/hello-world and you should be able to see the new page.
3. Замените текст внутри <p>...</p> на "Я могу писать JSX здесь!". The browser should refresh automatically to reflect the changes.

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

{.docImage}

Create a Documentation Page

1. Создайте новый файл в каталоге docs с именем doc4.md. The docs folder is in the root of your Docusaurus project, one level above website.

2. Paste the following contents:

   ---

   id: doc4 title: Это Doc 4

   ---

   Я могу написать статью, используя синтаксис GitHub-flavored Markdown.

   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

3. Файл sidebars.json - место, где вы указываете порядок страниц своей документации, поэтому следует открыть website/sidebars.json и добавить в нем "doc4" после "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",
+     "doc4"
    ],
    "First Category": ["doc2"],
    "Second Category": ["doc3"]
  },
  "docs-other": {
    "First Category": ["doc4", "doc5"]
  }
}

4. Для того, чтобы применить изменения боковой панели, вам следует перезапустить сервер. Для этого остановите свой dev сервер (Cmd + C or Ctrl + C) и запустите его с помощью npm run start.
5. Перейдите по адресу http://localhost:3000/docs/doc4.

You've created your first documentation page on Docusaurus!

Learn more about creating docs pages here.