mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-30 17:37:09 +02:00
docs(v2): install, create pages, docs, deploy (#1522)
* docs(v2): install, create pages, docs, deploy * docs(v2): Docs review changes for installation, create pages, docs, deploy * docs(v2): more docs!
This commit is contained in:
parent
9bb6ba113d
commit
404983c32b
7 changed files with 257 additions and 45 deletions
|
@ -3,9 +3,56 @@ id: creating-pages
|
|||
title: Creating Pages
|
||||
---
|
||||
|
||||
TODO: Explain the default pages routing behavior and talk about the official pages plugin.
|
||||
In this section, we will learn about creating ad-hoc pages in Docusaurus using React. This is most useful for creating one-off standalone pages.
|
||||
|
||||
#### References
|
||||
### Creating Pages
|
||||
|
||||
- https://docusaurus.io/docs/en/custom-pages
|
||||
- https://www.gatsbyjs.org/docs/creating-and-modifying-pages/
|
||||
<!-- TODO: What will the user see if pages/ is empty? -->
|
||||
|
||||
In the `pages` directory, create a file called `hello.js` with the following contents:
|
||||
|
||||
```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>
|
||||
Edit <code>pages/hello.js</code> and save to reload.
|
||||
</p>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
export default Hello;
|
||||
```
|
||||
|
||||
Once you save the file, the development server will automatically reload the changes. Now open http://localhost:3000/hello, you will see the new page you just created.
|
||||
|
||||
Any file you create under `pages` directory will be automatically converted to a page, converting the directory hierarchy into paths. For example:
|
||||
|
||||
- `pages/index.js` → `<baseUrl>/`
|
||||
- `pages/test.js` → `<baseUrl>/test`
|
||||
- `pages/foo/test.js` → `<baseUrl>/foo/test`
|
||||
- `pages/foo/index.js` → `<baseUrl>/foo`
|
||||
|
||||
### Using React
|
||||
|
||||
React is used as the UI library to create pages. You can leverage on the expressibility of React to build rich web content.
|
||||
|
||||
<!--
|
||||
TODO:
|
||||
- Explain that each page needs to be wrapped with `@theme/Layout`.
|
||||
- That v2 is different from v1, users can write interactive components with lifecycles.
|
||||
|
||||
-->
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue