使用页面编辑器开发门户内容

本页面适用于 Apigee 和 Apigee Hybrid。

查看 Apigee Edge 文档。

使用页面编辑器，您可以使用 Markdown 或 HTML 定义门户内容。

探索页面编辑器

在查看页面列表时点击页面名称即可访问页面编辑器，如管理门户中的页面中所述。

系统会打开页面编辑器：

Cloud 控制台界面

经典版界面

借助页面编辑器，您可以：

• 修改门户内容 并在左窗格中添加 Angular Material 组件。
• 使用快速编辑工具栏快速应用格式或快速插入 Markdown 标记
• 在右侧窗格中修改页面详细信息，例如名称、路径和说明
• 在右侧窗格中管理网页的公开范围
• 预览门户内容
• 发布或取消发布页面（请参阅 发布门户内容）
• 在导航菜单中管理页面（请参阅 设置导航）
• 查看网页的上次发布时间
• 删除页面

在页面编辑器中编辑内容

Markdown 是一种简单的格式化语言，它使用简单易读的纯文本标记。其语法是使用标点符号指定的。Markdown 会先转换为 HTML，然后再在浏览器中渲染。

页面编辑器顶部的快速编辑工具栏 提供了用于应用格式（例如粗体、斜体等等）或插入 Markdown 标记（例如列表、图片、链接等）的快捷键。

如需快速了解 Markdown 语法，请在快速编辑工具栏中：

Cloud 控制台界面

点击 信息图标。

经典版界面

点击 图标。

系统会显示 Markdown 语法快速参考。

要撤消或重做上一条修改，请分别按 Command-z 或 Command-Shift-z。

注意：添加链接时，请注意以下几点：

• 向门户中的其他网页和图片添加链接时，如果您稍后决定 定制域名，我们建议您使用相对路径（而非绝对路径），以避免链接损坏。
• 向门户内的部分添加链接时，需要在链接定义中通过锚点添加页面名称。例如，[链接到锚] (pagename#anchorname)

如果您希望简化格式工作流程，建议您使用 Markdown。但是，它不会取代 HTML。在 HTML 您有大范围格式，但无法在 Markdown 中进行。例如，您可以为 HTML 中的元素指定 CSS 类，在 Markdown 中则不能：

   <p class="class1">

只需输入 HTML 标记，即可将 HTML 插入到内容正文中的任何位置。

注意：用 HTML 时，请注意以下事项：

• Markdown 语法在 HTML 标记内无效。
• 您必须在 HTML 文本块和之后的 Markdown 文本块之间添加换行符，以便使 Markdown 内容的格式正确。

要了解 HTML 标记，请参阅 HTML5 规范。

添加 Angular Material 组件

Angular Material 提供最先进的界面组件库。Angular Material 组件让您能够利用现代设计原则快速构建一致、自适应和可访问的界面。

可用组件

门户体验是使用 Angular Material 构建的，并且可以在网页中使用有限的一组 Angular Material 组件，如下表所示。

注意：示例门户的首页展示了如何使用和呈现其中的部分组件。下表中的部分示例基于首页内容，其中部分样式已移除以便于阅读。

组件	示例
按钮	以下代码创建一个带有高度的矩形按钮。 <a mat-raised-button href="quickstart"> Quick Start </a> 以下代码创建一个带有透明背景（带有警告图标）的圆形按钮。按钮颜色是使用 警告调色板 定义的。 <button mat-icon-button color="warn"> <mat-icon aria-label="Example warning">warning</mat-icon> </button>
卡片	以下代码可创建卡。该卡片包括按钮、图标组件以及标题和正文。按钮颜色是使用 主调色板 定义的。 <mat-card href="apis"> <mat-card-header color="primary"> <mat-icon> class </mat-icon> <h1> APIs </h1> </mat-card-header> <mat-card-content> <p class="home-page-card-content-text"> Learn about and try our APIs. </p> </mat-card-content> <mat-card-actions> <button mat-button> View APIs </button> </mat-card-actions> </mat-card>
Icon	以下代码创建了一个对勾图标。有关支持的图标的完整列表，请参阅 Material Design - 图标。 <mat-icon> check_circle </mat-icon>
工具栏	以下代码创建了一个带有文本和购物车图标的简单工具栏。 <mat-toolbar color="primary"> <span>My Store</span> <span class="space-buffer"></span> <mat-icon>add_shopping</mat-icon> </mat-toolbar>

管理门户页面的可见性

如需了解如何管理门户中页面的可见性，请参阅管理门户中页面的可见性。

预览门户内容

如需预览门户内容，请执行以下操作：

1. 如管理门户中的页面中所述，访问页面编辑器。

2. 预览页面。

   Cloud 控制台界面

   1. 点击保存。
   2. 点击预览。

   经典版界面

   1. 点击页面编辑器工具栏中的预览。
   2. 根据需要导航到门户中的其他页面以预览内容。
   注意：Apigee 建议您在发布门户内容之前进行预览。

发布门户内容

如需了解如何发布和取消发布门户内容，请参阅发布门户内容。

删除信息页

如需了解如何从门户中删除页面，请参阅从门户中删除页面。