Tilføj kommentarer til Wix-websteder

I dette eksempel vil vi tilføje FastComments Live Commenting til blogindlægssider.

For at gøre dette åbner vi vores site i Wix-editoren.

Dernæst skal vi sikre os, at vi redigerer den rigtige side.

Vi vil sikre, at vi viser en unik kommentertråd for hvert blogindlæg, så lad os redigere Blog Pages -> Post.

Trin et: Rediger den dynamiske indlægsside

Dernæst går vi til Add -> Embed Code -> Embed HTML.

Trin to: Tilføj et Embed HTML-blok

Dette giver os en lidt trist boks at starte med:

Startblokken

Dette eksempel bruger brugerdefineret kode for at være kompatibelt med Wix. Du vil ikke kunne bruge FastComments-kodeudsnittene fra andre vejledninger.

Åbn formularen for at tilføje vores brugerdefinerede HTML-dialog ved at klikke på Enter Code og vælge HTML:

Trin 3: Åbn HTML-dialog

Kopiér følgende HTML-udsnit og indsæt det i dialogen, og klik på Opdater:

Kodeudsnit til Wix-kommentarer

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

Trin 3: Indsæt og gem

Du bør nu se en meget lille version af kommentar-widgeten:

Trin 3: Resultatet

Herefter vil vi placere og tilpasse størrelsen, så den passer til vores side.

Nu hvor vi har tilføjet kommentar-widgeten, lad os få den placeret på vores side.

Trin 4: Ændre størrelse

Med denne vejledning vil vi kunne ændre den aktuelle tråd baseret på den aktive side. Dog vil vi ikke kunne ændre størrelsen på kommentar-widgeten dynamisk før Wix åbner for denne funktionalitet. Indtil da skal du beslutte, hvor stort kommentarfeltet på din side skal være, og tilpasse størrelsen derefter.

Dernæst lad os indstille det, så kommentartråden ændrer sig baseret på den aktuelle side, så brugerne kan diskutere det indhold, der vises i øjeblikket.

Uden følgende trin vil du kun have én global kommentartråd for hele dit websted - hvilket ikke er særlig nyttigt.

Dev Mode

For at tilføje denne funktionalitet skal vi gå ind i det, Wix kalder Dev Mode.

Klik på Dev Mode-indstillingen øverst på skærmen.

Aktivér Dev Mode

Sæt Element-ID'et

Vi kommer til at tilføje brugerdefineret kode for at opnå dette, men først skal vi give det nye indlejringselement et ID, som vi kan referere til det med.

Lad os kalde det fastcomments.

Klik på det nye indlejringselement, vi tilføjede, og i dev mode nederst til højre bør du se et ID-felt med en værdi som html1:

ID-feltet

Ændr dette til fastcomments og tryk enter:

Sæt ID'et

Nu kan vi tilføje vores brugerdefinerede kode, der fortæller kommentarområdet, hvilken side vi ser.

Nederst på skærmen bør du se en kodeeditor som denne:

Åbn Editoren

Kopiér følgende kode og indsæt den der:

Wix Kommentarer Navigationssnippet

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

Tilføj Navigationskoden

Nu kan vi trække vejret og forhåndsvise vores side. Du bør se et kommentarfelt, der ændrer sig baseret på den givne side. Tillykke!

Hvis du har problemer, så giv os besked i kommentarboksen nedenfor.

FastComments er designet til at kunne tilpasses, så det matcher dit websted.

Hvis du gerne vil tilføje brugerdefineret styling eller justere konfigurationen, Se vores Tilpasningsdokumentation for at lære hvordan.