如何使用範本自訂 Azure API 管理開發人員入口網站。

文章
11/04/2019

在 Azure API 管理中自訂開發人員入口網站的基本方式有三種：

範本可用來自訂系統產生之開發人員入口網站網頁的內容 (例如 API 文件、產品、使用者驗證等)。使用 DotLiquid 語法及一組提供的當地語系化字串資源、圖示和頁面控制項，您可以依照您的想法自由靈活地設定頁面內容。

注意

下列文件內容與已淘汰的開發人員入口網站相關。您可以照舊繼續使用，直到其在 2023 年 10 月淘汰，屆時便會將其從所有 API 管理服務中移除。已淘汰的入口網站只會收到重大安全性更新。如需詳細資料，請參閱下列文章：

可用性

重要

這項功能可用於 API 管理的進階、標準、基本與開發人員層。

如需 v2 層 (預覽) 的功能可用性，請參閱 v2 層概觀。

開發人員入口網站範本概觀

當您以系統管理員身分登入時，可從 [開發人員入口網站] 編輯範本。若要到達該處，請開啟 Azure 入口網站，然後從 API 管理執行個體的服務工具列按一下 [開發人員入口網站]。

若要存取開發人員入口網站範本，請按一下左側的自訂圖示，顯示 [自訂] 功能表，然後按一下 [範本] 。

[範本] 清單會顯示數個範本類別，涵蓋開發人員入口網站的不同頁面。每個範本各不相同，但是編輯和發佈變更的步驟是一樣的。若要編輯範本，請按一下範本的名稱。

按一下範本即會將您帶到可使用該範本自訂的開發人員入口網站頁面。這個範例會顯示產品清單範本。 產品清單 範本控制的畫面區域會以紅色矩形表示。

產品清單範本

有些範本，像是 使用者設定檔 範本，自訂的是同一頁面的不同部分。

每個開發人員入口網站範本的編輯器都會在頁面底部顯示兩個區段。左側顯示範本的編輯窗格，右側顯示範本的資料模型。

範本編輯窗格包含的標記，可控制開發人員入口網站中對應頁面的外觀和行為。範本中的標記會使用 DotLiquid 語法。常用的 DotLiquid 編輯器是 DotLiquid for Designers。在編輯期間對範本進行的任何變更都會即時顯示在瀏覽器中，但您的客戶要到您儲存和發佈範本後才看得到。

範本標記

[範本資料] 窗格可為能在特定範本中使用的實體，提供有關資料模型的指南。它提供這份指南的方法是顯示開發人員入口網站中目前顯示的即時資料。您可以按一下 [範本資料] 窗格右上角的矩形，展開範本窗格。

範本資料模型

上述範例在開發人員入口網站中顯示了兩項產品，擷取自 [範本資料] 窗格顯示的資料，如下列範例所示：

{
    "Paging": {
        "Page": 1,
        "PageSize": 10,
        "TotalItemCount": 2,
        "ShowAll": false,
        "PageCount": 1
    },
    "Filtering": {
        "Pattern": null,
        "Placeholder": "Search products"
    },
    "Products": [
        {
            "Id": "56ec64c380ed850042060001",
            "Title": "Starter",
            "Description": "Subscribers will be able to run 5 calls/minute up to a maximum of 100 calls/week.",
            "Terms": "",
            "ProductState": 1,
            "AllowMultipleSubscriptions": false,
            "MultipleSubscriptionsCount": 1
        },
        {
            "Id": "56ec64c380ed850042060002",
            "Title": "Unlimited",
            "Description": "Subscribers have completely unlimited access to the API. Administrator approval is required.",
            "Terms": null,
            "ProductState": 1,
            "AllowMultipleSubscriptions": false,
            "MultipleSubscriptionsCount": 1
        }
    ]
}

產品清單 範本中的標記會處理資料，逐一查看產品集合，顯示每項個別產品的資訊和連結，來提供所需的輸出。請注意標記中的 <search-control> 和 <page-control> 元素。這些控制項會顯示頁面的搜尋和分頁控制項。 ProductsStrings|PageTitleProducts 是當地語系化的字串參考，其中包含頁面的 h2 標頭文字。如需字串資源、頁面控制項和開發人員入口網站範本可用圖示的清單，請參閱 API 管理開發人員入口網站範本參考。

<search-control></search-control>
<div class="row">
    <div class="col-md-9">
        <h2>{% localized "ProductsStrings|PageTitleProducts" %}</h2>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
    {% if products.size > 0 %}
    <ul class="list-unstyled">
    {% for product in products %}
        <li>
            <h3><a href="/products/{{product.id}}">{{product.title}}</a></h3>
            {{product.description}}
        </li>
    {% endfor %}
    </ul>
    <paging-control></paging-control>
    {% else %}
    {% localized "CommonResources|NoItemsToDisplay" %}
    {% endif %}
    </div>
</div>