Add Members-Only Live Commenting to ghost Sites

Da bismo pravilno dodali FastComments u Ghost, moramo urediti datoteke teme.

Dakle, počnimo s preuzimanjem vaše postojeće ili željene teme.

Idite na nadzornu ploču vaše stranice i kliknite zupčanik u donjem lijevom uglu:

Otvorite Postavke

Zatim odaberite opciju Design:

Odaberite Dizajn

Iako tehnički ne mijenjamo temu, kliknite na Change Theme u donjem lijevom uglu:

Promijeni Temu

U gornjem desnom uglu odaberite Advanced:

Odaberite Napredno

...a zatim preuzmite svoju trenutnu ili željenu temu:

Preuzmite Temu

Сада када смо преузели zip фајл, извучите га у фасциклу. Ја сам преузео подразумевани casper.zip и распаковао га у Downloads\casper на Windows.

Затим, требате се уверити да имате инсталирану LTS или новију верзију NodeJS-а. Можете је преузети овдје: https://nodejs.org/en/download/

Када је NodeJS инсталиран, требате инсталирати уређивач кода.

Препоручујемо (и користимо) Webstorm, који можете добити овдје са 30-дневном пробом (није потребна кредитна картица): https://www.jetbrains.com/webstorm/

Наредна најбоља бесплатна опција би вероватно била Visual Studio Code: https://code.visualstudio.com/download

Када имате подешен уређивач и фасциклу теме отворену у уређивачу, отворите терминал у IDE-у и покрените:

Инсталирање теме

Copy

1

2npm install

3

Успјешни излаз ће изгледати овако (можете занемарити упозорења):

Успјешан излаз npm install

Ово ће подесити зависности теме за касније команде које ћемо покренути. Такође, извоз зависи од тога да ли су зависности теме инсталиране, у супротном поновни увоз неће исправно радити.

Sada kada imamo temu otvorenu u našem editoru, otvorite package.json i promijenite polje name u nešto drugo. U našem slučaju samo dodamo -fastcomments na kraj:

Preimenujte temu

Ako koristite IDE, on će automatski sačuvati promjene nakon što napravite ovu izmjenu.

Sada ćemo otvoriti predložak koji se koristi za naše blog članke. Zove se post.hbs:

Otvorite post.hbs

Следеће треба да утврдимо где да додамо код FastComments.com видџета.

Ако користите подразумевану тему casper, видећете одељак попут овог на линији 82:

Онемогућен одељак за коментаре

Ако користите друге теме, ово нећете видети и морате додати овај код након последњег </section>:

Пример секције

Copy

1

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

3</section>

4

Требало би да имате нешто овако спремно:

Шаблон спреман за код коментара

Када сте спремни, копирајте код FastComments.com видџета:

Исек кода за коментаре FastComments.com за Ghost

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

...и требало би да изгледа овако:

Додавање FastComments.com кода за коментаре

Кодирање је завршено. Сада само треба поново увезти нашу тему!

Сада треба да упакујемо датотеке теме назад у zip фајл. За то користите уграђене функције у Ghost-у.

Поново отворите терминал у вашем уређивачу и покрените npm run zip.

Извези своју тему

Ово ће упаковати тему у zip фајл у dist/casper-fastcomments.zip (ако сте тако именовали тему у Step Three).

Вратимо се у Ghost контролну таблу, отпремимо нашу тему:

Отпремите своју тему

За мене, zip фајл се налази на следећој локацији. Обратите пажњу на dist фолдер:

Одаберите ZIP за отпремање

Не заборавите да активирате ново отпремљену тему (Ghost би требало да вас пита).

Сада би FastComments Live Commenting требало да буде омогућен за наше чланове!

Успјешно!

Честитамо на подешавању FastComments са Ghost! Ако сте наишли на Domain Error, или желите да научите како прилагодити област коментара, прочитајте даље!

FastComments је дизајниран да се прилагоди вашем сајту.

Ако желите додати прилагођени стил или подесити конфигурацију, Погледајте нашу документацију о прилагођавању да сазнате како.