编辑方法

📁 文件结构

docs/
├── index.md              # 首页内容
├── frontend/             # 前端相关文档
│   ├── javascript.md     # 编辑方法（本文件）
│   └── examples.md       # 示例文档
├── chip/                 # 芯片相关文档
│   ├── wch/              # WCH 芯片系列
│   │   ├── ch582f.md     # CH582F 文档
│   │   └── ch582m.md     # CH582M 文档
│   └── esp/              # ESP32 芯片系列
│       ├── esp32c3.md    # ESP32-C3 文档
│       └── esp32s3.md    # ESP32-S3 文档
├── PDF/                  # PDF 文件目录
│   └── CH583DS1.PDF      # 数据手册等 PDF 文件
├── picture/              # 图片存放目录
└── .vitepress/           # VitePress 配置文件
    ├── config.js         # 主配置文件
    └── theme/            # 主题自定义
        ├── Layout.vue    # 布局组件
        ├── PasswordProtection.vue  # 密码保护组件
        ├── index.js      # 主题入口
        └── custom.css    # 自定义样式

✏️ 编辑现有页面

首页： docs/index.md
其他文档： 直接编辑对应的 .md 文件

➕ 添加新文档

创建文件： 在 docs 目录下创建 .md 文件（注意路径要与链接路径一致）
添加链接： 在 docs/.vitepress/config.js 的 sidebar 中添加：

二级菜单示例

javascript

{
  text: '一级菜单名称',
  collapsed: true,      // 默认折叠
  collapsible: true,    // 可折叠
  items: [
    { text: '文档名称', link: '/路径/文件名' }  // 注意：文件名不需要 .md 后缀
  ]
}

三级菜单示例

javascript

{
  text: '一级菜单',
  collapsed: true,
  collapsible: true,
  items: [
    {
      text: '二级菜单',
      collapsed: true,
      collapsible: true,
      items: [
        { text: '三级菜单项', link: '/路径/文件名' }
      ]
    }
  ]
}

四级菜单示例

javascript

{
  text: '芯片',
  collapsed: true,
  collapsible: true,
  items: [
    {
      text: 'WCH',              // 二级菜单
      collapsed: true,
      collapsible: true,
      items: [
        {
          text: 'CH58x',         // 三级菜单
          collapsed: true,
          collapsible: true,
          items: [               // 四级菜单
            { text: 'CH582F', link: '/chip/wch/ch582f' },
            { text: 'CH582M', link: '/chip/wch/ch582m' }
          ]
        }
      ]
    }
  ]
}

🖼️ 添加图片

放置图片： 将图片放在 docs/picture/ 目录

引用图片：

markdown

![描述](/picture/图片名.png)

或使用 HTML：

html

<img src="/picture/图片名.png" width="500" />

📄 添加 PDF 预览

放置 PDF： 将 PDF 文件放在 docs/public/PDF/ 目录（VitePress 会自动将 public 下的文件复制到站点根目录）
在 Markdown 中添加预览：

html

<div style="margin: 20px 0;">
  <div style="background: rgba(255, 255, 255, 0.05); border-radius: 8px; padding: 16px;">
    <h3 style="margin-top: 0; color: #667eea;">PDF 标题</h3>
    <a href="/PDF/文件名.PDF" target="_blank">📥 在新窗口打开 PDF</a>
    <a href="/PDF/文件名.PDF" download>💾 下载 PDF</a>
  </div>
  
  <div style="background: rgba(255, 255, 255, 0.05); border-radius: 8px; padding: 16px; margin-top: 16px;">
    <h3 style="margin-top: 0; color: #667eea;">PDF 预览</h3>
    <div style="position: relative; width: 100%; height: 800px; border-radius: 4px; overflow: hidden; background: #1e1e1e;">
      <iframe 
        src="/PDF/文件名.PDF" 
        style="width: 100%; height: 100%; border: none;"
        type="application/pdf"
        title="PDF 预览">
        <p>您的浏览器不支持 PDF 预览。
          <a href="/PDF/文件名.PDF" target="_blank">点击这里下载 PDF</a>
        </p>
      </iframe>
    </div>
  </div>
</div>

注意： PDF 路径使用 /PDF/文件名.PDF（相对于网站根目录）

🔐 修改密码

文件： docs/.vitepress/theme/PasswordProtection.vue
位置： 第 33 行

javascript

const correctPassword = '91545620'  // 修改为你想要的密码

密码验证状态会保存在 localStorage 中，24 小时有效。

📝 常用 Markdown 语法

基础语法

标题： # 一级标题 ## 二级标题 ### 三级标题
列表： - 无序列表 1. 有序列表
代码： ```语言包裹代码块，或 `行内代码`
链接： [文本](URL) 或 [文本](URL "标题")
粗体/斜体： **粗体** *斜体* ***粗斜体***
删除线： ~~删除的文本~~
表格： 使用 | 分隔列，:---: 表示居中
引用： > 引用文本
任务列表： - [x] 已完成 - [ ] 未完成

数学公式（KaTeX）

行内公式： 使用单个 $ 包裹

这是行内公式 $E = mc^2$

块级公式： 使用双 $$ 包裹

$$
\sum_{i=1}^{n} x_i = x_1 + x_2 + \cdots + x_n
$$

Mermaid 图表

支持流程图、序列图、甘特图、状态图、类图等：

markdown

```mermaid
graph TD
    A[开始] --> B{判断条件}
    B -->|是| C[执行操作1]
    B -->|否| D[执行操作2]
```

更多图表示例请查看示例文档。

VitePress 特殊语法

提示框：
```
::: tip 提示
这是提示内容
:::
```

警告框：

::: warning 警告
这是警告内容
:::

详细信息：

::: details 点击展开
折叠的内容
:::

🚀 部署

编辑文件并保存
推送到 GitHub：git add . → git commit -m "更新" → git push
Vercel 自动部署（1-2分钟）

⚙️ 侧边栏配置

基本配置

在 docs/.vitepress/config.js 的 sidebar 数组中：

javascript

sidebar: [
  {
    text: '一级菜单名称',      // 显示在侧边栏的文本
    collapsed: true,            // 默认折叠状态
    collapsible: true,          // 是否可折叠
    items: [                    // 子菜单项
      { text: '文档名称', link: '/路径/文件名' }
    ]
  }
]

多级菜单配置（四级菜单示例）

javascript

sidebar: [
  {
    text: '芯片',                // 一级菜单
    collapsed: true,
    collapsible: true,
    items: [
      {
        text: 'WCH',              // 二级菜单
        collapsed: true,
        collapsible: true,
        items: [
          {
            text: 'CH58x',         // 三级菜单
            collapsed: true,
            collapsible: true,
            items: [               // 四级菜单
              { text: 'CH582F', link: '/chip/wch/ch582f' },
              { text: 'CH582M', link: '/chip/wch/ch582m' }
            ]
          }
        ]
      },
      {
        text: 'ESP32',            // 二级菜单
        collapsed: true,
        collapsible: true,
        items: [                   // 三级菜单
          { text: 'ESP32-C3', link: '/chip/esp/esp32c3' },
          { text: 'ESP32-S3', link: '/chip/esp/esp32s3' }
        ]
      }
    ]
  }
]

配置说明

text: 菜单显示的文本
link: 文档路径（相对于 docs 目录，不需要 .md 后缀）
collapsed: true 表示默认折叠，false 表示默认展开
collapsible: true 表示可以折叠/展开，false 表示始终展开

🎨 自定义样式

修改菜单样式

文件： docs/.vitepress/theme/custom.css

当前样式特点：

一级菜单：15px 字体，加粗（600），带 📁 图标，颜色 rgba(255, 255, 255, 0.9)
二级菜单：14px 字体，中等粗细（500），带 📄 或 📂 图标，颜色 rgba(255, 255, 255, 0.75)
三级菜单：13px 字体，正常粗细（400），带 • 圆点，颜色 rgba(255, 255, 255, 0.65)
四级菜单：12px 字体，正常粗细（400），带 ○ 圆圈，颜色 rgba(255, 255, 255, 0.55)

每级菜单都有不同的缩进和左侧边框，便于区分层级。

修改主题颜色

在 custom.css 中修改 CSS 变量：

css

:root {
  --vp-c-brand: #667eea;        /* 主品牌色 */
  --vp-c-brand-light: #764ba2;  /* 浅色品牌色 */
}

🔧 配置文件说明

config.js 主要配置项

title: 网站标题（当前：技术总结文档）
base: 部署路径（Vercel 使用 /）
markdown.config: Markdown 扩展配置（KaTeX、Mermaid）
head: 头部资源（CSS、JS）
themeConfig.sidebar: 侧边栏配置
themeConfig.nav: 导航栏配置
themeConfig.search: 搜索配置（当前使用本地搜索）

🚀 本地预览

使用预览脚本

项目根目录提供了 yulan.bat 脚本，双击运行即可启动本地开发服务器：

双击运行 yulan.bat
自动安装依赖（首次运行）
启动开发服务器（支持热重载）
浏览器自动打开预览页面（通常是 http://localhost:5173）

修改任何文件后，页面会自动刷新。

手动启动

bash

# 安装依赖（首次运行）
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 预览构建结果
npm run preview

📚 更多示例

查看示例文档了解：

完整的 Markdown 语法示例
HTML 元素使用示例
卡片样式示例
Mermaid 图表示例
数学公式示例
PDF 预览示例

CH583/CH582/CH581

CH59x

编辑方法

📁 文件结构

✏️ 编辑现有页面

➕ 添加新文档

二级菜单示例

三级菜单示例

四级菜单示例

🖼️ 添加图片

📄 添加 PDF 预览

🔐 修改密码

📝 常用 Markdown 语法

基础语法

数学公式（KaTeX）

Mermaid 图表

VitePress 特殊语法

🚀 部署

⚙️ 侧边栏配置

基本配置

多级菜单配置（四级菜单示例）

配置说明

🎨 自定义样式

修改菜单样式

修改主题颜色

🔧 配置文件说明

config.js 主要配置项

🚀 本地预览

使用预览脚本

手动启动

📚 更多示例

CH583/CH582/CH581

CH59x

编辑方法 ​

📁 文件结构 ​

✏️ 编辑现有页面 ​

➕ 添加新文档 ​

二级菜单示例 ​

三级菜单示例 ​

四级菜单示例 ​

🖼️ 添加图片 ​

📄 添加 PDF 预览 ​

🔐 修改密码 ​

📝 常用 Markdown 语法 ​

基础语法 ​

数学公式（KaTeX） ​

Mermaid 图表 ​

VitePress 特殊语法 ​

🚀 部署 ​

⚙️ 侧边栏配置 ​

基本配置 ​

多级菜单配置（四级菜单示例） ​

配置说明 ​

🎨 自定义样式 ​

修改菜单样式 ​

修改主题颜色 ​

🔧 配置文件说明 ​

config.js 主要配置项 ​

🚀 本地预览 ​

使用预览脚本 ​

手动启动 ​

📚 更多示例 ​

编辑方法

📁 文件结构

✏️ 编辑现有页面

➕ 添加新文档

二级菜单示例

三级菜单示例

四级菜单示例

🖼️ 添加图片

📄 添加 PDF 预览

🔐 修改密码

📝 常用 Markdown 语法

基础语法

数学公式（KaTeX）

Mermaid 图表

VitePress 特殊语法

🚀 部署

⚙️ 侧边栏配置

基本配置

多级菜单配置（四级菜单示例）

配置说明

🎨 自定义样式

修改菜单样式

修改主题颜色

🔧 配置文件说明

config.js 主要配置项

🚀 本地预览

使用预览脚本

手动启动

📚 更多示例