Anpassa Azure API Management-utvecklarportalen med hjälp av mallar

Det finns tre grundläggande metoder för att anpassa utvecklarportalen i Azure API Management:

Mallar används för att anpassa innehållet på systemgenererade utvecklarportalsidor (till exempel API-dokument, produkter, användarautentisering osv.). Med dotLiquid-syntax och en uppsättning lokaliserade strängresurser, ikoner och sidkontroller har du stor flexibilitet att konfigurera innehållet på sidorna som du vill.

Anteckning

Dokumentations innehållet är om den föråldrade Developer-portalen. Du kan fortsätta att använda det, enligt vanligt, tills det upphör att gälla i oktober 2023 när det tas bort från alla API Management tjänster. Den inaktuella portalen får bara kritiska säkerhets uppdateringar. Mer information finns i följande artiklar:

Tillgänglighet

Viktigt

Den här funktionen är tillgänglig på nivån Premium, standard, Basic och Developer för API Management.

Översikt över mallar för utvecklarportalen

Redigering av mallar görs från utvecklarportalen när du är inloggad som administratör. För att komma dit öppnar du Azure Portal klickar på Utvecklarportal i verktygsfältet för din API Management instans.

Om du vill komma åt mallarna för utvecklarportalen klickar du på anpassa-ikonen till vänster för att visa anpassningsmenyn och klickar på Mallar.

Skärmbild som visar anpassa-ikonen för att visa anpassningsmenyn.

I listan över mallar visas flera kategorier av mallar som täcker de olika sidorna i utvecklarportalen. Varje mall är olika, men stegen för att redigera dem och publicera ändringarna är desamma. Om du vill redigera en mall klickar du på namnet på mallen.

Mallar för utvecklarportalen

Om du klickar på en mall kommer du till utvecklarportalsidan som kan anpassas av mallen. I det här exemplet visas mallen Produktlista. Mallen Produktlista styr området på skärmen som anges av den röda rektangeln.

Mall för produktlista

Vissa mallar, till exempel mallarna för användarprofiler, anpassar olika delar av samma sida.

Mallar för användarprofiler

Redigeraren för varje mall för utvecklarportalen har två avsnitt som visas längst ned på sidan. På vänster sida visas redigeringsfönstret för mallen och till höger visas datamodellen för mallen.

Mallredigeringsfönstret innehåller pålägget som styr utseendet och beteendet för motsvarande sida i utvecklarportalen. Pålägget i mallen använder DotLiquid-syntaxen. En populär redigerare för DotLiquid är DotLiquid för Designers. Ändringar som görs i mallen under redigeringen visas i realtid i webbläsaren, men är inte synliga för kunderna förrän du sparar och publicerar mallen.

Mallpålägg

Fönstret Malldata innehåller en guide till datamodellen för de entiteter som är tillgängliga för användning i en viss mall. Den ger den här guiden genom att visa livedata som för närvarande visas i utvecklarportalen. Du kan expandera mallfönstret genom att klicka på rektangeln i det övre högra hörnet i fönstret Malldata.

Malldatamodell

I föregående exempel visas två produkter i utvecklarportalen som hämtades från de data som visas i fönstret Malldata, som du ser i följande exempel:

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

Pålägget i mallen produktlista bearbetar data för att ge önskade utdata genom att iterera genom samlingen med produkter för att visa information och en länk till varje enskild produkt. Observera <search-control> <page-control> elementen och i markeringen. Dessa styr visningen av sök- och växlingskontrollerna på sidan. ProductsStrings|PageTitleProducts är en lokaliserad strängreferens som innehåller h2 sidhuvudtexten för sidan. En lista över strängresurser, sidkontroller och ikoner som är tillgängliga för användning i mallar för utvecklarportalen finns i API Management mallar för utvecklarportalen refererar till.

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

Så här sparar du en mall

Spara en mall genom att klicka på Spara i mallredigeraren.

Spara mallen

Sparade ändringar publiceras inte i utvecklarportalen förrän de har publicerats.

Publicera en mall

Sparade mallar kan publiceras antingen individuellt eller tillsammans. Om du vill publicera en enskild mall klickar du på Publicera i mallredigeraren.

Publicera mall

Klicka på Ja för att bekräfta och göra mallen live på utvecklarportalen.

Skärmbild som visar var du väljer Ja för att göra mallen live.

Om du vill publicera alla opublicerade mallversioner klickar du Publicera i malllistan. Opublicerade mallar anges med en asterisk efter mallnamnet. I det här exemplet publiceras produktlistan och produktmallarna.

Publicera mallar

Bekräfta genom att klicka på Publicera anpassningar.

Bekräfta publicering

Nyligen publicerade mallar börjar gälla direkt i utvecklarportalen.

Återställa en mall till den tidigare versionen

Om du vill återställa en mall till den tidigare publicerade versionen klickar du på Återgå i mallredigeraren.

Skärmbild som visar den ikon som du använder för att återställa en mall.

Bekräfta genom att klicka på Ja.

Skärmbild som visar var du väljer Ja för att bekräfta ändringarna.

Den tidigare publicerade versionen av en mall finns live i utvecklarportalen när återställningsåtgärden har slutförts.

Återställa en mall till standardversionen

Att återställa mallar till standardversionen är en tvåstegsprocess. Först måste mallarna återställas och sedan måste de återställda versionerna publiceras.

Om du vill återställa en enskild mall till standardversionen klickar du på Återställ i mallredigeraren.

Återställ mall

Bekräfta genom att klicka på Ja.

Bekräfta

Om du vill återställa alla mallar till deras standardversioner klickar du på Återställ standardmallar i malllistan.

Återställa mallar

De återställda mallarna måste sedan publiceras individuellt eller alla samtidigt genom att följa stegen i Publicera en mall.

Nästa steg

Referensinformation för mallar för utvecklarportalen, strängresurser, ikoner och sidkontroller finns i API Management mallar för utvecklarportalen refererar till.