Add Members-Only Live Commenting to ghost Sites

Да бисте правилно додали 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

Next we need to identify where to add the FastComments.com widget code.

If you're using the default casper theme, you'll see a section like this at line 82:

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

If you're using other themes, you won't see this, and will need to add this code after the last </section>:

Пример одељка

Copy

1

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

3</section>

4

You should have something like this ready:

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

Once ready, copy the FastComments.com widget code:

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

...and it should look like this:

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

Coding done. Now we just have to re-import our theme!

Сада треба да упакујемо фајлове теме назад у 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 Commenting омогућен за наше чланове!

Успешно!

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

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

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