> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify-mintlify-add-hello-world-quickstart-48843.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 使用网页编辑器快速上手

> 了解如何使用网页编辑器创建和编辑文档

<img className="block dark:hidden my-0 pointer-events-none" src="https://mintcdn.com/mintlify-mintlify-add-hello-world-quickstart-48843/FYO7l_4g6ReiCSAk/images/editor/editor-light.png?fit=max&auto=format&n=FYO7l_4g6ReiCSAk&q=85&s=17914b283c822ea9dc6b8d96da0cc736" alt="浅色模式下的 Mintlify 网页编辑器界面" width="1184" height="320" data-path="images/editor/editor-light.png" />

<img className="hidden dark:block my-0 pointer-events-none" src="https://mintcdn.com/mintlify-mintlify-add-hello-world-quickstart-48843/FYO7l_4g6ReiCSAk/images/editor/editor-dark.png?fit=max&auto=format&n=FYO7l_4g6ReiCSAk&q=85&s=33bfd8a3aad29fcf7b4f4c114d254190" alt="深色模式下的 Mintlify 网页编辑器界面" width="1184" height="320" data-path="images/editor/editor-dark.png" />

网页编辑器是在浏览器中直接创建、编辑和审阅文档的可视化界面。

* **可视化编辑**：使用所见即所得（WYSIWYG）编辑器修改文档，实时呈现发布后的效果。
* **Git 同步**：所有更改会自动与你的 Git 仓库同步，确保版本控制。
* **团队协作**：多人可同时协作处理文档。
* **组件集成**：通过斜杠命令添加提示、代码块等组件。
* **零配置**：可在仪表板中立即开始写作。

<div id="web-editor-workflow">
  ## 网页编辑器工作流
</div>

以下是在网页编辑器中的常见工作方式：

<Steps>
  <Step title="选择分支">
    创建一个分支，或直接修改部署分支。我们建议创建分支，这样可以在更改上线前进行预览。
  </Step>

  <Step title="打开文件">
    在侧边栏中定位到现有文件，或使用文件浏览器新建文件。
  </Step>

  <Step title="编辑内容">
    在网页编辑器中进行编辑。试着使用右上角的切换按钮在可视化模式和 Markdown 模式之间转换，选择你更顺手的模式。
  </Step>

  <Step title="预览更改">
    可视化模式会展示更改在线上站点的呈现效果。用它来确认一切是否正确。
  </Step>

  <Step title="发布更改">
    如果你在部署分支上工作，可直接在网页编辑器中发布更改。在其他分支上，需要先创建拉取请求，审核通过后再发布。
  </Step>
</Steps>

<div id="editor-modes">
  ## 编辑器模式
</div>

网页编辑器提供两种模式，以满足不同的编辑习惯和需求。使用编辑器工具栏右上角的切换按钮在两种模式间切换。

<Frame>
  <img src="https://mintcdn.com/mintlify-mintlify-add-hello-world-quickstart-48843/FYO7l_4g6ReiCSAk/images/editor/mode-toggle-light.png?fit=max&auto=format&n=FYO7l_4g6ReiCSAk&q=85&s=cd6fc6e9d1d309eadfd252619f7ed332" alt="网页编辑器中高亮显示的模式切换图标。" className="block dark:hidden" width="3024" height="1216" data-path="images/editor/mode-toggle-light.png" />

  <img src="https://mintcdn.com/mintlify-mintlify-add-hello-world-quickstart-48843/FYO7l_4g6ReiCSAk/images/editor/mode-toggle-dark.png?fit=max&auto=format&n=FYO7l_4g6ReiCSAk&q=85&s=2215ab43c8730b610b6dd9e9a7973135" alt="网页编辑器中高亮显示的模式切换图标。" className="hidden dark:block" width="3016" height="1212" data-path="images/editor/mode-toggle-dark.png" />
</Frame>

<div id="visual-mode">
  ### 可视化模式
</div>

可视化模式提供所见即所得（WYSIWYG）体验：你在编辑器中的更改会原样发布到你的文档站点。此模式适用于希望实时预览更改效果的场景。

按下 `/` 打开组件菜单，添加样式化内容、提示、代码片段或其他组件。

<Frame>
  <img src="https://mintcdn.com/mintlify-mintlify-add-hello-world-quickstart-48843/KAieJWDWb9msJsqT/images/editor/visual-mode-light.png?fit=max&auto=format&n=KAieJWDWb9msJsqT&q=85&s=63c4d052d0db4b435f62d0cd67e852bb" alt="Mintlify 网页编辑器中的可视化编辑模式" className="block dark:hidden" width="3024" height="1232" data-path="images/editor/visual-mode-light.png" />

  <img src="https://mintcdn.com/mintlify-mintlify-add-hello-world-quickstart-48843/KAieJWDWb9msJsqT/images/editor/visual-mode-dark.png?fit=max&auto=format&n=KAieJWDWb9msJsqT&q=85&s=c25362f2cd0c0b4e5c0e29d605b98960" alt="Mintlify 网页编辑器中的可视化编辑模式" className="hidden dark:block" width="3018" height="1226" data-path="images/editor/visual-mode-dark.png" />
</Frame>

<div id="markdown-mode">
  ### Markdown 模式
</div>

Markdown 模式可直接访问文档的底层 `MDX` 代码。当你需要精确控制组件属性，或更倾向于使用 Markdown 语法编写时，此模式最为理想。

<Frame>
  <img src="https://mintcdn.com/mintlify-mintlify-add-hello-world-quickstart-48843/FYO7l_4g6ReiCSAk/images/editor/markdown-mode-light.png?fit=max&auto=format&n=FYO7l_4g6ReiCSAk&q=85&s=d6f9613132889c340e433db83032a664" alt="Mintlify 网页编辑器中的 Markdown 模式" className="block dark:hidden" width="3024" height="1248" data-path="images/editor/markdown-mode-light.png" />

  <img src="https://mintcdn.com/mintlify-mintlify-add-hello-world-quickstart-48843/FYO7l_4g6ReiCSAk/images/editor/markdown-mode-dark.png?fit=max&auto=format&n=FYO7l_4g6ReiCSAk&q=85&s=bc96316eb99e718a7fed0bbdeb6ff0f9" alt="Mintlify 网页编辑器中的 Markdown 模式" className="hidden dark:block" width="3016" height="1246" data-path="images/editor/markdown-mode-dark.png" />
</Frame>

<div id="next-steps">
  ## 下一步
</div>

* 学习基础的 [Git 概念](/zh/editor/git-concepts)。
* 掌握使用 [分支](/zh/editor/branches) 协作的最佳实践。
* 在网页编辑器中探索[内容管理](/zh/editor/content-management)。
* 了解不同场景下的[发布选项](/zh/editor/publishing)。