> ## Documentation Index
> Fetch the complete documentation index at: https://wiki.another-horizon.eu/llms.txt
> Use this file to discover all available pages before exploring further.

# 创建和编辑页面

> 在 Web 编辑器中创建、编辑和组织文档页面。

<div id="navigate-files">
  ## 浏览文件
</div>

在左侧面板的 **Navigation** 标签页中浏览文档文件。

* 点击导航项以展开或折叠。
* 点击文件将在编辑器中打开它。
* 点击搜索 icon，或按下 <kbd>Cmd</kbd> + <kbd>P</kbd>（macOS）或 <kbd>Ctrl</kbd> + <kbd>P</kbd>（Windows），按名称搜索文件。

<div id="create-new-pages">
  ## 创建新页面
</div>

1. 在要添加页面的导航区域中，点击 **+** 按钮。
2. 点击 **Add a page**。
3. 输入文件名，编辑器会自动添加 `.mdx` 扩展名。

<div id="edit-content">
  ## 编辑内容
</div>

使用工具栏中的开关在可视化模式和 Markdown 模式之间切换。切换模式时，Web 编辑器会保存你的更改。

<Frame>
  <img src="https://mintcdn.com/anotherhorizon/UHlRmQ8bvjzUmdum/images/editor/mode-toggle-light.png?fit=max&auto=format&n=UHlRmQ8bvjzUmdum&q=85&s=c5534234892643e49278e8b6da0db572" alt="工具栏中的模式切换开关。" className="block dark:hidden" width="174" height="82" data-path="images/editor/mode-toggle-light.png" />

  <img src="https://mintcdn.com/anotherhorizon/UHlRmQ8bvjzUmdum/images/editor/mode-toggle-dark.png?fit=max&auto=format&n=UHlRmQ8bvjzUmdum&q=85&s=87fdb247bbfd75328246cd707e338f82" alt="工具栏中的模式切换开关。" className="hidden dark:block" width="174" height="82" data-path="images/editor/mode-toggle-dark.png" />
</Frame>

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

在编辑内容时实时预览其发布后的效果。

* **添加文本**：在编辑器中输入，查看文本在发布后如何呈现。
* **格式化文本**：使用工具栏将文本加粗、设置为斜体或应用其他格式。
* **添加组件**：按下 <kbd>/</kbd> 打开组件菜单并选择组件。
* **添加图片**：从 <kbd>/</kbd> 菜单中使用 image 组件。
* **插入链接**：选中文本并按 <kbd>Cmd</kbd> + <kbd>K</kbd>。

完整的可用组件列表请参见 [Components](/zh/components) 文档。

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

编辑 MDX 源代码。

* **直接编辑 MDX**：编写 MDX 和 Markdown 语法，以精确控制内容。
* **语法高亮**：代码会高亮显示，提升可读性。
* **组件属性**：设置组件属性和配置。
* **Frontmatter**：编辑文件顶部的页面元数据。

有关 MDX 语法的更多信息，请参阅 [格式化文本](/zh/create/text) 和 [格式化代码](/zh/create/code)。

<div id="configure-pages">
  ## 配置页面
</div>

通过配置页面设置，可以控制页面在导航、搜索结果以及站点布局中的显示方式。右键单击文件并选择 **Configure**，即可打开页面配置面板。

<div id="customize-navigation-appearance">
  ### 自定义导航外观
</div>

控制页面在站点导航侧边栏中的显示方式。

* **标题**：设置主标题。会显示在导航、浏览器标签页和搜索结果中。
* **侧边栏标题**：当完整标题在侧边栏中过长时，可以在导航中显示更短的文本。
* **图标**：在页面旁边添加视觉标记，帮助用户快速识别。
* **外部 URL**：链接到外部站点，而不是某个页面。使用此选项将外部资源添加到你的导航中。

<div id="optimize-for-search-and-sharing">
  ### 为搜索和分享进行优化
</div>

帮助用户找到你的页面，并优化页面在被分享时的展示效果。

* **Description**：撰写简短摘要。会显示在搜索结果和 SEO（搜索引擎优化）元标签中。
* **Keywords**：添加相关搜索词，帮助用户更容易发现此页面。
* **OG Image URL**：为社交媒体分享和链接预览设置自定义预览图片。

<div id="control-page-layout">
  ### 控制页面布局
</div>

根据你的内容需求选择页面的展示方式。

* **标准布局**（`default`）：带有侧边栏导航和目录的默认页面。
* **全宽布局**（`wide`）：隐藏目录，为表格、图表或其他内容提供更宽的布局。
* **居中布局**（`center`）：隐藏侧边栏和目录，以提升更新日志等文本较多页面的可读性。
* **自定义宽度**（`custom`）：仅保留顶部导航栏的极简布局，适用于着陆页或其他特殊布局。

<div id="manage-files">
  ## 管理文件
</div>

要在导航中移动文件，请将它们拖放到所需位置。

要复制或删除文件，请右键单击该文件并选择相应的操作。