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 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: Επικόλληση και Αποθήκευση

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

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

Next we will position and size this to fit our page.

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

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

Με αυτό το σεμινάριο θα μπορούμε να αλλάζουμε το τρέχον νήμα ανάλογα με την ενεργή σελίδα. Ωστόσο, δεν θα μπορούμε να αλλάξουμε το μέγεθος του widget σχολίων δυναμικά μέχρι η Wix να ανοίξει αυτή τη λειτουργικότητα. Μέχρι τότε, θα πρέπει να αποφασίσετε πόσο μεγάλο θέλετε να είναι το πεδίο σχολιασμού στη σελίδα σας και να το προσαρμόσετε ανάλογα.

Next, ας ρυθμίσουμε τα πράγματα ώστε το νήμα σχολίων να αλλάζει ανάλογα με την τρέχουσα σελίδα, επιτρέποντας στους χρήστες να συζητούν το περιεχόμενο που εμφανίζεται αυτή τη στιγμή.

Χωρίς τα παρακάτω βήματα, θα έχετε μόνο ένα παγκόσμιο νήμα σχολίων για ολόκληρο τον ιστότοπό σας - κάτι που δεν είναι ιδιαίτερα χρήσιμο.

Λειτουργία Dev

Για να προσθέσουμε αυτή τη λειτουργικότητα, θα πρέπει να μπούμε σε αυτό που το Wix ονομάζει Dev Mode.

Κάντε κλικ στην επιλογή Dev Mode στο πάνω μέρος της οθόνης.

Ενεργοποίηση Dev Mode

Ορισμός του ID του στοιχείου

Θα προσθέσουμε προσαρμοσμένο κώδικα για να το επιτύχουμε αυτό, αλλά πρώτα πρέπει να δώσουμε στο νέο στοιχείο embed ένα ID για να αναφερόμαστε σε αυτό.

Ας το ονομάσουμε fastcomments.

Κάντε κλικ στο νέο στοιχείο embed που προσθέσαμε, και σε Dev Mode, κάτω δεξιά, θα πρέπει να δείτε ένα πεδίο 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 έχει σχεδιαστεί για να προσαρμόζεται ώστε να ταιριάζει στον ιστότοπό σας.

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