Add Comments to Wix Sites

Για αυτό το παράδειγμα, θα προσθέσουμε το FastComments Live Commenting σε σελίδες δημοσιεύσεων ιστολογίου.

Για να το κάνουμε αυτό, θα ανοίξουμε τον ιστότοπό μας στον επεξεργαστή Wix.

Στη συνέχεια, πρέπει να βεβαιωθούμε ότι επεξεργαζόμαστε τη σωστή σελίδα.

Θέλουμε να βεβαιωθούμε ότι εμφανίζουμε ένα μοναδικό νήμα σχολίων για κάθε ανάρτηση ιστολογίου, οπότε ας επεξεργαστούμε το Blog Pages -> Post.

Βήμα Πρώτο: Επεξεργασία της Δυναμικής Σελίδας Ανάρτησης

Στη συνέχεια, θα πάμε στο Add -> Embed Code -> Embed HTML.

Βήμα Δύο: Προσθήκη μπλοκ Embed HTML

Αυτό θα μας δώσει ένα κουτί που φαίνεται λυπηρό για να ξεκινήσουμε:

Το Αρχικό Μπλοκ

Αυτό το παράδειγμα χρησιμοποιεί προσαρμοσμένο κώδικα ώστε να είναι συμβατό με το Wix. Δεν θα μπορείτε να χρησιμοποιήσετε τα αποσπάσματα κώδικα του FastComments από άλλα σεμινάρια.

Open the form to add our custom HTML dialog by clicking Enter Code and selecting HTML:

Βήμα 3: Άνοιγμα διαλόγου HTML

Copy the following HTML snippet and paste it into the dialog, and click Ενημέρωση:

Απόσπασμα κώδικα σχολίων 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: Επικόλληση και Αποθήκευση

You should now see a very tiny version of the comment widget:

Βήμα 3: Το Αποτέλεσμα

Στη συνέχεια θα το τοποθετήσουμε και θα προσαρμόσουμε το μέγεθός του ώστε να ταιριάζει στη σελίδα μας.

Τώρα που έχουμε προσθέσει το widget σχολίων, ας το τοποθετήσουμε στη σελίδα μας.

Βήμα 4: Αλλαγή μεγέθους

Με αυτόν τον οδηγό θα μπορούμε να αλλάξουμε το τρέχον νήμα με βάση την ενεργή σελίδα. Ωστόσο, δεν θα μπορούμε να αλλάξουμε το μέγεθος του widget σχολίων δυναμικά μέχρι η 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. Χωρίς τα ακόλουθα βήματα, θα έχετε μόνο ένα παγκόσμιο νήμα σχολίων για ολόκληρο τον ιστότοπό σας - το οποίο δεν είναι ιδιαίτερα χρήσιμο.

Dev Mode

Dev Mode

To add this functionality, we'll have to go into what Wix calls Dev Mode. Για να προσθέσουμε αυτή τη λειτουργία, θα πρέπει να μεταβούμε σε αυτό που η Wix ονομάζει Dev Mode.

Click the Dev Mode option at the top of the screen. Κάντε κλικ στην επιλογή Dev Mode στο πάνω μέρος της οθόνης.

Enable Dev Mode

Set the Element ID

Set the Element 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. Θα προσθέσουμε προσαρμοσμένο κώδικα για να το επιτύχουμε, αλλά πρώτα πρέπει να δώσουμε στο νέο embed στοιχείο ένα ID για να αναφερόμαστε σε αυτό.

Let's call it fastcomments. Ας το ονομάσουμε 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: Κάντε κλικ στο νέο embed στοιχείο που προσθέσαμε, και στο dev mode στο κάτω δεξιά μέρος θα πρέπει να δείτε ένα πεδίο ID με μια τιμή όπως html1:

The ID Field

Change this to fastcomments and hit enter: Αλλάξτε αυτό σε fastcomments και πατήστε enter:

Set the 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: Στο κάτω μέρος της οθόνης θα πρέπει να δείτε έναν επεξεργαστή κώδικα όπως αυτός:

Open The Editor

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

Add The Navigation Code

Τώρα μπορούμε να πάρουμε μια ανάσα και να προεπισκόπησουμε τον ιστότοπό μας. Θα πρέπει να δείτε μια περιοχή σχολίων που αλλάζει ανάλογα με τη σελίδα. Συγχαρητήρια!

Αν αντιμετωπίσετε οποιοδήποτε πρόβλημα, ενημερώστε μας στο πλαίσιο σχολίων παρακάτω.

Το FastComments έχει σχεδιαστεί για να προσαρμόζεται ώστε να ταιριάζει στον ιστότοπό σας.

Αν θέλετε να προσθέσετε προσαρμοσμένο στυλ ή να τροποποιήσετε τη διαμόρφωση, Δείτε την τεκμηρίωση προσαρμογών μας για να μάθετε πώς.