Ghost Temanızı nasıl hata ayıklayabilirsiniz?

Temanızı nasıl hata ayıklayabilirsiniz?

Ghost'un günlük yardımcısını nasıl kullanacağınızı öğrenerek böcek ezme yeteneğinizi artırın, yaratıcı olanaklarınızı genişletin ve özel tema geliştirme için tamamen yeni bir bakış açısının kilidini açın
En sevdiğiniz filmin perde arkasını gösteren Ghost'un {{log}} yardımcısı, temanızın arkasındaki verileri görmenizi sağlayarak temanızda bir profesyonel gibi hata ayıklama yapmanızı sağlar. Bu eğitimde, Jamie'nin yeni Ghost sitesi Cats in Art üzerinde çalışmasını takip edeceğiz. Gerçek dünyadan örnekler kullanarak, başlangıçtan bağlamlar arasında gezinmeye kadar günlük yardımcısı hakkında bilmeniz gereken her şeyi göstereceğiz.
Ghost'u geliştirme modunda başlatın
{{log}} yardımcı programını kullanmak için Ghost'u geliştirme modunda başlatın. Bir terminalde, Ghost'un yerel olarak kurulu olduğu dizine gidin ve ghost run -D komutunu çalıştırın. Bu komut, Ghost'a başlamasını ve günlük bilgilerini konsola göndermesini söyler.

bash:

ghost run -D

Bir tarayıcı açın ve yerel Ghost sitenize gidin. Her sayfa yüklemesinde, sayfa ve varlıkları (görseller gibi) için istekler artık konsolda görünür. Verilerin gerçek zamanlı olarak kaydedildiğini görmek için sayfayı yenileyin. (Ghost'un geliştirme modunu durdurmak için terminalde ctrl + c tuşlarına basın.)
Ghost Admin'i açın, Ayarlar'a gidin ve temanızı ayarlayın. Artık {{log}} yardımcısını kullanmaya hazırsınız
Gerçek zamanlı değişiklikleri görmek için tema klasörünüzün Ghost'un içerik/temalar klasöründe bulunduğundan (veya bu klasöre bağlı olduğundan) emin olun.
{{log}} yardımcısını kullanın
{{log}} yardımcı aracı, temanızın belirli bir yerinde hangi verilerin mevcut olduğunu gösterir. Cats in Art, tahmin ettiğiniz gibi sanat eserlerinde kedileri konu alan bir sitedir. Ghost'un varsayılan teması olan Casper'ı kullanır. Jamie'nin {{log}} yardımcı aracını nasıl kullandığını takip ederken, aşağıda gösterilen tekniklerin tüm Ghost temalarıyla uyumlu olduğunu unutmayın.

Günlüklere özgü veriler
Jamie, yazar profiline arka plan resmi olarak kullanmak üzere hoş bir degrade ekledi, ancak resim sitede görünmüyor. Casper'ın yazar profili sayfalarını oluşturmak için kullandığı author.hbs dosyasını açıp arka plan resminin kodunu buluyorlar:

handlebars:

<img
        srcset="{{img_url feature_image size="s"}} 300w,
                {{img_url feature_image size="m"}} 600w,
                {{img_url feature_image size="l"}} 1000w,
                {{img_url feature_image size="xl"}} 2000w"
        sizes="(max-width: 1000px) 400px, 800px"
        src="{{img_url feature_image size="m"}}"
        alt="{{name}}"
/>

Geliştirme modunda çalıştığı için Jamie, hatanın sebebi hakkında zaten belli belirsiz bir fikre sahip. Görüntü dosyasının bulunamadığını belirten bir 404 hatası var.
​

Günlük yardımcısını, günlük anahtar sözcüğünü kaydedilecek özellik olan {{log property_to_logged}} ile birleştirerek kullanın. Eksik görüntülerini araştırmalarına yardımcı olmak için Jamie, günlük yardımcısını şablona ekleyerek ve tarayıcıdaki sayfayı yenileyerek feature_image değerini kaydeder.

handlebars:

{{log feature_image}}
<img
        srcset="{{img_url feature_image size="s"}} 300w,
                {{img_url feature_image size="m"}} 600w,
                {{img_url feature_image size="l"}} 1000w,
                {{img_url feature_image size="xl"}} 2000w"
        sizes="(max-width: 1000px) 400px, 800px"
        src="{{img_url feature_image size="m"}}"
        alt="{{name}}"
/>

undefined now appears in the log. From here, Jamie guesses that they're likely not using the right image property, which is why the image is not coming through. To be sure, Jamie annotates the log helper with static text. This technique is particularly useful when using multiple log helpers.

handlebars:

{{log "feature image:" feature_image}}

Bu metin parçasının eklenmesi, feature_image özelliğinin tanımsız olduğunu doğruluyor. Jamie, özellik değerinin yanlış olmasından dolayı üzgün ama hatanın ne olduğunu öğrenince rahatladı.

Mevcut tüm verileri kaydet
Eğer feature_image doğru özellik değilse, o zaman nedir? Jamie, bir bağlamdaki tüm mevcut verileri göstermek için {{log this}} özelliğini kullanır.

handlebars:

{{log this}}

Think of log this as saying “log this data right here.” Jamie now gets this output:



javascript:

{
  slug: 'jamie',
  id: '1',
  name: 'Jamie Larson',
  profile_image: null,
  cover_image: 'http://localhost:2368/content/images/2023/01/mesh-gradient.png',
  bio: null,