Personalizzare lo stile delle pagine del portale per sviluppatoriCustomize the style of the Developer portal pages

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

In questa esercitazione si apprenderà come:In this tutorial, you learn how to:

  • Personalizzare lo stile degli elementi delle pagine del portale per sviluppatoriCustomize the style of elements on pages of the Developer portal
  • Visualizzare la modificaView your change

personalizzare lo stile

PrerequisitiPrerequisites

Per passare all'istanza di Gestione API, seguire questa procedura:To navigate to your APIM instance, follow these steps:

  1. Accedere al portale di Azure.Sign in to the Azure portal.
  2. SelezionareSelect freccia..
  3. Nella casella di ricerca digitare "api".Type "api" in the search box.
  4. Fare clic su Servizi Gestione API.Click API Management services.

    Esplorare

  5. Selezionare l'istanza del servizio Gestione API.Select your APIM service instance.

Suggerimento

Aggiungere Gestione API ai Preferiti del portale di Azure facendo clic sulla stella.Add API Management (APIM) to your favorites in the Azure portal by clicking the star.
L'icona Gestione API viene aggiunta al menu disponibile nella parte sinistra del portale.This adds the APIM icon to the menu on the left of the portal. Per visualizzare tutti i servizi di Gestione API, fare clic sull'icona (icona Gestione API).To see all your APIM services, click the icon (APIM icon).

Personalizzare il portale per sviluppatoriCustomize the Developer portal

  1. Selezionare Panoramica.Select Overview.
  2. Nella parte superiore della pagina Panoramica fare clic sul pulsante Portale per sviluppatori.Click the Developer portal button on the top of the Overview window. In alternativa è possibile fare clic sul collegamento URL del portale per sviluppatori.Alternatively, you can click the Developer portal URL link.
  3. In alto a sinistra della schermata è disponibile un'icona costituita da due pennelli.On the upper left side of the screen, you see an icon comprised of two paint brushes. Passare il cursore del mouse sull'icona per aprire il menu di personalizzazione del portale.Hover over this icon to open the portal customization menu.

    personalizzare lo stile

  4. Selezionare Stili dal menu per aprire il riquadro di personalizzazione dello stile.Select Styles from the menu to open the styling customization pane.

    Nella pagina vengono visualizzati tutti gli elementi che è possibile personalizzare con gli stiliAll elements that you can customize using Styles appear on the page

  5. Immettere "headings-color" nel campo Change variable values to customize developer portal appearance: (Modificare i valori delle variabili per personalizzare l'aspetto del portale per sviluppatori).Enter "headings-color" in the Change variable values to customize developer portal appearance: field.

    Nella pagina viene visualizzato l'elemento @headings-color.The @headings-color element appears on the page. Questa variabile controlla il colore del testo.This variable controls the color of the text.

    personalizzare lo stile

  6. Fare clic sul campo per la variabile @headings-color.Click on the field for the @headings-color variable.

    Viene aperto il menu a discesa Selezione colori.Color picker drop-down opens.

  7. Nel menu a discesa Selezione colori selezionare un colore nuovo.From the color pickers drop-down select a new color.

    Suggerimento

    Per tutte le modifiche è disponibile l'anteprima in tempo reale.Real-time preview is available for all changes. Viene visualizzato un indicatore di stato nella parte superiore del riquadro di personalizzazione.A progress indicator appears at the top of the customization pane. Dopo alcuni secondi il testo dell'intestazione cambia e diventa del colore selezionato.After a couple seconds the header text changes in color to the newly selected.

  8. Selezionare Publish (Pubblica) in basso a sinistra nel menu del riquadro di personalizzazione.Select Publish from the lower left on the customization pane menu.

  9. Selezionare Publish customizations (Pubblica personalizzazioni) per rendere le modifiche disponibili pubblicamente.Select Publish customizations to make the changes publicly available.

Visualizzare la modificaView your change

  1. Passare al portale per sviluppatori.Navigate to the Developer portal.
  2. È possibile visualizzare la modifica effettuata.You can see the change that you made.

Passaggi successiviNext steps

In questa esercitazione si è appreso come:In this tutorial, you learned how to:

  • Personalizzare lo stile degli elementi delle pagine del portale per sviluppatoriCustomize the style of elements on pages of the Developer portal
  • Visualizzare la modificaView your change