自定义开发人员门户页面的样式

在 Azure API 管理中自定义开发人员门户有三种最常见的方法：

• 编辑静态页面内容和页面布局元素
• 跨开发人员门户更新页面元素所用的样式（本指南中所述）
• 修改门户生成的页面所用的模板（例如 API 文档、产品和用户身份验证）

本文介绍如何自定义旧版开发人员门户页面上元素的样式并查看更改 。

注意

以下文档内容与已弃用的开发人员门户有关。 你可以像往常一样继续使用它，直到它在 2023 年 10 月停用，届时将从所有 API 管理服务中将其删除。 弃用的门户只会接收关键安全更新。 有关更多详细信息，请参阅以下文章：

• 了解如何迁移到新的开发人员门户
• Azure API 管理新开发人员门户概述
• 访问和自定义新的开发人员门户

可用性

重要

此功能在 API 管理的“高级”、“标准”、“基本”和“开发人员”层中可用 。

有关 v2 层 (预览) 的功能可用性，请参阅 v2 层概述。

先决条件

• 了解 Azure API 管理术语。
• 请完成以下快速入门：创建一个 Azure API 管理实例。
• 此外，请完成以下教程：导入并发布第一个 API。

自定义开发人员门户

1. 选择“概述”。

2. 单击“概述”窗口顶部的“开发人员门户(旧版)”按钮 。

3. 在屏幕的左上方，可以看到由两支画笔构成的图标。 将鼠标悬停在此图标上，打开门户自定义菜单。

   

4. 从菜单中选择“样式”，打开样式自定义窗格。

   可以使用“样式”自定义的所有元素都显示在该页面上

5. 在“更改变量值以自定义开发人员门户外观:”字段中输入“headings-color”。

   @headings-color 元素将显示在页面上。 此变量控制文本的颜色。

   

6. 单击 @headings-color 变量对应的字段。

   此时会打开颜色选取器下拉列表。

7. 从颜色选取器下拉列表中选择一种新颜色。

   提示

   可实时预览所有更改。 自定义窗格顶部会显示进度指示器。 几秒钟后，标题文本的颜色将更改为刚刚选择的颜色。

8. 选择自定义窗格菜单左下角的“发布”。

9. 选择“发布自定义项”，以公开所做的更改。

查看更改

1. 导航到开发人员门户。
2. 可以看到所做的更改。

后续步骤

你还可能希望了解如何使用模板自定义 Azure API 管理开发人员门户。