Add Comments to Wix Sites

За този пример ще добавим FastComments Live Commenting към страниците с публикации в блога.

За да направим това, ще отворим нашия сайт в редактора на Wix.

След това трябва да се уверим, че редактираме правилната страница.

Искаме да се уверим, че показваме уникална нишка с коментари за всяка публикация в блога, затова нека редактираме Blog Pages -> Post.

Стъпка 1: Редактирайте динамичната страница на публикацията

След това ще отидем на 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 не предостави тази функционалност. До тогава ще трябва да решите колко голяма искате да бъде областта за коментари на вашата страница и да я оразмерите съответно.

Next, let's set things up so that the comment thread changes based on the current page, allowing users to discuss the currently displayed content.

Without the following steps, you will only have one global comment thread for your entire site - which is not very useful.

Режим на разработка

To add this functionality, we'll have to go into what Wix calls Dev Mode.

Click the Dev Mode option at the top of the screen.

Активиране на Dev Mode

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

We're going to add custom code to accomplish this, but first we need to give the new embed element an ID to refer to it by.

Let's call it fastcomments.

Click the new embed element we added, and in dev mode in the bottom right you should see an ID field with a value like html1:

Полето за ID

Change this to fastcomments and hit enter:

Задайте ID

Now we can add our custom code that tells the comment area what page we are viewing.

At the bottom of the screen you should see a code editor like this:

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

Copy the following code and paste it in there:

Навигационен фрагмент за коментари на 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 е проектиран да бъде персонализиран, за да съответства на вашия сайт.

Ако искате да добавите персонализирани стилове или да настроите конфигурацията, Прегледайте нашата документация за персонализация, за да научите как.