Добавьте живой комментарий только для участников на сайты Ghost

Чтобы правильно добавить FastComments в Ghost, нужно отредактировать файлы темы.

Начнём с загрузки вашей существующей или желаемой темы.

Перейдите в панель управления сайтом и нажмите шестерёнку в левом нижнем углу:

Откройте настройки

Далее выберите опцию Design:

Выберите дизайн

Хотя технически мы не меняем тему, нажмите Change Theme в левом нижнем углу:

Сменить тему

В правом верхнем углу выберите Advanced:

Выберите 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 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 (если вы назвали тему именно так в Step Three).

Вернувшись в панель управления Ghost, загрузим нашу тему:

Загрузите тему

У меня zip-файл находится в следующем месте. Обратите внимание на папку dist:

Выберите ZIP-файл для загрузки

Не забудьте активировать только что загруженную тему (Ghost должен предложить это).

Теперь у наших участников должна быть включена FastComments Live Commenting!

Успех!

Поздравляем с настройкой FastComments в Ghost! Если у вас возникла ошибка Domain Error, или вы хотите узнать, как настроить область комментариев, продолжайте чтение!

FastComments разработан так, чтобы его можно было настроить под ваш сайт.

Если вы хотите добавить собственные стили или изменить конфигурацию, ознакомьтесь с нашей документацией по настройке, чтобы узнать, как.