Geliştirici portalı sayfalarının stilini özelleştirmeCustomize the style of the Developer portal pages

Azure API Management'ta Geliştirici portalını özelleştirmek için kullanılabilecek üç yaygın yöntem vardır:There are three most common ways to customize the Developer portal in Azure API Management:

Bu öğreticide şunların nasıl yapıldığını öğreneceksiniz:In this tutorial, you learn how to:

  • Geliştirici portalı sayfalarındaki öğelerin stilini özelleştirmeCustomize the style of elements on pages of the Developer portal
  • Değişikliğinizi görüntülemeView your change

stili özelleştir

ÖnkoşullarPrerequisites

KullanılabilirlikAvailability

Önemli

Bu özellik kullanılabilir Premium, standart, temel ve Geliştirici API Management katmanları.This feature is available in the Premium, Standard, Basic and Developer tiers of API Management.

Geliştirici portalını özelleştirmeCustomize the Developer portal

  1. Genel Bakış’ı seçin.Select Overview.

  2. Genel Bakış penceresinin üzerindeki Geliştirici portalı düğmesine tıklayın.Click the Developer portal button on the top of the Overview window. Alternatif olarak, Geliştirici portalı URL’si bağlantısına tıklayabilirsiniz.Alternatively, you can click the Developer portal URL link.

  3. Ekranın sol üst tarafında, iki boya fırçasından oluşan bir simge görürsünüz.On the upper left side of the screen, you see an icon comprised of two paint brushes. Portal özelleştirme menüsünü açmak için bu simgenin üzerine gelin.Hover over this icon to open the portal customization menu.

    stili özelleştir

  4. Stil özelleştirme bölmesini açmak için menüden Stiller’i seçin.Select Styles from the menu to open the styling customization pane.

    Stilleri’i kullanarak özelleştirebileceğiniz tüm öğeler sayfada görüntülenirAll elements that you can customize using Styles appear on the page

  5. Geliştirici portalı görünümünü özelleştirmek için değişken değerleri değiştirin: alanında "headings-color" değerini girin.Enter "headings-color" in the Change variable values to customize developer portal appearance: field.

    @Başlıklarının rengi öğesi sayfada görüntülenir.The @headings-color element appears on the page. Bu değişken metnin rengini denetler.This variable controls the color of the text.

    stili özelleştir

  6. İçin alana tıklayın @başlıklarının rengi değişkeni.Click on the field for the @headings-color variable.

    Renk seçici açılır menüsü açılır.Color picker drop-down opens.

  7. Renk seçici açılır menüsünden yeni bir renk seçin.From the color pickers drop-down select a new color.

    İpucu

    Tüm değişiklikler için gerçek zamanlı önizleme kullanılabilir.Real-time preview is available for all changes. Özelleştirme bölmesinin yukarısında bir ilerleme göstergesi görünür.A progress indicator appears at the top of the customization pane. Birkaç saniye sonra üst bilgi metni rengi yeni seçilen renge değişir.After a couple seconds the header text changes in color to the newly selected.

  8. Özelleştirme bölmesi menüsünde sol alt tarafta Yayımla’yı seçin.Select Publish from the lower left on the customization pane menu.

  9. Değişiklikleri genel olarak kullanılabilir yapmak için Özelleştirmeleri yayımla’yı seçin.Select Publish customizations to make the changes publicly available.

Değişikliğinizi görüntülemeView your change

  1. Geliştirici portalına gidin.Navigate to the Developer portal.
  2. Yaptığınız değişikliği görebilirsiniz.You can see the change that you made.

Sonraki adımlarNext steps

Bu öğreticide, şunların nasıl yapıldığını öğrendiniz:In this tutorial, you learned how to:

  • Geliştirici portalı sayfalarındaki öğelerin stilini özelleştirmeCustomize the style of elements on pages of the Developer portal
  • Değişikliğinizi görüntülemeView your change

Şablonları kullanarak Azure API Management geliştiricisi portalı nasıl özelleştirebileceğinizi de öğrenmek isteyebilirsiniz.You might also be interested in learning how to customize the Azure API Management developer portal using templates.