Add Members-Only Live Commenting to ghost Sites

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

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

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

Открыть настройки

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

Выберите Design

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

Нажмите 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 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 для наших участников!

Успешно!

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

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

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