Dodajte komentarisanje uživo samo za članove na Ghost sajtove

Да бисте правилно додали FastComments у Ghost, морамо уредити датотеке теме.

Почнимо тако што ћемо преузети вашу тренутну или жељену тему.

Идите на контролну таблу вашег сајта и кликните на зупчаник у доњем левом углу:

Open Settings

Затим изаберите опцију Design:

Select Design

Иако технички не мењамо тему, кликните на Change Theme у доњем левом углу:

Change Theme

У горњем десном углу изаберите Advanced:

Select Advanced

...а затим преузмите вашу тренутну или жељену тему:

Download Theme

Sada kada smo preuzeli zip fajl, raspakujte ga u folder. Preuzeo sam podrazumevani casper.zip i raspakovao u Downloads\casper na Windows.

Zatim, treba да се уверите да имате инсталирану LTS или новију верзију NodeJS-а. Možete je preuzeti ovde: https://nodejs.org/en/download/

Kada je NodeJS instaliran, требало би да инсталирате уређивач кода.

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

Kao sledeća najbolja besplatna opcija вероватно би био Visual Studio Code: https://code.visualstudio.com/download

Kada podesite uređivač и otvorите folder teme у uređивачу, otvorite terminal у IDE-у и pokrenite:

Instalirajte temu

Copy

1

2npm install

3

Uspešan izlaz komande npm install će izgledati ovako (možete zanemariti upozorenja):

Uspešan izlaz komande npm install

Ovo će podesiti zavisnosti teme за naredne komande koje ћемо покренути. Такође, експорт зависи од тога да су зависности теме инсталиране; у супротном поновни увоз неће правилно радити.

Сада када имамо тему отворену у нашем уреднику, отворите package.json и промените поље name у нешто друго. У нашем случају ми једноставно додајемо -fastcomments на крај:

Преименујте тему

Ако користите IDE, он ће аутоматски сачувати након што направите ову измену.

Сада ћемо отворити шаблон који се користи за наше блог чланке. Зове се post.hbs:

Отворите 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 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

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

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

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

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

Поново отворите терминал свог уредника и покрените npm run zip.

Извезите вашу тему

Ово ће пакети тему у zip архиву у dist/casper-fastcomments.zip (ако сте тако назвали тему у Трећем кораку).

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

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

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

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

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

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

Успешно!

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

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

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