Üyelere Özel Canlı Yorumlamayı Ghost Sitelerine Ekleyin

FastComments'i Ghost'a düzgün şekilde eklemek için tema dosyalarını düzenlememiz gerekiyor.

O halde mevcut veya tercih ettiğiniz temayı indirmekle başlayalım.

Site kontrol panelinize gidin ve sol alt köşedeki dişli simgesine tıklayın:

Ayarları Aç

Sonra Design seçeneğini seçin:

Tasarımı Seçin

Teknik olarak temayı değiştirmiyor olsak da, sol alt köşedeki Change Theme'e tıklayın:

Temayı Değiştirin

Sağ üstten Advanced'ı seçin:

Gelişmiş'i Seçin

...ve sonra mevcut veya tercih ettiğiniz temayı indirin:

Temayı İndirin

Zip dosyasını indirdikten sonra bir klasöre çıkartın. Varsayılan casper.zip dosyasını indirdim ve Windows'ta Downloads\casper klasörüne çıkardım.

Ardından, LTS veya daha yeni bir NodeJS sürümünün yüklü olduğundan emin olmanız gerekiyor. Buradan indirebilirsiniz: https://nodejs.org/en/download/

NodeJS yüklendikten sonra bir kod düzenleyici yüklemeniz gerekecek.

30 günlük deneme sürümüyle (kredi kartı gerekmez) buradan edinebileceğiniz Webstorm'u öneriyoruz (ve kullanıyoruz): https://www.jetbrains.com/webstorm/

Muhtemelen bir sonraki en iyi ücretsiz seçenek Visual Studio Code olacaktır: https://code.visualstudio.com/download

Düzenleyicinizi kurup tema klasörünü düzenleyicide açtıktan sonra, IDE'deki terminali açın ve şunu çalıştırın:

Temayı Yükle

Copy

1

2npm install

3

Başarılı çıktı şöyle görünecektir (uyarıları yok sayabilirsiniz):

Başarılı npm install çıktısı

Bu, daha sonra çalıştıracağımız komutlar için temanın bağımlılıklarını kuracaktır. Ayrıca, dışa aktarma işleminin çalışması temanın bağımlılıklarının yüklü olmasına bağlıdır, aksi takdirde yeniden içe aktarma düzgün çalışmayacaktır.

Artık temayı düzenleyicide açtığımıza göre, package.json dosyasını açın ve name alanını başka bir şeyle değiştirin. Bizim durumumuzda sonuna sadece -fastcomments ekliyoruz:

Tema Adını Değiştir

Bir IDE kullanıyorsanız, bu değişikliği yaptıktan sonra otomatik olarak kaydedilecektir.

Şimdi blog yazılarımız için kullanılan şablonu açacağız. Adı post.hbs:

post.hbs'i aç

Şimdi FastComments.com widget kodunu nereye ekleyeceğimizi belirlememiz gerekiyor.

Varsayılan casper temasını kullanıyorsanız, 82 satırında şuna benzer bir bölüm göreceksiniz:

Devre Dışı Yorum Bölümü

Diğer temaları kullanıyorsanız bunu görmeyeceksiniz ve bu kodu son </section> etiketinden sonra eklemeniz gerekecek:

Bölüm Örneği

Copy

1

2<section class="article-comments gh-canvas">

3</section>

4

Şuna benzer bir şey hazır olmalı:

Yorum Kodu İçin Hazır Şablon

Hazır olduğunuzda FastComments.com widget kodunu kopyalayın:

Ghost FastComments.com Yorum Kod Parçacığı

Copy

1

2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>

3<div id="fastcomments-widget"></div>

4<script>

5 (function () {

6 let simpleSSO = null;

7

8 \{{#if access}}

9 \{{#if @member}}

10 simpleSSO = {

11 id: '\{{ @member.uuid }}',

12 email: '\{{@member.email}}',

13 username: '\{{@member.name}}',

14 avatar: '\{{ @member.avatar_image }}',

15 optedInNotifications: true,

16 optedInSubscriptionNotifications: true,

17 displayLabel: '\{{@member.labels}}'

18 }

19 \{{/if}}

20 \{{/if}}

21

22 window.fcConfigs = [{

23 target: '#fastcomments-widget',

24 tenantId: "demo",

25 urlId: window.location.pathname,

26 allowAnon: false,

27 simpleSSO: simpleSSO

28 }];

29 })();

30</script>

31

...ve şöyle görünmeli:

FastComments.com Yorum Kodunu Ekle

Kodlama tamam. Şimdi sadece temamızı yeniden içe aktarmamız gerekiyor!

Şimdi tema dosyalarını tekrar bir zip dosyasına paketlememiz gerekiyor. Bunu yapmak için Ghost'taki yerleşik özellikleri kullanın.

Editörünüzün terminalini tekrar açın ve npm run zip çalıştırın.

Temanızı Dışa Aktarın

Bu, temayı dist/casper-fastcomments.zip içinde bir zip dosyasına paketleyecektir (eğer temayı Step Three'da böyle adlandırdıysanız).

Ghost kontrol paneline geri döndüğümüzde, temanızı yükleyelim:

Temanızı Yükleyin

Benim durumumda zip dosyası aşağıdaki konumda bulunuyor. dist klasörüne dikkat edin:

Yüklenecek Zip'i Seçin

Yeni yüklediğiniz temayı etkinleştirmeyi unutmayın (Ghost size bunu soracaktır).

Artık üyelerimiz için FastComments Live Commenting etkinleştirilmiş olmalı!

Başarılı!

FastComments'ı Ghost ile kurduğunuz için tebrikler! Bir Domain Error ile karşılaştıysanız veya yorum alanını nasıl özelleştireceğinizi öğrenmek istiyorsanız, okumaya devam edin!

FastComments, sitenize uyacak şekilde özelleştirilebilmesi için tasarlanmıştır.

Özel stil eklemek veya yapılandırmayı ayarlamak isterseniz, nasıl yapıldığını öğrenmek için Özelleştirme Belgelerimize Göz Atın.