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

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

Questa esercitazione illustra 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