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

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:

Фрагмент коду коментарів 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

...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.

Експортуйте вашу тему

This will package the theme into a zip file in dist/casper-fastcomments.zip (if that is what you've named the theme in Step Three).

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

Завантажте свою тему

У мене zip-файл знаходиться в такому місці. Зверніть увагу на папку dist:

Виберіть ZIP-файл для завантаження

Не забудьте активувати щойно завантажену тему (Ghost має запропонувати це).

Тепер у наших користувачів має бути увімкнено FastComments Live Commenting!

Успіх!

Вітаємо з налаштуванням FastComments для Ghost! Якщо у вас виникла помилка Domain Error, або ви хочете дізнатися, як налаштувати розділ коментарів, читайте далі!

FastComments призначено для налаштування під ваш сайт.

Якщо ви хочете додати власні стилі або відкоригувати конфігурацію, Ознайомтеся з нашою документацією з налаштувань та конфігурації, щоб дізнатися, як.