create-react-docs-ui 0.1.3 → 0.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +85 -82
- package/package.json +16 -2
- package/template/index.html +3 -2
- package/template/package.json +6 -1
- package/template/public/config/site.en.yaml +7 -7
- package/template/public/config/site.yaml +7 -7
- package/template/public/docs/en/guide/configuration.md +149 -122
- package/template/public/docs/en/guide/quick-start.md +107 -108
- package/template/public/docs/zh-cn/guide/configuration.md +150 -122
- package/template/public/docs/zh-cn/guide/quick-start.md +107 -108
- package/template/src/react-docs-ui.d.ts +1 -0
|
@@ -1,109 +1,108 @@
|
|
|
1
|
-
# 快速上手
|
|
2
|
-
|
|
3
|
-
本指南将引导你在 5 分钟内，从零开始创建、配置并运行一个属于你自己的 React 文档网站。
|
|
4
|
-
|
|
5
|
-
## 1. 创建项目
|
|
6
|
-
|
|
7
|
-
使用官方脚手架是最高效的方式。打开你的终端，运行以下命令：
|
|
8
|
-
|
|
9
|
-
```bash
|
|
10
|
-
# 这会创建一个名为 "my-awesome-docs" 的项目
|
|
11
|
-
npx create-react-docs-ui@latest my-awesome-docs
|
|
12
|
-
```
|
|
13
|
-
|
|
14
|
-
然后，进入项目目录并安装依赖：
|
|
15
|
-
|
|
16
|
-
```bash
|
|
17
|
-
cd my-awesome-docs
|
|
18
|
-
npm install
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
## 2. 组织你的文档
|
|
22
|
-
|
|
23
|
-
所有的文档内容都以 Markdown 文件的形式存放在 `public/docs/` 目录下。
|
|
24
|
-
|
|
25
|
-
- 打开 `public/docs/zh-cn/` 目录。
|
|
26
|
-
- 你可以修改现有的 `index.md` 和 `guide` 目录下的文件，或者创建新的 `.md` 文件。
|
|
27
|
-
|
|
28
|
-
例如，我们来创建一个新页面。在 `public/docs/zh-cn/` 下新建一个 `about.md` 文件：
|
|
29
|
-
|
|
30
|
-
```markdown
|
|
31
|
-
---
|
|
32
|
-
title: 关于我们
|
|
33
|
-
description: 这是一个关于我们团队的页面。
|
|
34
|
-
---
|
|
35
|
-
|
|
36
|
-
# 关于我们
|
|
37
|
-
|
|
38
|
-
我们热爱开源和创造！
|
|
39
|
-
```
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
1
|
+
# 快速上手
|
|
2
|
+
|
|
3
|
+
本指南将引导你在 5 分钟内，从零开始创建、配置并运行一个属于你自己的 React 文档网站。
|
|
4
|
+
|
|
5
|
+
## 1. 创建项目
|
|
6
|
+
|
|
7
|
+
使用官方脚手架是最高效的方式。打开你的终端，运行以下命令：
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
# 这会创建一个名为 "my-awesome-docs" 的项目
|
|
11
|
+
npx create-react-docs-ui@latest my-awesome-docs
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
然后，进入项目目录并安装依赖：
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
cd my-awesome-docs
|
|
18
|
+
npm install
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## 2. 组织你的文档
|
|
22
|
+
|
|
23
|
+
所有的文档内容都以 Markdown 文件的形式存放在 `public/docs/` 目录下。
|
|
24
|
+
|
|
25
|
+
- 打开 `public/docs/zh-cn/` 目录。
|
|
26
|
+
- 你可以修改现有的 `index.md` 和 `guide` 目录下的文件，或者创建新的 `.md` 文件。
|
|
27
|
+
|
|
28
|
+
例如，我们来创建一个新页面。在 `public/docs/zh-cn/` 下新建一个 `about.md` 文件：
|
|
29
|
+
|
|
30
|
+
```markdown
|
|
31
|
+
---
|
|
32
|
+
title: 关于我们
|
|
33
|
+
description: 这是一个关于我们团队的页面。
|
|
34
|
+
---
|
|
35
|
+
|
|
36
|
+
# 关于我们
|
|
37
|
+
|
|
38
|
+
我们热爱开源和创造！
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
## 3. 配置网站
|
|
43
|
+
|
|
44
|
+
现在，让我们通过修改配置文件来展示新创建的页面。
|
|
45
|
+
|
|
46
|
+
打开核心配置文件 `public/config/site.yaml`。
|
|
47
|
+
|
|
48
|
+
### a. 修改网站信息
|
|
49
|
+
|
|
50
|
+
更新 `site` 部分，给你的网站一个新标题和 Logo。
|
|
51
|
+
|
|
52
|
+
```yaml
|
|
53
|
+
site:
|
|
54
|
+
title: "我的超赞文档"
|
|
55
|
+
description: "一个使用 React Docs UI 构建的网站"
|
|
56
|
+
logo: "🚀" # 你可以使用 emoji 或图片路径
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
### b. 添加到导航栏
|
|
60
|
+
|
|
61
|
+
在 `navbar.items` 数组中，为“关于”页面添加一个链接。
|
|
62
|
+
|
|
63
|
+
```yaml
|
|
64
|
+
navbar:
|
|
65
|
+
items:
|
|
66
|
+
- title: "首页"
|
|
67
|
+
link: "/zh-cn/"
|
|
68
|
+
- title: "指南"
|
|
69
|
+
link: "/zh-cn/guide/introduction"
|
|
70
|
+
- title: "关于" # 新增
|
|
71
|
+
link: "/zh-cn/about" # 新增
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
### c. 添加到侧边栏
|
|
75
|
+
|
|
76
|
+
为了让“关于”页面在侧边栏也可见，我们在 `sidebar.collections.guide.sections` 中添加一个新条目。
|
|
77
|
+
|
|
78
|
+
```yaml
|
|
79
|
+
sidebar:
|
|
80
|
+
collections:
|
|
81
|
+
guide:
|
|
82
|
+
sections:
|
|
83
|
+
- title: "快速开始"
|
|
84
|
+
path: "/zh-cn/guide"
|
|
85
|
+
children:
|
|
86
|
+
- title: "介绍"
|
|
87
|
+
path: "/zh-cn/guide/introduction"
|
|
88
|
+
- title: "安装"
|
|
89
|
+
path: "/zh-cn/guide/installation"
|
|
90
|
+
- title: "快速上手"
|
|
91
|
+
path: "/zh-cn/guide/quick-start"
|
|
92
|
+
# 你可以为 "关于" 页面创建一个新的 section
|
|
93
|
+
- title: "关于我们"
|
|
94
|
+
path: "/zh-cn/about"
|
|
95
|
+
children:
|
|
96
|
+
- title: "关于"
|
|
97
|
+
path: "/zh-cn/about"
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
## 4. 启动网站
|
|
101
|
+
|
|
102
|
+
保存你的所有修改，然后在终端运行：
|
|
103
|
+
|
|
104
|
+
```bash
|
|
105
|
+
npm run dev
|
|
106
|
+
```
|
|
107
|
+
|
|
109
108
|
你的网站现在应该运行在 `http://localhost:5173` 上了。访问它，你会看到更新后的标题、Logo，以及导航栏和侧边栏中新增的“关于”链接。恭喜你，你已经成功掌握了 React Docs UI 的基本工作流程！
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
declare module 'react-docs-ui';
|