Добавить комментарии на сайты Wix

В этом примере мы добавим FastComments Live Commenting на страницы записей блога.

Для этого откроем наш сайт в редакторе Wix.

Затем нужно убедиться, что мы редактируем нужную страницу.

Мы хотим, чтобы для каждой записи блога отображалась уникальная ветка комментариев, поэтому отредактируем Blog Pages -> Post.

Шаг первый: Редактирование динамической страницы записи

Затем перейдем в Add -> Embed Code -> Embed HTML.

Шаг второй: добавление блока Embed HTML

В результате мы получим вот такой невзрачный блок для начала:

Исходный блок

В этом примере используется специальный код для совместимости с Wix. Вы не сможете использовать фрагменты кода FastComments из других руководств.

Откройте форму, чтобы добавить наш диалог пользовательского HTML, нажав Enter Code и выбрав HTML:

Шаг 3: Открытие HTML-диалога

Скопируйте следующий HTML-фрагмент, вставьте его в диалог и нажмите Update:

Фрагмент кода комментариев для Wix

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 const config = {

7 tenantId: "demo"

8 };

9 const instance = FastCommentsUI(document.getElementById('fastcomments-widget'), config);

10 window.onmessage = (event) => {

11 if (event.data) {

12 if (event.data.action === 'reload') {

13 console.log('Updating FastComments:', event.data.url);

14 config.urlId = event.data.url;

15 config.url = event.data.url;

16 instance.update(config);

17 }

18 }

19 }

20 })();

21</script>

22

Шаг 3: Вставка и сохранение

Теперь вы должны увидеть очень маленькую версию виджета комментариев:

Шаг 3: Результат

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

Теперь, когда виджет комментариев добавлен, давайте расположим его на нашей странице.

Шаг 4: Изменение размера

В этом руководстве мы сможем менять текущий thread в зависимости от активной страницы. Однако мы не сможем динамически изменять размер виджета комментариев пока Wix не откроет эту функциональность. До тех пор вам придётся самостоятельно решить, какого размера должна быть область комментариев на вашей странице, и задать её соответствующие размеры.

Далее настроим всё так, чтобы ветка комментариев менялась в зависимости от текущей страницы, позволяя пользователям обсуждать отображаемый контент.

Без следующих шагов у вас будет только одна глобальная ветка комментариев для всего сайта — что не очень удобно.

Режим разработки (Dev Mode)

Чтобы добавить эту функциональность, нам нужно перейти в так называемый Dev Mode в Wix.

Нажмите на опцию Dev Mode в верхней части экрана.

Включите Dev Mode

Задайте ID элемента

Мы добавим пользовательский код для этого, но сначала нужно задать ID новому элементу встраивания, чтобы ссылаться на него.

Назовём его fastcomments.

Нажмите на новый элемент встраивания, который мы добавили, и в режиме разработки в правом нижнем углу вы должны увидеть поле ID со значением вроде html1:

Поле ID

Измените его на fastcomments и нажмите Enter:

Задайте ID

Теперь мы можем добавить пользовательский код, который сообщает области комментариев, какую страницу мы просматриваем.

В нижней части экрана вы должны увидеть редактор кода, как этот:

Откройте редактор

Скопируйте следующий код и вставьте его туда:

Сниппет навигации комментариев Wix

Copy

1

2import wixLocation from 'wix-location';

3

4$w.onReady(function () {

5 function updateFastCommentsLocation() {

6 try {

7 const url = (wixLocation.baseUrl + '/' + wixLocation.path).replace(/,/g, '/');

8 $w('#fastcomments').postMessage({'action': 'reload', 'url': url});

9 } catch (err) {

10 console.error('Wix -> FastComments Error', err);

11 }

12 }

13

14 updateFastCommentsLocation();

15 wixLocation.onChange( () => {

16 updateFastCommentsLocation();

17 });

18});

19

Добавьте код навигации

Теперь можно перевести дух и просмотреть наш сайт. Вы должны увидеть область комментариев, которая изменяется в зависимости от данной страницы. Поздравляем!

Если у вас возникнут какие-либо проблемы, сообщите нам в поле для комментариев ниже.

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

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