自訂開發人員入口網站頁面的風格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

重要

這項功能可用於 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.

    提示

    您可以即時預覽所有變更。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.