在 Azure API 管理中修改开发人员门户上的页面内容和页面布局Modify the content and layout of pages on the developer portal in Azure API Management

在 Azure API 管理中自定义开发人员门户有三种基本方法:There are three fundamental ways to customize the developer portal in Azure API Management:

可用性Availability

Important

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

开发人员门户页面结构 Structure of developer portal pages

开发人员门户基于内容管理系统。The developer portal is based on a content management system. 每页的布局是基于一组小型页面元素(称为小组件)构建的:The layout of every page is built based on set of small page elements known as widgets:

开发人员门户页面结构

所有小组件均可编辑。All widgets are editable.

  • 特定于每个单独页面的核心内容驻留在“内容”小组件中。The core contents specific to each individual page reside in the "Contents" widget. 编辑页面意味着编辑此小组件的内容。Editing a page means editing the contents of this widget.
  • 所有页面布局元素都包含在剩余的小组件中。All page layout elements are contained with the remaining widgets. 对这些小组件所做的更改应用于所有页面。Changes made to these widgets are applied to all pages. 它们称为“布局小组件”。They are referred to as "layout widgets."

在日常页面编辑中,通常只修改“内容”小组件,此组件拥有针对每个单独页面的不同内容。In day-to-day page editing one would often modify just the Content widget, which will have different content for each individual page.

修改布局小组件的内容 Modifying the contents of a layout widget

开发人员门户可从 Azure 门户进行访问。The Developer portal is accessible from the Azure Portal.

  1. 单击 API 管理实例的工具栏中的“开发人员门户”。Click Developer Portal from the toolbar of your API Management instance.

  2. 若要编辑小组件的内容,请单击左侧“开发人员门户”菜单中由两个画刷组成的图标。To edit the contents of widgets, click the icon comprised of two paint brushes from the Developer portal menu on the left.

  3. 若要修改标头的内容,请滚动到左侧列表中的“标头”部分。To modify the contents of the header, scroll to the Header section in the list on the left.

    可以在字段中对小组件进行编辑。The widgets are editable from within the fields.

  4. 做好发布更改的准备以后,请单击页面底部的“发布”。Once you are ready to publish your changes, click Publish at the bottom of the page.

现在,就能够在开发人员门户中的每一页上看见此新的标题。Now you should be able to see the new header on every page within the developer portal.

后续步骤 Next steps