Add Members-Only Live Commenting to ghost Sites

За да добавим FastComments към Ghost правилно, трябва да редактираме файловете на темата.

Да започнем, като изтеглим текущата ви или желаната тема.

Отидете до таблото за управление на вашия сайт и кликнете върху иконата на зъбно колело в долния ляв ъгъл:

Отворете Настройки

След това изберете опцията Design:

Изберете Дизайн

Въпреки че технически не променяме темата, кликнете върху Change Theme в долния ляв ъгъл:

Сменете тема

В горния десен ъгъл изберете Advanced:

Изберете Разширени настройки

...и след това изтеглете текущата или предпочитаната от вас тема:

Изтеглете темата

Сега, когато сме изтеглили 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

Това ще настрои зависимостите на темата за по-късните команди, които ще изпълним. Също така, експортирането зависи от това зависимостите на темата да са инсталирани, в противен случай повторният импорт няма да работи правилно.

Сега, когато темата е отворена в нашия редактор, отворете 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 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 е проектиран да се персонализира, за да съответства на вашия сайт.

Ако искате да добавите персонализирани стилове или да нагласите конфигурацията, Разгледайте нашата документация за персонализиране, за да научите как.