Postup přizpůsobení portálu azure API Management pro vývojáře pomocí šablon

Existují tři základní způsoby, kterými jde přizpůsobit portál pro vývojáře ve službě Azure API Management:

Šablony slouží k přizpůsobení obsahu systémem generovaných stránek vývojářského portálu (například dokumentace k rozhraní API, produkty, ověřování uživatelů atd.). Pomocí syntaxe DotLiquid a poskytnuté sady lokalizovaných řetězcových prostředků, ikon a ovládacích prvků stránky můžete flexibilně konfigurovat obsah stránek podle potřeby.

Poznámka

Obsah této dokumentace se týká zastaralého portálu pro vývojáře. Můžete ho i nadále používat, jak je obvyklé, do svého vyřazení v říjnu 2023, když se odebere ze všech API Management Services. Nepoužívané portály budou dostávat jenom důležité aktualizace zabezpečení. Další podrobnosti najdete v následujících článcích:

Dostupnost

Důležité

tato funkce je dostupná na úrovních API Management Premium, Standard, Basic a Developer .

Přehled šablon portálu pro vývojáře

Úpravy šablon se provádí z portálu pro vývojáře, když se přihlásíte jako správce. Pokud se tam chcete dostat, otevřete nejprve Azure Portal a klikněte na Portál pro vývojáře na panelu nástrojů služby vaší API Management instance.

Pokud chcete získat přístup k šablonám portálu pro vývojáře, kliknutím na ikonu přizpůsobení na levé straně zobrazte nabídku vlastního nastavení a klikněte na Šablony.

Snímek obrazovky se zvýrazněnou ikonou přizpůsobení pro zobrazení nabídky vlastního nastavení

V seznamu šablon se zobrazuje několik kategorií šablon pokrývajících různé stránky na portálu pro vývojáře. Každá šablona je jiná, ale postup jejich úpravy a publikování změn je stejný. Pokud chcete šablonu upravit, klikněte na název šablony.

Šablony portálu pro vývojáře

Kliknutím na šablonu se zobrazí stránka portálu pro vývojáře, kterou si tato šablona může přizpůsobit. V tomto příkladu se zobrazí šablona Seznam produktů. Šablona seznam produktů řídí oblast obrazovky označenou červeným obdélníkem.

Šablona seznamu produktů

Některé šablony, jako jsou šablony profilů uživatelů, přizpůsobí různé části stejné stránky.

Šablony profilů uživatelů

Editor každé šablony portálu pro vývojáře má v dolní části stránky dva oddíly. Na levé straně se zobrazí podokno pro úpravy šablony a na pravé straně se zobrazí datový model šablony.

Podokno pro úpravy šablony obsahuje kód, který řídí vzhled a chování odpovídající stránky na portálu pro vývojáře. Kód v šabloně používá syntaxi DotLiquid. Jedním z oblíbených editorů pro DotLiquid je DotLiquid for Designers. Všechny změny provedené v šabloně během úprav se v prohlížeči zobrazí v reálném čase, ale vaši zákazníci ji nebudou vidět, dokud šablonu neuložete a ne publikujete.

Kód šablony

Podokno Data šablony poskytuje průvodce datovým modelem pro entity, které jsou k dispozici pro použití v konkrétní šabloně. Tento průvodce poskytuje zobrazením živých dat, která se aktuálně zobrazují na portálu pro vývojáře. Podokna šablon můžete rozbalit kliknutím na obdélník v pravém horním rohu podokna Data šablony.

Datový model šablony

V předchozím příkladu se na portálu pro vývojáře zobrazují dva produkty, které se načítaly z dat zobrazených v podokně Data šablony, jak je znázorněno v následujícím příkladu:

{
    "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
        }
    ]
}

Kód v šabloně seznamu produktů zpracuje data a poskytne požadovaný výstup iterací v kolekci produktů, aby se zobrazí informace, a odkazem na jednotlivé produkty. Všimněte <search-control> si <page-control> elementů a v kódu. Řídí zobrazení ovládacích prvků vyhledávání a stránkování na stránce. ProductsStrings|PageTitleProducts je lokalizovaný řetězcový odkaz, h2 který obsahuje text záhlaví stránky. Seznam řetězcových prostředků, ovládacích prvků stránek a ikon, které jsou k dispozici pro použití v šablonách portálu pro vývojáře, najdete API Management referenčních informací k šablonám portálu pro vývojáře.

<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>

Uložení šablony

Pokud chcete šablonu uložit, klikněte v editoru šablon na Uložit.

Uložení šablony

Uložené změny nejsou na portálu pro vývojáře aktivní, dokud nejsou publikované.

Publikování šablony

Uložené šablony je možné publikovat jednotlivě nebo všechny najednou. Pokud chcete publikovat jednotlivé šablony, klikněte v editoru šablon na publikovat.

Publikování šablony

Kliknutím na Ano šablonu potvrďte a na portálu pro vývojáře z živého nastavení.

Snímek obrazovky, který znázorňuje, kde vyberete Ano, aby byla šablona aktivní

Pokud chcete publikovat všechny aktuálně nepublikované verze šablon, klikněte v seznamu šablon na Publikovat. Nepublikované šablony jsou označeny hvězdičkou za názvem šablony. V tomto příkladu se publikovali šablony Product (Produkt) a Product (Produkt).

Publikování šablon

Potvrďte to kliknutím na Publikovat vlastní nastavení.

Potvrzení publikování

Nově publikované šablony jsou na portálu pro vývojáře efektivní okamžitě.

Vrácení šablony na předchozí verzi

Pokud chcete vrátit šablonu k předchozí publikované verzi, klikněte v editoru šablon na Vrátit.

Snímek obrazovky se zvýrazněnou ikonou, kterou používáte k vrácení šablony

Pro potvrzení klikněte na tlačítko Ano.

Snímek obrazovky znázorňující, kde výběrem možnosti Ano potvrďte změny

Po dokončení operace vrácení bude dříve publikovaná verze šablony k dispozici na portálu pro vývojáře.

Obnovení výchozí verze šablony

Obnovení šablon do výchozí verze je dvoukrokový proces. Nejprve je nutné obnovit šablony a pak musí být obnovené verze publikovány.

Pokud chcete obnovit jednu šablonu na výchozí verzi, klikněte v editoru šablon na Obnovit.

Vrácení šablony

Pro potvrzení klikněte na tlačítko Ano.

Confirm

Pokud chcete obnovit všechny šablony do výchozích verzí, klikněte v seznamu šablon na Obnovit výchozí šablony.

Obnovení šablon

Obnovené šablony se pak musí publikovat jednotlivě nebo všechny najednou podle postupu v části Publikování šablony.

Další kroky

Referenční informace k šablonám portálu pro vývojáře, prostředkům řetězců, ikonám a ovládacím prvkům stránek najdete v API Management referenčních informacík šablonám portálu pro vývojáře.