文档工具简介

安装与启动

# 安装
pnpm i

# 启动文档
npm run doc-dev


# 打开浏览器
# 上诉命令行运行后输入英文字母 `o`
Shortcuts
press r to restart the server
press u to show server url
press o to open in browser
press c to clear console
press q to quit (x2)

文件夹介绍

文件目录即决定生成的文档链接，所见即所得。更多参考 Vite 官网。本项目基于 Vite 默认配置和主题二次开发。

/src 存放所有资源文件

# 参考 https://vitepress.dev/zh/guide/asset-handling#the-public-directory
/src/public 所有公共资源

导航配置

文件创建后，如果需要添加顶部或左侧入口，需要在以下文件写入入口配置

/docs/.vitepress/config/en.ts

sidebarGuide 左侧菜单配置
nav 顶部导航配置

Markdown 链接卡片

创建一组美化的链接卡片

:::link-group
[![alt](./material-symbols-light_android.svg 'Android')Android](/guide/android)
[![alt](/ic_outline-apple.svg 'iOS')iOS](/guide/ios)
[![alt](/vscode-icons_file-type-vue.svg 'Vue')Vue](/guide/android)
[![alt](/skill-icons_react-dark.svg 'React JS')React JS](/guide/android)
[![alt](/logos_react.svg 'Title')React][1]

:::
[1]: https://react.dev/learn

效果展示

AndroidiOSVueReact JSReact

TIP

图片文件可以放在同文件夹，使用相对路径 ./material-symbols-light_android.svg，或者放到 /src/public 文件夹使用绝对路径，同样可使用网络资源代替。

Markdown Step 分组

创建一组步骤分组

---
step: true
---

效果展示

将自动识别文档中的 H1 标题到下一个 H1 标题开始位置的内容，并把 H1 标题内容作为步骤名。见本文档，效果展示。

Markdown Tab 分组

创建一组 Tab 切换步骤分组

::: tab

### Title 1

lorem1

---

### not a number

111

---

### content- 23

lorem2

---

### content34

lorem3

:::

在 tab 内部会自动以 --- 水平线代表分隔，每个分块的，内容区的第一个标题，将作为 tab 的 title。

注意

tab 分组中， 标题尽量使用 H3 以下的标签作为标题，样式更加符合。

效果展示

Title 1

lorem1

not a number

111

中文

lorem2

content34

lorem3

包管理和代码直接执行

React 代码运行示例

export default function App() {
  const data: string = "world"

  return <h1>Hello {data}</h1>
}

Open Sandbox

学习完成

您已完成所有学习，请开始书写你的文档。

请在 src 文件夹创建自己的文件，并修改 URL 打开 如需要加入导航，请参考 导航配置