Come personalizzare il portale per sviluppatori di Gestione API di Azure con i modelliHow to customize the Azure API Management developer portal using templates

Per personalizzare il portale per sviluppatori in Gestione API di Azure ci sono tre modalità principali:There are three fundamental ways to customize the developer portal in Azure API Management:

I modelli vengono usati per personalizzare il contenuto delle pagine del portale per sviluppatori generate dal sistema, ad esempio la documentazione delle API, i prodotti, l'autenticazione utente e così via.Templates are used to customize the content of system-generated developer portal pages (e.g. API docs, products, user authentication, etc.). La sintassi DotLiquid, insieme a un set fornito di risorse stringa localizzate, icone e controlli di pagina, offre grande flessibilità nella configurazione del contenuto delle pagine nel modo opportuno.Using DotLiquid syntax, and a provided set of localized string resources, icons, and page controls, you have great flexibility to configure the content of the pages as you see fit.

Panoramica sui modelli del portale per sviluppatoriDeveloper portal templates overview

La modifica dei modelli viene eseguita dal portale per sviluppatori quando vi si accede come amministratore.Editing templates is done from the Developer portal while being logged in as an administrator. Per accedervi, aprire prima il Portale di Azure e fare clic su Portale di pubblicazione nella barra degli strumenti del servizio dell'istanza di Gestione API.To get there first open the Azure Portal and click Publisher portal from the service toolbar of your API Management instance.

Portale di pubblicazione

Quindi fare clic su Portale per sviluppatori in alto a destra.Then click on Developer portal on the top-right.

Menu del portale per sviluppatori

Per accedere ai modelli del portale per sviluppatori, fare clic sull'icona di personalizzazione a sinistra per visualizzare il menu di personalizzazione e quindi fare clic su Templates.To access the developer portal templates, click the customize icon on the left to display the customization menu, and click Templates.

Modelli del portale per sviluppatori

L'elenco dei modelli include varie categorie di modelli che coprono le diverse pagine del portale per sviluppatori.The templates list displays several categories of templates covering the different pages in the developer portal. Ogni modello è diverso, ma i passaggi per modificarli e pubblicare le modifiche sono uguali per tutti.Each template is different, but the steps to edit them and publish the changes are the same. Per modificare un modello, fare clic sul nome del modello.To edit a template, click the name of the template.

Modelli del portale per sviluppatori

Facendo clic su un modello si passa alla pagina del portale per sviluppatori personalizzabile con il modello selezionato.Clicking a template takes you to the developer portal page that is customizable by that template. In questo esempio viene visualizzato il modello Product list .In this example the Product list template is displayed. Il modello Product list controlla l'area dello schermo indicata dal rettangolo rosso.The Product list template controls the area of the screen indicated by the red rectangle.

Modello Product list

Alcuni modelli, come i modelli User Profile , permettono di personalizzare parti diverse della stessa pagina.Some templates, like the User Profile templates, customize different parts of the same page.

Modelli User Profile

L'editor di ogni modello del portale per sviluppatori include due sezioni visualizzate nella parte inferiore della pagina.The editor for each developer portal template has two sections displayed at the bottom of the page. A sinistra è visualizzato il riquadro di modifica per il modello, mentre a destra è visualizzato il relativo modello di dati.The left-hand side displays the editing pane for the template, and the right-hand side displays the data model for the template.

Il riquadro di modifica del modello contiene il markup che controlla l'aspetto e il comportamento della pagina corrispondente nel portale per sviluppatori.The template editing pane contains the markup that controls the appearance and behavior of the corresponding page in the developer portal. Il markup del modello usa la sintassi DotLiquid .The markup in the template uses the DotLiquid syntax. Uno degli editor più diffusi per DotLiquid è DotLiquid for Designers.One popular editor for DotLiquid is DotLiquid for Designers. Tutte le modifiche apportate al modello in fase di modifica vengono visualizzate in tempo reale nel browser, ma non sono visibili ai clienti finché non si sceglie di salvare e pubblicare il modello.Any changes made to the template during editing are displayed in real-time in the browser, but are not visible to your customers until you save and publish the template.

Markup del modello

Il riquadro Template data fornisce una guida al modello di dati per le entità disponibili per l'uso in un determinato modello.The Template data pane provides a guide to the data model for the entities that are available for use in a particular template. La guida consiste nella possibilità di visualizzare i dati attivi attualmente visualizzati nel portale per sviluppatori.It provides this guide by displaying the live data that are currently displayed in the developer portal. Per espandere i riquadri del modello è possibile fare clic sul rettangolo nell'angolo superiore destro del riquadro Template data .You can expand the template panes by clicking the rectangle in the upper-right corner of the Template data pane.

Modello Template data

Nell'esempio precedente sono disponibili due prodotti visualizzati nel portale per gli sviluppatori che sono stati recuperati dai dati visualizzati nel riquadro Template data , come illustrato nell'esempio seguente.In the previous example there are two products displayed in the developer portal that were retrieved from the data displayed in the Template data pane, as shown in the following example.

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

Il markup del modello Product list elabora i dati per fornire l'output previsto scorrendo la raccolta di prodotti per visualizzare le relative informazioni e un collegamento a ogni singolo prodotto.The markup in the Product list template processes the data to provide the desired output by iterating through the collection of products to display information and a link to each individual product. Si notino gli elementi <search-control> e <page-control> nel markup.Note the <search-control> and <page-control> elements in the markup. Questi controllano la visualizzazione dei controlli di ricerca e di paging nella pagina.These control the display of the searching and paging controls on the page. ProductsStrings|PageTitleProducts è un riferimento a una stringa localizzata che contiene il testo dell'intestazione h2 della pagina.ProductsStrings|PageTitleProducts is a localized string reference that contains the h2 header text for the page. Per un elenco delle risorse stringa, i controlli di pagina e le icone disponibili per l'uso nei modelli del portale per sviluppatori, vedere il riferimento ai modelli del portale per sviluppatori di Gestione API.For a list of string resources, page controls, and icons available for use in developer portal templates, see API Management developer portal templates reference.

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

Per salvare un modelloTo save a template

Per salvare un modello, fare clic sull'icona di salvataggio nell'editor del modello.To save a template, click save in the template editor.

Salvare il modello

Le modifiche salvate non sono attive nel portale per sviluppatori fino a quando non vengono pubblicate.Saved changes are not live in the developer portal until they are published.

Per pubblicare un modelloTo publish a template

I modelli salvati possono essere pubblicati singolarmente o tutti insieme.Saved templates can be published either individually, or all together. Per pubblicare un singolo modello, fare clic sull'icona di pubblicazione nell'editor del modello.To publish an individual template, click publish in the template editor.

Pubblicare il modello

Fare clic su Yes per confermare e rendere il modello attivo nel portale per sviluppatori.Click Yes to confirm and make the template live on the developer portal.

Confermare la pubblicazione

Per pubblicare tutte le versioni dei modelli non ancora pubblicate, fare clic su Publish nell'elenco dei modelli.To publish all currently unpublished template versions, click Publish in the templates list. I modelli non pubblicati sono contraddistinti da un asterisco dopo il nome del modello.Unpublished templates are designated by an asterisk following the template name. In questo esempio vengono pubblicati i modelli Product list (Elenco prodotti) e Product (Prodotto).In this example, the Product list and Product templates are being published.

Pubblicare i modelli

Fare clic su Publish customizations per confermare.Click Publish customizations to confirm.

Confermare la pubblicazione

I modelli appena pubblicati diventano immediatamente disponibili nel portale per sviluppatori.Newly published templates are effective immediately in the developer portal.

Per annullare la modifiche alla versione precedente di un modelloTo revert a template to the previous version

Per annullare la modifiche alla versione pubblicata precedente di un modello, fare clic sull'icona di annullamento nell'editor del modello.To revert a template to the previous published version, click revert in the template editor.

Annullare le modifiche al modello

Fare clic su Yes per confermare.Click Yes to confirm.

Confirm

Al termine dell'operazione di annullamento, la versione pubblicata precedente del modello sarà disponibile nel portale per sviluppatori.The previously published version of a template is live in the developer portal once the revert operation is complete.

Per ripristinare la versione predefinita di un modelloTo restore a template to the default version

Il ripristino della versione predefinita di un modello è un processo in due passaggi.Restoring templates to their default version is a two-step process. Occorre prima di tutto ripristinare i modelli e quindi pubblicare le versioni ripristinate.First the templates must be restored, and then the restored versions must be published.

Per ripristinare la versione predefinita di un singolo modello, fare clic sull'icona di ripristino nell'editor del modello.To restore a single template to the default version click restore in the template editor.

Annullare le modifiche al modello

Fare clic su Yes per confermare.Click Yes to confirm.

Confirm

Per ripristinare le versioni predefinite di tutti i modelli, fare clic su Restore default templates nell'elenco dei modelli.To restore all templates to their default versions, click Restore default templates on the template list.

Ripristinare i modelli

I modelli ripristinati devono poi essere pubblicati singolarmente o tutti insieme seguendo i passaggi descritti nella sezione Per pubblicare un modello.The restored templates must then be published individually or all at once by following the steps in To publish a template.

Passaggi successiviNext steps

Per informazioni di riferimento sui modelli del portale per sviluppatori, le risorse stringa, le icone e i controlli di pagina, vedere il riferimento ai modelli del portale per sviluppatori di Gestione API.For reference information for developer portal templates, string resources, icons, and page controls, see API Management developer portal templates reference.