Jak dostosować portal deweloperów usługi Azure API Management przy użyciu szablonów

Istnieją trzy podstawowe sposoby dostosowywania portalu dla deweloperów w usłudze Azure API Management:

• Edytowanie zawartości statycznych stron i elementów układu strony
• Aktualizowanie stylów używanych dla elementów strony w portalu dla deweloperów
• Modyfikowanie szablonów używanych dla stron wygenerowanych przez portal (wyjaśniono w tym przewodniku)

Szablony służą do dostosowywania zawartości stron portalu deweloperów generowanych przez system (na przykład dokumentacji interfejsu API, produktów, uwierzytelniania użytkowników itp.). Korzystając ze składni DotLiquid i udostępnionego zestawu zlokalizowanych zasobów ciągów, ikon i kontrolek stron, masz dużą elastyczność konfigurowania zawartości stron zgodnie z potrzebami.

Uwaga

Poniższa zawartość dokumentacji dotyczy przestarzałego portalu deweloperów. Można z niego korzystać na dotychczasowych zasadach aż do jego wycofania w październiku 2023 r., kiedy zostanie usunięty ze wszystkich usług API Management. Przestarzały portal będzie otrzymywać tylko krytyczne aktualizacje zabezpieczeń. Aby uzyskać więcej informacji, zapoznaj się z następującymi artykułami:

• Dowiedz się, jak przeprowadzić migrację do nowego portalu deweloperów
• omówienie nowego portalu deweloperów usługi Azure API Management
• Uzyskaj dostęp do i dostosuj nowy portal dla deweloperów

DOTYCZY: Developer | Podstawowa | Standardowa | Premium

Omówienie szablonów portalu dla deweloperów

Edytowanie szablonów odbywa się z portalu deweloperów podczas logowania się jako administrator. Aby tam się dostać, najpierw otwórz portal Azure, a następnie kliknij portal dewelopera na pasku narzędzi Twojego wystąpienia w usłudze API Management.

Aby uzyskać dostęp do szablonów portalu dla deweloperów, kliknij ikonę dostosowywania po lewej stronie, aby wyświetlić menu dostosowywania, a następnie kliknij pozycję Szablony.

Lista szablonów zawiera kilka kategorii szablonów obejmujących różne strony w portalu deweloperów. Każdy szablon jest inny, ale kroki ich edytowania i publikowania zmian są takie same. Aby edytować szablon, kliknij nazwę szablonu.

Kliknięcie szablonu spowoduje przejście do strony portalu dla deweloperów, która jest dostosowywalna przez ten szablon. W tym przykładzie zostanie wyświetlony szablon Listy produktów . Szablon Listy produktów steruje obszarem ekranu wskazywanego przez czerwony prostokąt.

Niektóre szablony, takie jak szablony profilu użytkownika , dostosują różne części tej samej strony.

Edytor dla każdego szablonu portalu dla deweloperów zawiera dwie sekcje wyświetlane w dolnej części strony. Po lewej stronie zostanie wyświetlone okienko edycji szablonu, a po prawej stronie zostanie wyświetlony model danych dla szablonu.

Okienko edycji szablonu zawiera znaczniki, które steruje wyglądem i zachowaniem odpowiedniej strony w portalu deweloperów. Znaczniki w szablonie używają składni DotLiquid . Jednym z popularnych edytorów DotLiquid jest DotLiquid for Designer. Wszelkie zmiany wprowadzone w szablonie podczas edytowania są wyświetlane w czasie rzeczywistym w przeglądarce, ale nie są widoczne dla klientów do momentu zapisania i opublikowania szablonu.

Okienko Dane szablonu zawiera przewodnik po modelu danych dla jednostek, które są dostępne do użycia w określonym szablonie. Ten przewodnik zawiera wyświetlanie danych na żywo, które są obecnie wyświetlane w portalu dla deweloperów. Okienka szablonów można rozwinąć, klikając prostokąt w prawym górnym rogu okienka Dane szablonu .

W poprzednim przykładzie w portalu deweloperów są wyświetlane dwa produkty, które zostały pobrane z danych wyświetlanych w okienku Dane szablonu , jak pokazano w poniższym przykładzie:

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

Znaczniki w szablonie Listy produktów przetwarzają dane, aby zapewnić pożądane dane wyjściowe poprzez iterację przez kolekcję produktów, w celu wyświetlenia informacji o każdym produkcie oraz linku do niego. Zanotuj elementy <search-control> i <page-control> w znacznikach. Te kontrolki kontrolują wyświetlanie kontrolek wyszukiwania i stronicowania na stronie. ProductsStrings|PageTitleProducts to odwołanie do lokalizowanego ciągu znaków, które zawiera h2 tekst nagłówka strony. Aby uzyskać listę zasobów ciągów, kontrolek stron i ikon dostępnych do użycia w szablonach portalu dla deweloperów, zobacz Dokumentację szablonów portalu deweloperów usługi API Management.

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

Aby zapisać szablon

Aby zapisać szablon, kliknij przycisk Zapisz w edytorze szablonów.

Zapisane zmiany nie są aktywne w portalu dla deweloperów, dopóki nie zostaną opublikowane.

Aby opublikować szablon

Zapisane szablony można publikować pojedynczo lub razem. Aby opublikować pojedynczy szablon, kliknij przycisk Opublikuj w edytorze szablonów.

Kliknij przycisk Tak , aby potwierdzić i ustawić szablon na żywo w portalu deweloperów.

Aby opublikować wszystkie obecnie nieopublikowane wersje szablonów, kliknij pozycję Publikuj na liście szablonów. Nieopublikowane szablony są oznaczone gwiazdką po nazwie szablonu. W tym przykładzie szablony listy produktów i produktów są publikowane.

Kliknij pozycję Publikuj dostosowania , aby potwierdzić.

Nowo opublikowane szablony są skuteczne natychmiast w portalu deweloperów.

Aby przywrócić szablon do poprzedniej wersji

Aby przywrócić szablon do poprzedniej opublikowanej wersji, kliknij przycisk Przywróć w edytorze szablonów.

Kliknij przycisk Tak, aby potwierdzić.

Wcześniejsza opublikowana wersja szablonu jest dostępna w portalu deweloperskim po zakończeniu operacji przywracania.

Aby przywrócić szablon do domyślnej wersji

Przywracanie szablonów do ich domyślnej wersji jest procesem dwuetapowym. Najpierw należy przywrócić szablony, a następnie należy opublikować przywrócone wersje.

Aby przywrócić pojedynczy szablon do domyślnej wersji, kliknij przycisk przywróć w edytorze szablonów.

Kliknij przycisk Tak, aby potwierdzić.

Aby przywrócić wszystkie szablony do domyślnych wersji, kliknij pozycję Przywróć szablony domyślne na liście szablonów .

Przywrócone szablony muszą być następnie publikowane pojedynczo lub wszystkie jednocześnie, wykonując kroki opisane w temacie Aby opublikować szablon.

Następne kroki

Aby uzyskać informacje referencyjne dotyczące szablonów portalu dla deweloperów, zasobów ciągów, ikon i kontrolek stron, zobacz Dokumentacja szablonów portalu deweloperów usługi API Management.