Ghost Özel Ayarlar Temalar İçin En Üst Düzey Güçlendirmeler

Ghost Özel Ayarlar Temalar İçin En Üst Düzey Güçlendirmeler

Ghost temanızı bir üst seviyeye taşımak mı istiyorsunuz? Bu kapsamlı kılavuzla özel ayarlara göz atın. Yazı tiplerini, renk düzenlerini ve daha fazlasını seçin. Sizin temanız, sizin kurallarınız!
Özel ayarlar, tema oluşturan geliştiriciler için mükemmeldir çünkü kullanıcılar tek bir satır kod yazmadan temalarını yayınlarına uyacak şekilde uyarlayabilirler. Kendiniz için bir tema oluşturuyor olsanız bile, özel ayarlar size yazı tipi, düzen, renkler ve daha birçok özellik üzerinde anında kontrol sağlar. Aşağıdaki kılavuz, Ghost temanızdaki özel ayarlardan en iyi şekilde yararlanmak için bilmeniz gereken her şeyi adım adım açıklayacaktır.
Özel ayarlara genel bakış
Temanız için farklı seçenekler oluşturmak üzere özel ayarları kullanın; kullanıcıların doğrudan Ghost Admin üzerinden yapılandırabileceği seçenekler. Örneğin, kullanıcılara yayınlarının tonunu, rafine bir serif yazı tipi veya modern bir sans serif yazı tipi seçeneği sunarak seçmelerine olanak tanıyın.

Aşağıda ayrıntılara gireceğiz, ancak özel ayarlar hakkında bilmeniz gereken temel noktalar şunlardır:
​

• Temanızın package.json dosyasında özel ayarları tanımlayın​
• custom yardımcısıyla değerlere erişin​
• 20'ye kadar özel ayarınız olabilir​

Özel ayarlar nasıl yapılandırılır?
Temanın package.json dosyasında, config.custom anahtarı altında özel ayarları yapılandırın. Her ayarı snake_case kullanarak yeni bir anahtar olarak ekleyin. İşte "tipografi" adlı özel bir ayar örneği:

json:

{
    "config": {
        "custom": {
            "typography": {
                "type": "select",
                "options": ["Modern sans-serif", "Elegant serif"],
                "default": "Modern sans-serif",
                  "description": "Define your site's typography"
            }
        }
    }
}

Her ayar için en önemli seçenek, türü belirlemektir çünkü bu, hangi diğer tuşların gerekli olduğunu belirler.
Türleri Anlamak
Beş olası tür vardır. Her birine ayrıntılı olarak bakalım.

Seç

Örnekte görüldüğü gibi, seçme türü, kullanıcıya gerekli seçenekler anahtarında tanımladığınız seçeneklerin bir açılır listesini sunar. Ayrıca bir varsayılan anahtar da gereklidir. Bu anahtar, tanımlanan seçeneklerden biriyle eşleşen bir değer içermelidir.

Boolean

Boolean türü, kullanıcıya doğru/yanlış geçişini sunar. Boolean türünü kullanırken, varsayılan bir değer (doğru veya yanlış) de belirtmeniz gerekir.

Renk

Renk türü, kullanıcıya bir renk seçici sunar. Bu tür kullanılırken varsayılan bir onaltılık renk sağlanmalıdır.

NOT:Ghost'un, @site.accent_color yardımcı programı aracılığıyla erişilebilen Tasarım ayarlarında bir vurgu rengi belirleme olanağı sağladığını unutmayın.
Resim

Resim türü, kullanıcıya bir resim yükleyicisi sunar. Bu türün çıktısı bir resim URL'si veya boş bir dizedir. Resim türü, yüklenen resmi otomatik olarak optimize etmenizi sağlayan img_url yardımcı programıyla harika çalışır!

Metin

Metin türü, kullanıcıya bir metin girişi sunar. Varsayılan değer isteğe bağlıdır, yani bu türün çıktısının boş olması mümkündür.

Özel ayarların amacını paylaşmak için açıklamalar ekleyinHer tür için isteğe bağlı bir açıklama eklemek mümkündür.

Bu anahtar için sağlanan değer, Ghost Admin'de özel ayarla birlikte görünür. Kullanıcılara özel ayarın ne için olduğunu iletmenin harika bir yoludur.

Ayarlara bir ad, açıklama, tür ve gerekli diğer ek anahtarları vererek özel bir ayar tanımlamış olursunuz. Evet, evet! Temada kullanıcı tanımlı değerine nasıl erişeceğimizi görelim.

Tema içinde özel ayarlara erişim@custom yardımcısı ve ayar adı ile kullanıcı tanımlı değere erişin. Yukarıdaki tipografi ayarına erişmek için temanın herhangi bir yerinde @custom.typeface kullanın.Temanın yazı tipini değiştirmek için, default.hbs dosyasındaki gövde etiketindeki CSS sınıfını değiştirmek üzere özel ayarı kullanın.

html:

<bodyModern sans-serif"}} has-sans-serif-font{{else}} has-serif-font{{/match}}</body>

Eşleştirme yardımcısını kullanın

Özel ayarın değerini test etmek için yukarıdaki eşleştirme yardımcısını kullanıyoruz. Özellikle, yazı tipi değerinin "Modern sans-serif" değerine eşit olup olmadığını test ediyoruz. (Eşitliği test etmek için eşleştirme yardımcısını kullanırken = işareti atlanabilir.) Farklı operatörler kullanarak başka koşulları da test etmek mümkündür: !=, <, >, >= ve <=. Özel ayar "Modern sans-serif" değerine eşitse, has-sans-serif-font sınıfı çıktı olarak verilir. Aksi takdirde, has-serif-font sınıfı çıktı olarak verilir.

Yapmanız gereken diğer tek işlem, sınıfları CSS'nize eklemektir:

css:

.has-sans-serif-font {
  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
}

.has-serif-font {
  font-family: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;;
}

Artık kullanıcı, istediği yazı tipini doğrudan Ghost Admin'den ayarlayabilir (ve isterse istediği zaman değiştirebilir)
Özel ayarları gruplama
Özel ayarlar için son bir yapılandırma seçeneği daha var: gruplar. Varsayılan olarak, tüm özel ayarlar Site Geneli grubuna yerleştirilir, yani ayar tüm yayında geçerlidir.

Ancak, yalnızca ana sayfa veya gönderi sayfalarına uygulanan ayarlar için belirli gruplar mevcuttur. Örneğin, Casper'da ana sayfada üç farklı düzen belirlemek mümkündür. Bu seçeneğin package.json dosyasında nasıl tanımlandığı ve grubunun nasıl tanımlandığı aşağıda açıklanmıştır:

json:

"feed_layout": {
    "type": "select",
    "options": [
        "Classic",
        "Grid",
        "List"
    ],
    "default": "Classic",
    "group": "homepage"
}

Gönderi sayfalarına uygulanabilen ayarlar için grubu gönderi paylaşacak şekilde ayarlayın.

Özel ayarlar hakkında bilmeniz gereken her şey bu kadar. İşte her şeyi bir araya getirmenize yardımcı olacak bir görsel.



Doğada özel ayarlar
Birkaç örnek daha ister misiniz? Ghost'un varsayılan teması Casper'da özel ayarların iki farklı şekilde nasıl kullanıldığına bakalım.

Dinamik renk düzeni
Kullanıcılarınıza açık ve koyu modlar arasında geçiş yapma veya hatta işletim sistemi tercihlerine göre renk düzenini otomatikleştirme olanağı verdiğinizi hayal edin. Casper tam da bunu yapıyor!

json:

"color_scheme": {
    "type": "select",
    "options": [
        "Light",
        "Dark",
        "Auto"
    ],
    "default": "Light"
}

Color_scheme özel ayarı, kullanıcıların sitelerinin açık, koyu veya otomatik modda görüntülenmesini seçmelerine olanak tanır.
​

Özel ayarlara default.hbs dosyasında html etiketi üzerinden erişilir:

handlebars:

<html lang="{{@site.locale}}"{{#match @custom.color_scheme "Dark"}}{{else match @custom.color_scheme "Auto"}}{{/match}}>

Renk düzeni "Koyu" olarak ayarlandığında, öğeye koyu mod sınıfı eklenir (ve bu seçenek belirlendiğinde otomatik renk eklenir). Ardından, temanın CSS'sine bu seçimleri yansıtacak sınıflarla stiller eklenir. Örneğin, arka planı koyu renge, metni ise açık renge ayarlayan kural şöyledir:

json:

html.dark-mode body {
    color: rgba(255, 255, 255, 0.75);
    background: var(--color-darkmode);
}

Özetle; kullanıcı tercihlerine göre CSS sınıflarını dinamik olarak ekleyebilir ve kaldırabilir, böylece tek bir tema içinde birden fazla stil oluşturabilirsiniz.

Kayıt harekete geçirici mesajını kişiselleştirin
Casper'ın gönderi sayfasındaki kayıt harekete geçirici mesajı (CTA) için özel metin, deneyimi daha ilgi çekici hale getirir. İşte ayar:

json:

"email_signup_text": {
    "type": "text",
    "default": "Sign up for more like this.",
    "group": "post"
},

emel bilgiler:

Yedek metin: Kullanıcı kendi metnini sağlamazsa, harekete geçirici mesaj metninin boş kalmaması için varsayılan bir metin sağlanır.

Grup tanımı: Bu ayar, "gönderi" açılır menüsünün altında görünür ve gönderi sayfalarına özgüdür.
Aşağıdaki ekran görüntüleri, bu ayarın Ghost Admin'de nasıl göründüğünü ve gönderideki varsayılan ve kişiselleştirilmiş harekete geçirici mesajları göstermektedir.



Bu örnekler, özel ayarların sunduğu birçok olanaktan birkaçını göstermektedir. Casper'daki bu özellikleri ve diğer özel ayarları keşfedin. Resmi Ghost temalarından öğrenmek, tema oluşturma becerilerinizi geliştirmenin harika bir yoludur.​