Add Members-Only Live Commenting to ghost Sites

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

Now that we've downloaded the zip file, extract it to a folder. I've downloaded the default casper.zip and extracted to Downloads\casper on Windows.

Next, you'll want to make sure you have the LTS or newer version of NodeJS installed. You can get that here: https://nodejs.org/en/download/

Once NodeJS is installed, you'll want to install a code editor.

We recommend (and use) Webstorm, which you can get here with a 30-day trial (no credit card needed): https://www.jetbrains.com/webstorm/

The next best free option would probably be Visual Studio Code: https://code.visualstudio.com/download

Once you have your editor setup, and the theme folder open in the editor, open the terminal in the IDE and run:

Temayı Yükle

Copy

1

2npm install

3

Başarılı çıktı şu şekilde görünecektir (uyarıları görmezden gelebilirsiniz):

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

This will set up the theme's dependencies for later commands we will run. Also, the export depends on the theme's dependencies being installed, otherwise the re-import will not work properly.

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ç

Sonraki adım, FastComments.com widget kodunu nereye ekleyeceğimizi belirlemektir.

Varsayılan casper temasını kullanıyorsanız, 82 satırında şu şekilde bir bölüm görürsünüz:

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

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

Bölüm Örneği

Copy

1

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

3</section>

4

Elinizde şu şekilde bir şey hazır olmalıdır:

Yorum Kodu İçin Şablon Hazır

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

Ghost FastComments.com Yorum Kod Parçası

Copy

1

2<script src="https://cdn.fastcomments.com/js/embed-v2.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 FastCommentsUI(document.getElementById('fastcomments-widget'), {

23 tenantId: "demo",

24 urlId: window.location.pathname,

25 allowAnon: false,

26 simpleSSO: simpleSSO

27 });

28 })();

29</script>

30

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

FastComments.com Yorum Kodunu Ekle

Kodlama tamam. Şimdi temanı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.