mirror of
https://github.com/facebook/docusaurus.git
synced 2025-04-30 18:58:36 +02:00
1c115d6ba4
* docs: add the repository to the localhost:3000 link Fix two links on **[Create Pages](https://docusaurus.io/docs/en/next/tutorial-create-pages)**. * docs: use the same start command on both pages The start command in **[Scaffold the Site](https://docusaurus.io/docs/en/next/tutorial-create-new-site)** is "Run `npm start` or `yarn start.`" It will help new users to see the same start command again. A slightly different command will make new users think that something slightly different is happening. * docs: change the ID of the new documentation page The page ID "doc4" is already used by one of the downloaded pages, docs/exampledoc4.md, shown below: ``` --- id: doc4 title: Other Document --- this is another document ``` * docs: removed docusaurus-tutorial/ from the links
98 lines
3.1 KiB
Markdown
98 lines
3.1 KiB
Markdown
---
|
|
id: tutorial-create-pages
|
|
title: Create Pages
|
|
---
|
|
|
|
In this section, we will learn about creating two types of pages in Docusaurus: a regular page and a documentation page.
|
|
|
|
<img alt="Docusaurus MacBook" src="/img/undraw_docusaurus_tree.svg" class="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 (
|
|
<div className="docMainWrapper wrapper">
|
|
<Container className="mainContainer documentContainer postContainer">
|
|
<h1>Hello World!</h1>
|
|
<p>This is my first page!</p>
|
|
</Container>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
module.exports = HelloWorld;
|
|
```
|
|
|
|
> Use any text editor to make the file, such as [Microsoft Visual Studio Code](https://code.visualstudio.com/download) or [Komodo Edit](https://www.activestate.com/komodo-edit).
|
|
|
|
2. Go to http://localhost:3000/hello-world and you should be able to see the new page.
|
|
1. 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.
|
|
|
|
```diff
|
|
- <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](custom-pages).
|
|
|
|
<img alt="Docusaurus React" src="/img/undraw_docusaurus_react.svg" class="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, one level above `website`.
|
|
1. Paste the following contents:
|
|
|
|
```
|
|
---
|
|
id: doc9
|
|
title: This is Doc 9
|
|
---
|
|
|
|
I can write content using [GitHub-flavored Markdown syntax](https://github.github.com/gfm/).
|
|
|
|
## Markdown Syntax
|
|
|
|
**Bold** _italic_ `code` [Links](#url)
|
|
|
|
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
|
|
> id sem consectetuer libero luctus adipiscing.
|
|
|
|
* Hey
|
|
* Ho
|
|
* Let's Go
|
|
```
|
|
|
|
3. 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.
|
|
|
|
```diff
|
|
{
|
|
"docs": {
|
|
"Docusaurus": [
|
|
"doc1",
|
|
+ "doc9"
|
|
],
|
|
"First Category": ["doc2"],
|
|
"Second Category": ["doc3"]
|
|
},
|
|
"docs-other": {
|
|
"First Category": ["doc4", "doc5"]
|
|
}
|
|
}
|
|
```
|
|
|
|
4. A server restart is needed to pick up sidebar changes, so go to your terminal, kill your dev server (<kbd>Cmd</kbd> + <kbd>C</kbd> or <kbd>Ctrl</kbd> + <kbd>C</kbd>), and run `npm start` or `yarn start`.
|
|
1. Navigate to http://localhost:3000/docs/doc9 to see the new documentation page.
|
|
|
|
You've created your first documentation page on Docusaurus!
|
|
|
|
Learn more about creating docs pages [here](navigation).
|