Temayı özelleştirme

Apigee Edge belgelerini görüntülüyorsunuz.
Apigee X belgelerine gidin.
bilgi

Tema, bir sitenin görünümünü ve tarzını tanımlayan bir dosya koleksiyonudur. Geliştirici Hizmetleri portalı başlangıçta özelleştirebileceğiniz varsayılan bir temayla tanımlanır. Bu sayede, portalınızın görünümü ve tarzı için tercihlerinizi belirleyebilirsiniz. Daha ayrıntılı belirtmek gerekirse bağlantıların, arka planların, metnin ve diğer tema öğelerinin rengini değiştirebilirsiniz. Geliştirici portalınızın ön sayfasında görünen karşılama mesajını da değiştirebilirsiniz.

Temayı, geliştirici portalı kullanıcı arayüzü üzerinden veya varsayılan tema dosyasını geçersiz kılmak için özel bir tema dosyasına kod yazarak özelleştirebilirsiniz.

Geliştirici portalı sürümünüze bağlı olarak seçebileceğiniz çeşitli temalar vardır:

Tema Açıklama

Apigee duyarlı teması

Portalın sonraki sürümleri için varsayılan tema olan Önyükleme 3'ü temel alır. Bu tema, 768 piksel ile 1400 piksel arasında genişliklere sahip cihazları destekler. Önyükleme 3'ün tüm özellikleri bu temada kullanılabilir.

Not: Apigee Duyarlı temasını kullanmak için Önyükleme 7.x-3.0 temasının etkin olduğundan emin olun.

Apigee DevConnect teması

Apigee duyarlı temasından önceki varsayılan portal teması.

Mevcut portallar yeni Apigee Duyarlı temaya yükseltilebilir ancak öncelikle tüm engellemelerin, şablonların ve diğer içeriklerin Bootstrap 3 ile uyumlu olduğundan ve Bootstrap 7.x-3.0 temasının etkinleştirildiğinden emin olun.

Apigee Base teması

Apigee DevConnect temasının ana temasıdır ve tek başına kullanılması amaçlanmamıştır.

Varsayılan temayı ayarlama

Portalınızda hâlâ eski Apigee DevConnect teması kullanılıyorsa şu formda bir uyarı görebilirsiniz:

"Apigee DevConnect theme" is out of date 

Portalın varsayılan temasını ayarlamak için aşağıdaki prosedürü kullanabilirsiniz. Yeni bir temayı üretime dağıtmadan önce daima üretim dışı bir sistemde test etmeniz gerekir.

Varsayılan temayı ayarlamak için:

  1. Portalınıza yönetici veya içerik oluşturma ayrıcalıklarına sahip bir kullanıcı olarak giriş yapın.
  2. Drupal yönetim menüsünde Görünüm'ü seçin. Etkin temaların listesi görünür.
  3. Varsayılan olarak kullanmak istediğiniz tema için Varsayılan olarak ayarla'yı seçin.
    Apigee Duyarlı temasını kullanmak için Bootstrap 7.x-3.0 temasının bu sayfada da etkinleştirilmiş olduğundan emin olun.
  4. Yapılandırmayı kaydedin.

Apigee duyarlı temasını özelleştirme

Bu bölümde, aşağıdakiler dahil olmak üzere Apigee duyarlı temasının nasıl yapılandırılacağı açıklanmaktadır:

  • Kalıcı formları özelleştirme
  • Genel ayarları özelleştirme

Kalıcı form desteğini özelleştirmek için:

Portal, Drupal formlarını kalıcı iletişim olarak görüntülemek için Drupal Önyükleme Modal formları korumalı alan modülünü kullanır. Giriş ve kayıt formları varsayılan olarak kalıcı iletişim kutusu işlevi görür. Bu formların bunun yerine ayrı sayfalar olarak görünmesini sağlamak için bu işlevi devre dışı bırakabilirsiniz.

  1. Geliştirici portalına yönetici ayrıcalıklarına sahip bir kullanıcı olarak giriş yapın.
  2. Drupal yönetim menüsünde Yapılandırma > Kullanıcı arayüzü > Önyükleyici Modal formlarını seçin.
  3. Formlar için kalıcı desteği etkinleştirin veya devre dışı bırakın.
  4. Save configuration'ı (Yapılandırmayı kaydet) seçin.

Apigee Duyarlı temasının genel ayarlarını özelleştirmek için:

  1. Portalınıza yönetici veya içerik oluşturma ayrıcalıklarına sahip bir kullanıcı olarak giriş yapın.
  2. Drupal yönetim menüsünde Görünüm'ü seçin. Etkinleştirilen temaların listesi görünür.
  3. Sayfanın Apigee Uyumlu (varsayılan tema) alanında Settings'i (Ayarlar) seçin (sayfanın üst kısmındaki Settings (Ayarlar) düğmesini seçmeyin).
  4. Apigee Uyumlu temasının ayarlar sayfası görünür.
  5. Aşağıdaki tabloda, bu sayfada temayı yapılandırmak için kullanabileceğiniz alanlar açıklanmaktadır. Bu ayarlardan herhangi birini değiştirirseniz Yapılandırmayı kaydet'i seçin.

    Bölge Bölüm Açıklama

    Önyükleme ayarları

    Bileşenler

    İçerik haritalarının görünümünü, ana menünün konumunu (ayarlarda Gezinme Çubuğu olarak adlandırılır) ve bölge kuyularının görüntülenmesini kontrol edin:

    • İçerik haritaları: İçerik haritasını gizleme/gösterme, içerik haritasının içindeki Ana Sayfa bağlantısını etkinleştirme/devre dışı bırakma.
    • Gezinme çubuğu: Gezinme çubuğunun (ana menü) konumunu sabit/statik/normal konumlara değiştirerek düzeni daha dinamik hale getirin.
    • Bölge kuyuları: Sitedeki herhangi bir bölgeye daha koyu bir arka plan eklemek için o bölgeye iyi bir sınıf ekleyin.

    JavaScript

    Çapaların, pop-up'ların ve ipuçlarının görüntülenmesini kontrol edin:

    • Sabit reklamlar: Sabitleme konumlarını düzeltin ve kolay kaydırmayı etkinleştirin.
    • Pop-up'lar: Pop-up'lar her öğeye küçük yer paylaşımları ekler. Pop-up'ları etkinleştirin/devre dışı bırakın ve pop-up'ların nasıl kullanılacağını yapılandırın.
    • İpuçları: İpuçlarının kullanılma şeklini yapılandırın. Her bir ipucunu her form öğesinin sağında, solunda, üstünde veya altında görüntülenmeye zorlayabilir ve diğer görüntüleme seçeneklerini ayarlayabilirsiniz.

    İleri Düzey

    Portalın, Bootstrap tema dosyalarını güncellemek için BootstrapCDN'yi nasıl kullandığını kontrol eder. BootstrapCDN'de portalın bağımlılığını devre dışı bırakabilirsiniz ancak bunun ardından Bootstrap çerçevesinin kendi uygulamanızı sağlamanız gerekir.

    DevConnect Ayarları

    Ana menüde görünen karşılama mesajını, varsayılan renkleri ve logonun boyutunu ayarlayın.

    Genel Ayarları Geçersiz Kıl

    Ekranı aç/kapat

    Portalın farklı alanlarının görüntülenmesini etkinleştirin ve devre dışı bırakın.

    Logo resmi ayarları

    Ana menüde görüntülenen resmi belirtir.

    Kısayol simgesi ayarları

    Bir tarayıcının adres çubuğunda veya portala giden bir yer işareti için görüntülenen resmi belirtir.

Apigee DevConnect temasını özelleştirme

Apigee DevConnect teması, portalın eski sürümleri için varsayılan portal temasıdır ve yeni Apigee Uyumlu temasına yükseltilebilir. Ancak, yeni sürüme geçirme işlemini gerçekleştirmeden önce tüm engellemelerin, şablonların ve diğer içeriklerin Önyükleme 3 ile uyumlu olduğundan emin olmanız gerekir.

Apigee DevConnect temasının genel ayarlarını özelleştirmek için:

  1. Portalınıza yönetici veya içerik oluşturma ayrıcalıklarına sahip bir kullanıcı olarak giriş yapın.
  2. Drupal yönetim menüsünde Görünüm > Apigee DevConnect teması > Ayarlar'ı seçin. Bu işlem, temaya ilişkin ilk ayarları gösterir. Renk ayarları, onaltılık değerler olarak belirtilir.

  3. Ayarları tercihinize uygun şekilde değiştirin.
    Örneğin, karşılama mesajını ekleyin veya değiştirin ya da üstbilgi arka plan rengini değiştirin. Üstbilgi arka plan rengi başlangıçta turuncuya yakın (#FF4300) bir değere ayarlanır. Bu değeri, mavi (#0000FF) gibi başka bir renkle değiştirebilirsiniz.
  4. Ayarları değiştirmeyi tamamladığınızda Kaydet'i tıklayın.

Alt tema oluşturarak bir temayı özelleştirme

Portal ile gönderilen varsayılan temaları tanımlayan tüm dosyalar ve öğeler, portal yükleme dizininin altındaki profiles/apigee/themes dizininde bulunur. Portalı varsayılan konuma yüklediyseniz bu dizin, /var/www/html/profiles/apigee/themes konumundadır.

Sitenin görünümünü ve tarzını değiştirmek üzere bir temayı düzenlemek için profiles/apigee/themes altındaki tema dosyalarını doğrudan değiştirmeyin. Aksi takdirde, portalı bir sonraki yükseltişinizde değişikliklerinizin üzerine yazılır.

Bunun yerine, varsayılan tema dosyalarını /sites/all/themes dizinine kopyalayarak, değiştirmek istediğiniz temanın bir alt temasını oluşturun. Alt temalarla ilgili talimatlar için https://www.drupal.org/node/225125 adresindeki Drupal dokümanlarına bakın.

Yukarıda belirtilen Drupal belgelerinde, alt tema oluşturma hakkında ayrıntılı bilgi yer almaktadır. Ancak Apigee Duyarlı temasının alt temasını oluşturmayla ilgili genel adımlar aşağıda verilmiştir:
  1. profiles/apigee/themes/apigee_responsive/apigee_responsive_starterkit klasörünü profiles/apigee/themes/apigee_responsive/apigee_responsive_starterkit klasörüne kopyalayın.
  2. apigee_responsive_starterkit klasörünü YOUR_THEME_NAME olarak yeniden adlandırın.
  3. apigee_responsive_starterkit.info dosyasını YOUR_THEME_NAME.info olarak yeniden adlandırın.
  4. css/apigee_responsive_starterkit.css dosyasını css/YOUR_THEME_NAME.css olarak yeniden adlandırın.
  5. js/apigee_responsive_starterkit.js dosyasını YOUR_THEME_NAME.js olarak yeniden adlandırın.
  6. YOUR_THEME_NAME.info dosyasını düzenleyin ve aşağıdaki satırları değiştirin:

    stylesheets[all][] = css/Apigee_responsive_starterkit.css
    komut dosyaları[] = js/Apigee_responsive_starterkit.js


    with:

    stylesheets[all][] =
    css/YOUR_THEME_NAME komut dosyaları[YOUR_THEME_NAME komut dosyaları.]
  7. YOUR_THEME_NAME.info dosyasındaki temanın Apigee Uyumlu Başlangıç Seti olan adını TEMA ADINIZ olarak değiştirin.
  8. Temanız için yeni bir ekran görüntüsü eklemek istiyorsanız mevcut screenshot.png dosyasını değiştirin.
  9. Temanıza yeni bir logo eklemek istiyorsanız mevcut olan logo.png dosyasını değiştirin.
  10. Temanıza yeni bir site simgesi eklemek istiyorsanız mevcut favicon.ico dosyasını değiştirin.