react-docs-ui 0.1.7 → 0.2.0

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.
@@ -1,28 +0,0 @@
1
- # Introduction
2
-
3
- React Docs UI is a React component library and toolset designed specifically for building modern documentation websites. Its core philosophy is **configuration over code**, allowing you to focus entirely on content creation.
4
-
5
- ## Core Advantages
6
-
7
- - **Configuration-Driven**: This is the core feature of React Docs UI. You don't need to write complex React components or routing logic; just maintain a clear `site.yaml` file to define everything from the site's navigation and sidebar to its theme and footer.
8
-
9
- - **Fully-Featured**: Out-of-the-box, it provides everything a modern documentation website needs:
10
- - Responsive layout
11
- - Light/dark theme switching
12
- - Markdown-based content rendering (with GFM and Frontmatter support)
13
- - Built-in code syntax highlighting
14
- - Quick command menu (Cmd+K)
15
- - Internationalization support
16
-
17
- - **Extremely Simple to Start**: With the official `create-react-docs-ui` scaffolding tool, you can launch a fully functional documentation website in under a minute, without any complex environment setup.
18
-
19
- - **Highly Customizable**: While it works out-of-the-box, every part (like the logo, color scheme, navigation links, social media icons, etc.) can be deeply customized through the configuration file.
20
-
21
- ## Use Cases
22
-
23
- Whether you are an individual developer or part of a team, React Docs UI is perfect for the following scenarios:
24
-
25
- - **Open Source Project Documentation**: Provide a professional and easy-to-maintain documentation site for your React project.
26
- - **Product Manuals**: Clearly present your product's features and usage guides.
27
- - **Team Knowledge Bases**: Build and share knowledge based on React technology within your team.
28
- - **Personal Blogs or Portfolios**: Organize and display your technical articles or projects in an elegant way.
@@ -1,108 +0,0 @@
1
- # Quick Start
2
-
3
- This guide will walk you through creating, configuring, and running your own React documentation website from scratch in 5 minutes.
4
-
5
- ## 1. Create the Project
6
-
7
- Using the official scaffolding tool is the most efficient way. Open your terminal and run the following command:
8
-
9
- ```bash
10
- # This creates a project named "my-awesome-docs"
11
- npx create-react-docs-ui@latest my-awesome-docs
12
- ```
13
-
14
- Next, enter the project directory and install the dependencies:
15
-
16
- ```bash
17
- cd my-awesome-docs
18
- npm install
19
- ```
20
-
21
- ## 2. Organize Your Documents
22
-
23
- All your documentation content is stored as Markdown files in the `public/docs/` directory.
24
-
25
- - Open the `public/docs/en/` directory.
26
- - You can modify the existing `index.md` and files under the `guide` directory, or create new `.md` files.
27
-
28
- For example, let's create a new page. Create a new file named `about.md` in `public/docs/en/`:
29
-
30
- ```markdown
31
- ---
32
- title: About Us
33
- description: This is a page about our team.
34
- ---
35
-
36
- # About Us
37
-
38
- We love open source and creation!
39
- ```
40
-
41
-
42
- ## 3. Configure the Website
43
-
44
- Now, let's display the newly created page by modifying the configuration file.
45
-
46
- Open the core configuration file `public/config/site.yaml`.
47
-
48
- ### a. Modify Site Information
49
-
50
- Update the `site` section to give your website a new title and logo.
51
-
52
- ```yaml
53
- site:
54
- title: "My Awesome Docs"
55
- description: "A website built with React Docs UI"
56
- logo: "🚀" # You can use an emoji or an image path
57
- ```
58
-
59
- ### b. Add to the Navbar
60
-
61
- In the `navbar.items` array, add a link for the "About" page. Remember to update the links for the English version.
62
-
63
- ```yaml
64
- navbar:
65
- items:
66
- - title: "Home"
67
- link: "/en/"
68
- - title: "Guide"
69
- link: "/en/guide/introduction"
70
- - title: "About" # New
71
- link: "/en/about" # New
72
- ```
73
-
74
- ### c. Add to the Sidebar
75
-
76
- To make the "About" page visible in the sidebar, we'll add a new entry in `sidebar.collections.guide.sections`. Make sure to use English paths.
77
-
78
- ```yaml
79
- sidebar:
80
- collections:
81
- guide:
82
- sections:
83
- - title: "Getting Started"
84
- path: "/en/guide"
85
- children:
86
- - title: "Introduction"
87
- path: "/en/guide/introduction"
88
- - title: "Installation"
89
- path: "/en/guide/installation"
90
- - title: "Quick Start"
91
- path: "/en/guide/quick-start"
92
- # You can create a new section for the "About" page
93
- - title: "About Us"
94
- path: "/en/about"
95
- children:
96
- - title: "About"
97
- path: "/en/about"
98
- ```
99
-
100
- ## 4. Launch the Website
101
-
102
- Save all your changes and run the following command in your terminal:
103
-
104
- ```bash
105
- npm run dev
106
- ```
107
-
108
- Your website should now be running at `http://localhost:5173`. Visit it, and you will see the updated title, logo, and the new "About" link in the navbar and sidebar. Congratulations, you have successfully mastered the basic workflow of React Docs UI!
@@ -1,10 +0,0 @@
1
- # Guide
2
-
3
- This guide will help you fully understand and master all the features of React Docs UI. Whether you are a beginner or looking for in-depth customization, you will find the information you need here.
4
-
5
- ## Table of Contents
6
-
7
- - **[Introduction](/guide/introduction)**: Learn about the core philosophy and main advantages of React Docs UI.
8
- - **[Installation](/guide/installation)**: Learn how to install via the scaffolding tool or manually.
9
- - **[Quick Start](/guide/quick-start)**: Create and run your first documentation website in 5 minutes.
10
- - **[Configuration (`site.yaml`)](/guide/configuration)**: Dive deep into each configuration option to take full control of your site.
@@ -1,34 +0,0 @@
1
- # React Docs UI
2
-
3
- A **configuration-driven** modern documentation website builder based on React.
4
-
5
- React Docs UI aims to make creating beautiful, powerful documentation websites simpler than ever. You just need to focus on writing Markdown documents, and everything else—from routing and navigation to theme switching and the command menu—is driven by a simple YAML configuration.
6
-
7
- ## Core Features
8
-
9
- - **Configuration-Driven**: Define your entire website via `site.yaml` without coding.
10
- - **Out-of-the-Box**: Quickly start your project with all necessary features built-in.
11
- - **Modern Design**: Elegant responsive layout with automatic light/dark theme switching.
12
- - **Command Menu**: Built-in `Cmd+K` shortcut menu for quick page access.
13
- - **Markdown Support**: Full support for GFM and Frontmatter.
14
- - **Internationalization**: Easily implement multi-language support through configuration files.
15
-
16
- ## Quick Start
17
-
18
- Get your own documentation website with just one command:
19
-
20
- ```bash
21
- # Create the project
22
- npx create-react-docs-ui@latest my-docs
23
-
24
- # Enter the project directory
25
- cd my-docs
26
-
27
- # Install dependencies and start
28
- npm install && npm run dev
29
- ```
30
-
31
- ## Links
32
-
33
- - **[Guide](/guide/introduction)**: Start learning about all the features of React Docs UI.
34
- - **[GitHub](https://github.com/shenjianZ/react-docs-ui)**: View the source code, submit issues, or contribute.
@@ -1,207 +0,0 @@
1
- # 配置文件 (`site.yaml`) 详解
2
-
3
- `react-docs-ui` 的核心是其**配置驱动**的理念。你几乎可以通过 `public/config/site.yaml` 这一个文件来定义整个网站的外观和行为。本文档将详细解释每个配置项。
4
-
5
- ## 顶级配置项概览
6
-
7
- | 顶级字段 | 说明 |
8
- | :--- | :--- |
9
- | `site` | 网站的全局信息,如标题、描述、Logo。 |
10
- | `navbar` | 配置网站顶部的导航栏。 |
11
- | `sidebar` | 配置网站侧边栏的导航菜单。 |
12
- | `theme` | 配置网站的主题,如颜色、浅色/深色模式。 |
13
- | `footer` | 配置网站底部的页脚信息。 |
14
- | `toc` | 配置文章页面右侧的目录(Table of Contents)。 |
15
-
16
- ---
17
-
18
- ## `site`
19
-
20
- 网站的基础元数据配置。
21
-
22
- | 字段 | 说明 | 示例 |
23
- | :--- | :--- | :--- |
24
- | `title` | 网站标题,显示在浏览器标签页上。 | `"React Docs UI"` |
25
- | `description` | 网站描述,用于搜索引擎优化 (SEO)。 | `"一个 React 文档网站构建工具"` |
26
- | `logo` | 网站 Logo,显示在导航栏左上角。 | `"📚"` 或 `"/images/logo.png"` 或一个包含 `light` 和 `dark` 模式图片路径的对象 |
27
- | `author` | 网站作者。 | `"React Docs UI Team"` |
28
-
29
- **Logo 格式说明:**
30
- 1. **Emoji**: 直接使用一个表情符号,如 `"🚀"`。
31
- 2. **本地图片**: 指向 `public` 目录下的图片路径,如 `"/images/logo.png"`。
32
- 3. **亮/暗模式图片**: 一个对象,包含 `light` 和 `dark` 两个键,分别指向不同主题下的图片路径。
33
-
34
- ---
35
-
36
- ## `navbar`
37
-
38
- 顶部导航栏配置。
39
-
40
- | 字段 | 说明 |
41
- | :--- | :--- |
42
- | `items` | 导航项数组,定义了导航栏中显示的所有链接。 |
43
- | `actions` | (可选) 导航栏右侧的操作按钮,如 GitHub 链接。 |
44
-
45
- ### `navbar.items`
46
-
47
- | 字段 | 说明 | 示例 |
48
- | :--- | :--- | :--- |
49
- | `title` | 导航项的显示文本。 | `"指南"` |
50
- | `link` | 链接地址。内部链接以 `/` 开头。 | `"/guide/introduction"` |
51
- | `external` | (可选) `true` 表示为外部链接,将在新标签页打开。 | `true` |
52
-
53
- ---
54
-
55
- ## `sidebar`
56
-
57
- 侧边栏导航配置,是文档结构的核心。它使用 `collections` 来组织不同部分的内容。
58
- # 配置文件(`site.yaml`)字段说明
59
-
60
- 项目遵循“配置驱动”。绝大多数行为由 `public/config/site.yaml` 决定。下面用表格逐项说明所有字段。
61
-
62
- ## 顶级键
63
- | 键 | 作用 |
64
- | :-- | :-- |
65
- | `site` | 全局元信息(标题、描述、Logo、作者) |
66
- | `navbar` | 顶部导航(开关、导航项、操作按钮) |
67
- | `sidebar` | 左侧导航树(集合/分组/子项) |
68
- | `theme` | 主题配置(默认模式、是否允许切换) |
69
- | `toc` | 文章右侧目录(开关、层级、标题) |
70
- | `footer` | 页脚(链接、社交、仓库信息) |
71
- | `pwa` | PWA 设置(预留/可选) |
72
-
73
- ---
74
-
75
- ## `site`
76
- | 字段 | 类型 | 说明 | 示例 |
77
- | :-- | :-- | :-- | :-- |
78
- | `title` | string | 网站标题 | `"React Docs UI 示例"` |
79
- | `description` | string | 简短网站描述(SEO) | `"简单漂亮的文档站"` |
80
- | `logo` | string 或 object | 网站 Logo。字符串可为 emoji 或图片路径;对象可分别设置亮/暗图标 | `"📚"`、`"/images/logo.png"`、或 `{ light: "/images/favicon.svg", dark: "/images/favicon-dark.svg" }` |
81
- | `author` | string | 作者或组织 | `"React Docs UI Team"` |
82
-
83
- Logo 支持:
84
- - Emoji:`"🚀"`
85
- - 公共路径或 URL:`"/images/logo.png"`
86
- - 明/暗主题对象:`{ light, dark }`
87
-
88
- ---
89
-
90
- ## `navbar`
91
- | 字段 | 类型 | 说明 |
92
- | :-- | :-- | :-- |
93
- | `showLogo` | boolean | 是否显示左上角 Logo |
94
- | `showTitle` | boolean | 是否显示站点标题 |
95
- | `showLanguageSwitcher` | boolean | 是否显示语言切换 |
96
- | `items` | array<Item> | 主导航链接 |
97
- | `actions` | array<Action> | 右侧操作按钮(如 GitHub) |
98
-
99
- Item
100
- | 字段 | 类型 | 说明 | 示例 |
101
- | :-- | :-- | :-- | :-- |
102
- | `title` | string | 链接文字 | `"指南"` |
103
- | `link` | string | 路径或 URL。内部路径以 `/` 开头 | `"/guide"` |
104
- | `external` | boolean(可选) | 外部链接新开标签 |
105
- | `visible` | boolean(可选) | 条件展示 |
106
-
107
- Action
108
- | 字段 | 类型 | 说明 | 示例 |
109
- | :-- | :-- | :-- | :-- |
110
- | `type` | `"github"`/`"custom"`(可选) | 预设或自定义动作 | `"github"` |
111
- | `title` | string(可选) | 自定义动作按钮文案 |
112
- | `link` | string | 目标链接 |
113
- | `icon` | string(可选) | 自定义动作图标名 |
114
- | `enabled` | boolean(可选) | 是否启用 |
115
-
116
- ---
117
-
118
- ## `sidebar`
119
- | 字段 | 类型 | 说明 |
120
- | :-- | :-- | :-- |
121
- | `enabled` | boolean(可选) | 全局开启/关闭侧边栏 |
122
- | `collections` | record<string, Collection> | 顶级集合映射(如 `guide`) |
123
- | `sections` | Section[] (兼容,可选) | 旧版单树结构 |
124
-
125
- Collection
126
- | 字段 | 类型 | 说明 |
127
- | :-- | :-- | :-- |
128
- | `sections` | Section[] | 一组可折叠分组 |
129
-
130
- Section
131
- | 字段 | 类型 | 说明 | 示例 |
132
- | :-- | :-- | :-- | :-- |
133
- | `title` | string | 分组标题 | `"快速开始"` |
134
- | `path` | string | 访问该前缀将自动展开/高亮 | `"/guide"` |
135
- | `children` | Child[](可选) | 该分组下的子链接 |
136
-
137
- Child
138
- | 字段 | 类型 | 说明 | 示例 |
139
- | :-- | :-- | :-- | :-- |
140
- | `title` | string | 子链接文字 | `"介绍"` |
141
- | `path` | string | 完整页面路径 | `"/guide/introduction"` |
142
-
143
- ---
144
-
145
- ## `theme`
146
- | 字段 | 类型 | 说明 | 可选值 | 默认值 |
147
- | :-- | :-- | :-- | :-- | :-- |
148
- | `defaultMode` | string | 默认主题模式 | `light`/`dark`/`auto` | `auto` |
149
- | `allowToggle` | boolean | 是否允许用户切换主题 | `true`/`false` | `true` |
150
-
151
- ---
152
-
153
- ## `toc`
154
- | 字段 | 类型 | 说明 | 示例 |
155
- | :-- | :-- | :-- | :-- |
156
- | `enabled` | boolean | 是否启用页面目录 | `true` |
157
- | `maxLevel` | number (1-6) | 展示的最大标题层级 | `3` |
158
- | `title` | string | 目录标题 | `"本页内容"` |
159
-
160
- 说明:具体锚点与是否显示也可能受页面 Frontmatter 影响。
161
-
162
- ---
163
-
164
- ## `footer`
165
- | 字段 | 类型 | 说明 |
166
- | :-- | :-- | :-- |
167
- | `enabled` | boolean | 是否显示页脚 |
168
- | `copyright` | string | 版权文案 |
169
- | `repository` | Repository(可选) | 仓库信息(如“在 GitHub 上编辑此页”) |
170
- | `lastUpdated` | string(可选) | 站点/内容最近更新时间 |
171
- | `links` | Link[](可选) | 页脚链接列 |
172
- | `social` | Social[](可选) | 社交图标链接 |
173
-
174
- Repository
175
- | 字段 | 类型 | 说明 | 示例 |
176
- | :-- | :-- | :-- | :-- |
177
- | `url` | string | 仓库地址 | `"https://github.com/user/repo"` |
178
- | `branch` | string | 文档所在分支 | `"main"` |
179
-
180
- Link
181
- | 字段 | 类型 | 说明 |
182
- | :-- | :-- | :-- |
183
- | `title` | string | 链接标题 |
184
- | `link` | string | 路径或 URL |
185
- | `external` | boolean(可选) | 新开标签 |
186
-
187
- Social
188
- | 字段 | 类型 | 说明 |
189
- | :-- | :-- | :-- |
190
- | `name` | string | 平台名称(如 `github`/`twitter`/`bilibili`) |
191
- | `url` | string | 个人页或链接 |
192
- | `icon` | string | 图标名 |
193
-
194
- ---
195
-
196
- ## `pwa`(可选)
197
- | 字段 | 类型 | 说明 |
198
- | :-- | :-- | :-- |
199
- | `enabled` | boolean | 是否启用 PWA(预留) |
200
- | `name` | string | 应用名 |
201
- | `shortName` | string | 应用短名 |
202
- | `description` | string | 应用描述 |
203
- | `themeColor` | string | 主题色 |
204
- | `backgroundColor` | string | 背景色 |
205
-
206
- ---
207
-
@@ -1,63 +0,0 @@
1
- # 安装
2
-
3
- ## 环境要求
4
-
5
- 在开始之前,请确保你的开发环境满足以下要求:
6
-
7
- - **Node.js**: 版本 `>= 18.0.0`
8
- - **包管理器**: `npm`, `yarn` 或 `pnpm`
9
-
10
- ## 推荐方式:使用脚手架
11
-
12
- 我们强烈推荐使用官方的 `create-react-docs-ui` 脚手架来创建你的新文档项目。这是最快、最简单的方式,可以确保所有配置都已就绪。
13
-
14
- 1. **运行创建命令**:
15
- ```bash
16
- npx create-react-docs-ui@latest my-docs
17
- ```
18
- 这会在当前目录下创建一个名为 `my-docs` 的新文件夹。
19
-
20
- 2. **进入项目并安装依赖**:
21
- ```bash
22
- cd my-docs
23
- npm install
24
- ```
25
-
26
- 3. **启动开发服务器**:
27
- ```bash
28
- npm run dev
29
- ```
30
- 现在,你的文档网站已经运行在 `http://localhost:5173` (或另一个可用端口) 上了。
31
-
32
- ## 手动安装 (适用于现有项目)
33
-
34
- 如果你想在已有的 Vite + React 项目中手动集成 `react-docs-ui`,可以按照以下步骤操作:
35
-
36
- 1. **安装核心库**:
37
- ```bash
38
- npm install react-docs-ui
39
- ```
40
-
41
- 2. **创建配置文件**:
42
- 在你的 `public` 目录下创建一个 `config` 文件夹,并在其中新建一个 `site.yaml` 文件。你可以从[这里](https://github.com/shenjianZ/react-docs-ui/blob/main/react-docs-ui/public/config/site.yaml)复制一个基础模板。
43
-
44
- 3. **创建文档目录**:
45
- 在 `public` 目录下创建一个 `docs` 文件夹,用于存放你的 Markdown 文件。例如: `public/docs/zh-cn/index.md`。
46
-
47
- 4. **修改应用入口文件**:
48
- 更新你的 `src/main.tsx` (或 `main.jsx`) 文件,渲染 `DocsApp` 组件来初始化应用。
49
-
50
- ```tsx
51
- // src/main.tsx
52
- import React from 'react'
53
- import ReactDOM from 'react-dom/client'
54
- import { DocsApp } from 'react-docs-ui'
55
- import 'react-docs-ui/dist/style.css' // 引入核心样式
56
-
57
- ReactDOM.createRoot(document.getElementById('root')!).render(
58
- <React.StrictMode>
59
- <DocsApp />
60
- </React.StrictMode>,
61
- )
62
- ```
63
- 5. **确保 `index.html` 中有 `<div id="root"></div>`**
@@ -1,28 +0,0 @@
1
- # 介绍
2
-
3
- React Docs UI 是一个专为构建现代化文档网站而设计的 React 组件库与工具集。它的核心哲学是**配置优于编码**,让你能将精力完全集中在内容创作上。
4
-
5
- ## 核心优势
6
-
7
- - **配置驱动**: 这是 React Docs UI 最核心的特性。你不需要编写复杂的 React 组件或路由逻辑,只需维护一个清晰的 `site.yaml` 文件,就能定义网站的导航、侧边栏、主题、页脚等所有内容。
8
-
9
- - **功能完备**: 开箱即用,提供了现代文档网站所需的一切:
10
- - 响应式布局
11
- - 明暗主题切换
12
- - 基于 Markdown 的内容渲染 (支持 GFM 和 Frontmatter)
13
- - 内置代码语法高亮
14
- - 快捷命令菜单 (Cmd+K)
15
- - 国际化支持
16
-
17
- - **极简上手**: 通过官方的 `create-react-docs-ui` 脚手架,你可以在一分钟内启动一个功能齐全的文档网站,无需任何复杂的环境配置。
18
-
19
- - **高度可定制**: 虽然开箱即用,但每个部分(如 Logo、配色、导航链接、社交媒体图标等)都可以通过配置文件进行深度定制。
20
-
21
- ## 适用场景
22
-
23
- 无论你是个人开发者还是团队,React Docs UI 都非常适合以下场景:
24
-
25
- - **开源项目文档**: 为你的 React 项目提供一个专业、易于维护的文档网站。
26
- - **产品手册**: 清晰地展示你的产品功能和使用指南。
27
- - **团队知识库**: 在团队内部沉淀和分享基于 React 技术的知识。
28
- - **个人博客或作品集**: 以优雅的方式组织和展示你的技术文章或项目。
@@ -1,108 +0,0 @@
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
-
108
- 你的网站现在应该运行在 `http://localhost:5173` 上了。访问它,你会看到更新后的标题、Logo,以及导航栏和侧边栏中新增的“关于”链接。恭喜你,你已经成功掌握了 React Docs UI 的基本工作流程!
@@ -1,10 +0,0 @@
1
- # 指南
2
-
3
- 本指南将帮助你全面了解并掌握 React Docs UI 的各项功能。无论你是初学者还是希望进行深度定制,都能在这里找到所需的信息。
4
-
5
- ## 目录
6
-
7
- - **[介绍](/guide/introduction)**: 了解 React Docs UI 的核心理念和主要优势。
8
- - **[安装](/guide/installation)**: 学习如何通过脚手架或手动方式安装。
9
- - **[快速上手](/guide/quick-start)**: 在 5 分钟内创建并运行你的第一个文档网站。
10
- - **[配置说明 (`site.yaml`)](/guide/configuration)**: 深入了解每个配置项,完全掌控你的网站。
@@ -1,34 +0,0 @@
1
- # React Docs UI
2
-
3
- 一个基于 React 的、**配置驱动**的现代化文档网站构建工具。
4
-
5
- React Docs UI 旨在让创建美观、功能强大的文档网站变得前所未有的简单。你只需专注于编写 Markdown 文档,其他的一切——从路由、导航到主题切换和命令菜单——都通过简单的 YAML 配置来驱动。
6
-
7
- ## 核心特性
8
-
9
- - **配置驱动**: 无需编码,通过 `site.yaml` 定义你的整个网站。
10
- - **开箱即用**: 极速启动项目,内置所有必需功能。
11
- - **现代设计**: 优雅的响应式布局,支持明暗主题自动切换。
12
- - **命令菜单**: 内置 `Cmd+K` 快捷菜单,快速访问页面。
13
- - **Markdown 支持**: 全面支持 GFM 和 Frontmatter。
14
- - **国际化**: 通过配置文件轻松实现多语言支持。
15
-
16
- ## 快速开始
17
-
18
- 只需一个命令,即可拥有你的专属文档网站:
19
-
20
- ```bash
21
- # 创建项目
22
- npx create-react-docs-ui@latest my-docs
23
-
24
- # 进入项目目录
25
- cd my-docs
26
-
27
- # 安装依赖并启动
28
- npm install && npm run dev
29
- ```
30
-
31
- ## 链接
32
-
33
- - **[指南](/guide/introduction)**: 开始了解 React Docs UI 的所有功能。
34
- - **[GitHub](https://github.com/shenjianZ/react-docs-ui)**: 查看源码、提交问题或贡献代码。
@@ -1,7 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
2
- <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
3
- <polyline points="14,2 14,8 20,8"/>
4
- <line x1="16" y1="13" x2="8" y2="13"/>
5
- <line x1="16" y1="17" x2="8" y2="17"/>
6
- <polyline points="10,9 9,9 8,9"/>
7
- </svg>
@@ -1,7 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
2
- <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
3
- <polyline points="14,2 14,8 20,8"/>
4
- <line x1="16" y1="13" x2="8" y2="13"/>
5
- <line x1="16" y1="17" x2="8" y2="17"/>
6
- <polyline points="10,9 9,9 8,9"/>
7
- </svg>
@@ -1,25 +0,0 @@
1
- # 图片目录
2
-
3
- 将您的图片文件放在这个目录中。
4
-
5
- 支持的格式:
6
- - PNG
7
- - JPG/JPEG
8
- - SVG
9
- - WebP
10
- - GIF
11
-
12
- ## 使用方式
13
-
14
- 在 Markdown 中引用图片:
15
-
16
- ```markdown
17
- ![图片描述](/images/your-image.png)
18
- ```
19
-
20
- 在配置文件中使用:
21
-
22
- ```yaml
23
- site:
24
- logo: "/images/logo.png"
25
- ```