Add Members-Only Live Commenting to ghost Sites

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

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

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

Отворите Подешавања

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

Изаберите Design

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

Change Theme

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

Изаберите Advanced

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

Преузмите тему

Sada kada smo preuzeli zip fajl, raspakujte ga u folder. Ja sam preuzeo podrazumijevani casper.zip i raspakovao ga u Downloads\casper na Windowsu.

Zatim, uvjerite se da imate instaliranu LTS ili noviju verziju NodeJS-a. Možete je preuzeti ovdje: https://nodejs.org/en/download/

Kada je NodeJS instaliran, treba da instalirate uređivač koda.

Preporučujemo (i koristimo) Webstorm, koji možete dobiti ovdje sa 30-dnevnom probom (nije potrebna kreditna kartica): https://www.jetbrains.com/webstorm/

Sljedeća najbolja besplatna opcija vjerovatno bi bila Visual Studio Code: https://code.visualstudio.com/download

Kada postavite uređivač i otvorite folder teme u uređivaču, otvorite terminal u IDE-u i pokrenite:

Instalirajte temu

Copy

1

2npm install

3

Uspješan izlaz će izgledati ovako (možete ignorisati upozorenja):

Successful npm install output

Ovo će postaviti zavisnosti teme za naredne komande koje ćemo pokretati. Takođe, izvoz zavisi od toga da su zavisnosti teme instalirane, inače ponovni uvoz neće raditi ispravno.

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

Преименовање теме

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

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

Otvori post.hbs

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

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

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

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

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

Copy

1

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

3</section>

4

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

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

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

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

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.

Open your editor's terminal again and run npm run zip.

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

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

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

Отпремите тему

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

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

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

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

Успјешно!

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

FastComments je dizajniran da se prilagodi vašem sajtu.

Ako želite dodati prilagođeni stil ili podesiti konfiguraciju, Pogledajte našu dokumentaciju o prilagođavanju da saznate kako.