Add Comments to Wix Sites

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.

Næste skal vi sætte tingene op, så kommentartråden ændrer sig baseret på den aktuelle side, hvilket tillader brugerne at diskutere det aktuelt viste indhold.

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

Dev Mode

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

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

Aktivér Dev Mode

Angiv elementets ID

Vi vil tilføje tilpasset kode for at gøre dette, men først skal vi give det nye embed-element et ID, som vi kan henvise til.

Lad os kalde det fastcomments.

Klik på det nye embed-element, 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:

Angiv ID

Nu kan vi tilføje vores tilpassede kode, der fortæller kommentarfeltet, hvilken side vi ser.

Nederst på skærmen skulle du se en kodeeditor som denne:

Åbn editoren

Kopier følgende kode og indsæt den dér:

Wix-kommentarers navigationsudsnit

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.