---
title: 网页编辑器
description: "在浏览器中编辑 Jamdesk 文档：浏览已连接的仓库，实时预览编辑 MDX，并直接提交到 GitHub，自动触发构建。"
---

> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.

<YouTube id="cYhvMdPzcv8" />

网页编辑器让你无需克隆仓库或接触终端，即可直接在 Jamdesk 仪表板中编辑文档。打开页面，在旁边实时预览 MDX 编辑效果，然后将更改提交到 GitHub 分支。每次提交都会自动开始构建，因此更改上线的方式与执行 `git push` 相同。

屏幕截图显示的是英文界面。

它是[本地预览](/cn/development/local-preview)和 [VS Code 扩展](/cn/development/vscode-extension)的浏览器版替代方案。当你想从任何地方快速修改内容，或完全不想克隆仓库时，可以使用它。

<Frame>
  <img src="/images/dashboard/web-editor.webp" alt="Jamdesk 网页编辑器：左侧为页面导航，中间为 MDX 编辑器，右侧为实时预览" />
</Frame>

## 打开编辑器

在仪表板侧边栏中点击 **Editor**。编辑器会打开项目已连接的仓库和默认分支。

<Note>
编辑器要求使用[已连接的 GitHub 仓库](/cn/setup/connecting-github)，并需要宽屏（桌面设备）。在较窄的窗口中，编辑器会显示“wider browser needed”通知，因为代码窗格和预览窗格需要足够空间并排显示。所有计划的项目所有者和团队成员均可使用。
</Note>

## 界面

编辑器包含三个窗格：

| 窗格 | 功能 |
|------|--------------|
| **Navigation**（左侧） | 从 `docs.json` 读取你的网站页面和分组。筛选页面、打开 **Configuration**（`docs.json`）编辑器，或点击 **Add page**。 |
| **Editor**（中间） | 用于编辑当前打开文件的 MDX 代码编辑器，支持语法高亮和字数统计。 |
| **Preview**（右侧） | 页面实时渲染结果，会随着输入同步更新。切换 **Desktop / Mobile** 和 **Light / Dark**，检查页面显示效果。 |

正在编辑的分支显示在左上角；使用分支选择器切换分支。

## 编辑页面

在导航中点击任意页面将其打开。在中间窗格编辑 MDX，并观察预览实时更新。在提交之前，编辑内容会作为本地草稿保存在浏览器中，因此你可以在页面之间切换而不会丢失工作。在你选择提交之前，不会向 GitHub 写入任何内容。

## 添加页面

点击 **Add page**，无需离开编辑器即可创建新页面：

1. 选择一个起始模板。
2. 输入标题。页面的文件名会根据标题自动生成。
3. 选择页面所属的导航分组。

新页面会以草稿形式打开。提交时，Jamdesk 会在同一次提交中同时写入新的 `.mdx` 文件和 `docs.json` 导航条目。

## 提交更改

准备发布时，将待处理的更改提交到 GitHub：

<Steps>
  <Step title="打开提交对话框">
    点击 **Commit**。对话框会列出所有已更改的文件（页面、`docs.json`，或多个文件）。
  </Step>
  <Step title="编写消息">
    输入提交消息，或点击 **Generate**，让 Jamdesk 根据差异内容生成消息。
  </Step>
  <Step title="提交">
    Jamdesk 会将更改提交到当前分支，并立即开始构建。你可以在项目的 **Builds** 页面跟踪构建。
  </Step>
</Steps>

不想保留这些编辑内容？**Revert** 会丢弃当前页面未保存的更改，并恢复已提交的版本。

## 处理外部更改

如果其他人在你编辑期间向同一分支推送更改，编辑器会检测到分支发生移动并标记出来。提交时，任何在上游发生更改的文件都会以三方合并的形式显示，以便你协调两个版本。你的本地编辑内容不会被丢弃。

<Tip>
从编辑器提交与从自己的计算机推送完全一样：它会向你的仓库写入真实提交，并触发相同的构建流水线。如果文档位于仓库的子目录中（[monorepo 配置](/cn/setup/monorepo-support)），编辑器会自动在该目录中读取和写入文件。
</Tip>

## 要求

| 要求 | 详情 |
|-------------|--------|
| **已连接 GitHub** | 项目必须有已连接的仓库和分支。 |
| **桌面浏览器** | 需要宽屏（约 1400px 以上）；编辑器不适用于移动设备宽度。 |
| **访问权限** | 任意项目所有者或成员均可使用。编辑操作会写入你的仓库，因此通常的写入限制（例如订阅逾期）同样适用。 |

## 接下来做什么？

<Columns cols={2}>
  <Card title="本地预览" icon="eye" href="/cn/development/local-preview">
    使用 CLI 在本地预览和编辑
  </Card>
  <Card title="部署工作原理" icon="rocket" href="/cn/deploy/lifecycle">
    提交后会发生什么
  </Card>
</Columns>