mirror of
https://github.com/zhigang1992/create-react-app.git
synced 2026-05-18 20:37:06 +08:00
4bda8f7350
* Add a temporary README file This commit adds a temporary readme file that points users to the main README file or the User Guide. * Add a "getting started" doc This commit adds a page for getting started, copying the "Get started now" from the current `README.md`. * Add link to the get started page from the index page * Add the getting started doc to the site header * Add footer link to getting started info * Add getting started to the sidebar * Add placeholder for the user guide page * Add links to the user-guide page as well * Add auto-generated i18n file * Move all docusaurus related files into own folder
145 lines
3.0 KiB
Markdown
145 lines
3.0 KiB
Markdown
This website was created with [Docusaurus](https://docusaurus.io/).
|
|
|
|
# What's In This Document
|
|
|
|
* [Get Started in 5 Minutes](#get-started-in-5-minutes)
|
|
* [Directory Structure](#directory-structure)
|
|
* [Editing Content](#editing-content)
|
|
* [Adding Content](#adding-content)
|
|
* [Full Documentation](#full-documentation)
|
|
|
|
# Get Started in 5 Minutes
|
|
|
|
1. Make sure all the dependencies for the website are installed:
|
|
|
|
```sh
|
|
# Install dependencies
|
|
$ yarn
|
|
```
|
|
2. Run your dev server:
|
|
|
|
```sh
|
|
# Start the site
|
|
$ yarn start
|
|
```
|
|
|
|
## Directory Structure
|
|
|
|
Your project file structure should look something like this
|
|
|
|
```
|
|
my-docusaurus/
|
|
docs/
|
|
doc-1.md
|
|
doc-2.md
|
|
doc-3.md
|
|
website/
|
|
core/
|
|
node_modules/
|
|
pages/
|
|
static/
|
|
css/
|
|
img/
|
|
package.json
|
|
sidebar.json
|
|
siteConfig.js
|
|
```
|
|
|
|
# Editing Content
|
|
|
|
## Editing an existing docs page
|
|
|
|
Edit docs by navigating to `docs/` and editing the corresponding document:
|
|
|
|
`docs/doc-to-be-edited.md`
|
|
|
|
```markdown
|
|
---
|
|
id: page-needs-edit
|
|
title: This Doc Needs To Be Edited
|
|
---
|
|
|
|
Edit me...
|
|
```
|
|
|
|
For more information about docs, click [here](https://docusaurus.io/docs/en/navigation)
|
|
|
|
# Adding Content
|
|
|
|
## Adding a new docs page to an existing sidebar
|
|
|
|
1. Create the doc as a new markdown file in `/docs`, example `docs/newly-created-doc.md`:
|
|
|
|
```md
|
|
---
|
|
id: newly-created-doc
|
|
title: This Doc Needs To Be Edited
|
|
---
|
|
|
|
My new content here..
|
|
```
|
|
|
|
1. Refer to that doc's ID in an existing sidebar in `website/sidebar.json`:
|
|
|
|
```javascript
|
|
// Add newly-created-doc to the Getting Started category of docs
|
|
{
|
|
"docs": {
|
|
"Getting Started": [
|
|
"quick-start",
|
|
"newly-created-doc" // new doc here
|
|
],
|
|
...
|
|
},
|
|
...
|
|
}
|
|
```
|
|
|
|
For more information about adding new docs, click [here](https://docusaurus.io/docs/en/navigation)
|
|
|
|
## Adding items to your site's top navigation bar
|
|
|
|
1. Add links to docs, custom pages or external links by editing the headerLinks field of `website/siteConfig.js`:
|
|
|
|
`website/siteConfig.js`
|
|
```javascript
|
|
{
|
|
headerLinks: [
|
|
...
|
|
/* you can add docs */
|
|
{ doc: 'my-examples', label: 'Examples' },
|
|
/* you can add custom pages */
|
|
{ page: 'help', label: 'Help' },
|
|
/* you can add external links */
|
|
{ href: 'https://github.com/facebook/Docusaurus', label: 'GitHub' },
|
|
...
|
|
],
|
|
...
|
|
}
|
|
```
|
|
|
|
For more information about the navigation bar, click [here](https://docusaurus.io/docs/en/navigation)
|
|
|
|
## Adding custom pages
|
|
|
|
1. Docusaurus uses React components to build pages. The components are saved as .js files in `website/pages/en`:
|
|
1. If you want your page to show up in your navigation header, you will need to update `website/siteConfig.js` to add to the `headerLinks` element:
|
|
|
|
`website/siteConfig.js`
|
|
```javascript
|
|
{
|
|
headerLinks: [
|
|
...
|
|
{ page: 'my-new-custom-page', label: 'My New Custom Page' },
|
|
...
|
|
],
|
|
...
|
|
}
|
|
```
|
|
|
|
For more information about custom pages, click [here](https://docusaurus.io/docs/en/custom-pages).
|
|
|
|
# Full Documentation
|
|
|
|
Full documentation can be found on the [website](https://docusaurus.io/).
|