自定义开发人员门户页面的样式Customize the style of the Developer portal pages

在 Azure API 管理中自定义开发人员门户有三种最常见的方法:There are three most common ways to customize the Developer portal in Azure API Management:

本教程介绍如何执行下列操作:In this tutorial, you learn how to:

  • 自定义开发人员门户页面中元素的样式Customize the style of elements on pages of the Developer portal
  • 查看更改View your change

自定义样式

先决条件Prerequisites

可用性Availability

Important

此功能在 API 管理的“高级”、“标准”、“基本”和“开发人员”层中可用。This feature is available in the Premium, Standard, Basic and Developer tiers of API Management.

自定义开发人员门户Customize the Developer portal

  1. 选择“概述”。Select Overview.

  2. 单击“概述”窗口顶部的“开发人员门户”按钮。Click the Developer portal button on the top of the Overview window. 或者,可以单击“开发人员门户 URL”链接。Alternatively, you can click the Developer portal URL link.

  3. 在屏幕的左上方,可以看到由两支画笔构成的图标。On the upper left side of the screen, you see an icon comprised of two paint brushes. 将鼠标悬停在此图标上,打开门户自定义菜单。Hover over this icon to open the portal customization menu.

    自定义样式

  4. 从菜单中选择“样式”,打开样式自定义窗格。Select Styles from the menu to open the styling customization pane.

    可以使用“样式”自定义的所有元素都显示在该页面上All elements that you can customize using Styles appear on the page

  5. 在“更改变量值以自定义开发人员门户外观:”字段中输入“headings-color”。Enter "headings-color" in the Change variable values to customize developer portal appearance: field.

    @headings-color 元素将显示在页面上。The @headings-color element appears on the page. 此变量控制文本的颜色。This variable controls the color of the text.

    自定义样式

  6. 单击 @headings-color 变量对应的字段。Click on the field for the @headings-color variable.

    此时会打开颜色选取器下拉列表。Color picker drop-down opens.

  7. 从颜色选取器下拉列表中选择一种新颜色。From the color pickers drop-down select a new color.

    Tip

    可实时预览所有更改。Real-time preview is available for all changes. 自定义窗格顶部会显示进度指示器。A progress indicator appears at the top of the customization pane. 几秒钟后,标题文本的颜色将更改为刚刚选择的颜色。After a couple seconds the header text changes in color to the newly selected.

  8. 选择自定义窗格菜单左下角的“发布”。Select Publish from the lower left on the customization pane menu.

  9. 选择“发布自定义项”,以公开所做的更改。Select Publish customizations to make the changes publicly available.

查看更改View your change

  1. 导航到开发人员门户。Navigate to the Developer portal.
  2. 可以看到所做的更改。You can see the change that you made.

后续步骤Next steps

在本教程中,你已学习了如何执行以下操作:In this tutorial, you learned how to:

  • 自定义开发人员门户页面中元素的样式Customize the style of elements on pages of the Developer portal
  • 查看更改View your change

你可能还有兴趣了解如何使用模板自定义 Azure API 管理开发人员门户You might also be interested in learning how to customize the Azure API Management developer portal using templates.