Add Members-Only Live Commenting to ghost Sites

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

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

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

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

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

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

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

Сменить тему

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

Выберите Advanced

...а затем скачайте вашу текущую или желаемую тему:

Скачать тему

Теперь, когда мы скачали zip-файл, распакуйте его в папку. Я скачал стандартный casper.zip и распаковал в Downloads\casper на Windows.

Next, you'll want to make sure you have the LTS or newer version of NodeJS installed. You can get that here: https://nodejs.org/en/download/

Once NodeJS is installed, you'll want to install a code editor.

We recommend (and use) Webstorm, which you can get here with a 30-day trial (no credit card needed): https://www.jetbrains.com/webstorm/

The next best free option would probably be Visual Studio Code: https://code.visualstudio.com/download

Once you have your editor setup, and the theme folder open in the editor, open the terminal in the IDE and run:

Установить тему

Copy

1

2npm install

3

Успешный вывод будет выглядеть так (предупреждения можно игнорировать):

Успешный вывод npm install

This will set up the theme's dependencies for later commands we will run. Also, the export depends on the theme's dependencies being installed, otherwise the re-import will not work properly.

Теперь, когда тема открыта в нашем редакторе, откройте 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 разработан так, чтобы его можно было настроить под ваш сайт.

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