Mon Oct 26 2020
...

Χρήση του FastComments σε VanillaJS Εφαρμογές Μιας Σελίδας

! Αυτό το Άρθρο Περιέχει Τεχνική Ορολογία

Στοχευόμενο Κοινό

Αυτό το άρθρο απευθύνεται σε προγραμματιστές.

Εισαγωγή

Η πλειοψηφία των παραδειγμάτων χρήσης του FastComments VanillaJS widget είναι ένα πολύ απλό κομμάτι κώδικα που φορτώνει το νήμα σχολίων για τη διεύθυνση URL της τρέχουσας σελίδας. Αυτό συμβαίνει διότι αυτό είναι το σενάριο χρήσης για την τεράστια πλειοψηφία των πελατών μας, αλλά πρόσφατα έχουμε παρατηρήσει μια αύξηση προγραμματιστών που δημιουργούν SPAs και χρησιμοποιούν το FastComments.

Αρχικά, έχετε υπόψη ότι το FastComments έχει αφιερωμένα React και Vue συστατικά, οπότε ελέγξτε τα αν χρησιμοποιείτε αυτές τις βιβλιοθήκες ώστε να μην χρειαστεί να δημιουργήσετε το δικό σας wrapper γύρω από το FastComments.

Εάν, ωστόσο, αναπτύσσετε την εφαρμογή σας χρησιμοποιώντας VanillaJS, μπορείτε να δημιουργήσετε και να ενημερώσετε το widget σχολίων δυναμικά.

Πρώτον, η URL και το URL ID

Το FastComments έχει δύο ταυτοποιητές για τη σελίδα ή το άρθρο στο οποίο συνδέεται το νήμα σχολίων. Στο αντικείμενο ρύθμισης, είναι οι ιδιότητες "url" και "urlId".

Η URL είναι η διεύθυνση URL του widget σχολίων. Ιδανικά, θα πρέπει να μπορείτε να επισκεφθείτε αυτή τη διεύθυνση URL από έξω από την εφαρμογή σας. Θα εκτίθεται ως σύνδεσμος σε email ειδοποιήσεων και σε εργαλεία διαχειριστή.

Το URL ID είναι μια συμβολοσειρά που είναι είτε μια URL είτε ένα ID - μπορεί να είναι οποιαδήποτε τιμή αρκεί να εκπροσωπεί την τρέχουσα σελίδα. Αν έχετε ένα id ανάρτησης, άρθρου ή σελίδας, μπορείτε να χρησιμοποιήσετε αυτό αντί για τη URL της σελίδας για αυτή την τιμή. Ο λόγος που το URL ID είναι ξεχωριστό είναι ότι μπορεί να θέλετε να αποθηκεύσετε επιπλέον πληροφορίες στη URL που θα έκανε τη URL μη μοναδική για τη σελίδα.

Σημειώστε ότι έχουμε τεκμηριώσει την πλήρη ρύθμιση που υποστηρίζει το widget σε TypeScript στο GitHub.

Ειδικά και μια Πραγματική Επίδειξη

Όταν δημιουργηθεί το widget, καταγράψτε το αποτέλεσμα από τη λειτουργία FastCommentsUI που θα καλούσατε κανονικά:

const config = {tenantId: 'demo'}; const widgetInstance = window.FastCommentsUI(document.getElementById('fastcomments-widget'), config);

Στη συνέχεια, μπορείτε να καλέσετε μια μέθοδο "update" στο αντικείμενο instance για να ενημερώσετε τη ρύθμιση. Αυτό θα ανανεώσει το στοιχείο:

const config = {tenantId: 'demo'}; const widgetInstance = window.FastCommentsUI(document.getElementById('fastcomments-widget'), config); widgetInstance.update({ ...config, urlId: getUrlId(), url: getUrl() });

Μπορείτε να δείτε ένα λειτουργικό παράδειγμα με αυτό το fiddle.

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

Προβλήματα

Αν και η απλή ενημέρωση του "urlId" θα λειτουργήσει, θα πρέπει να ενημερώσετε και τα δύο "urlId" και "url" ακόμη και αν είναι τα ίδια, ώστε οι σύνδεσμοι από τα email ειδοποιήσεων και τα εργαλεία μετριασμού να λειτουργούν. Η απλή ενημέρωση του "url" δεν θα λειτουργήσει - τα σχόλια συνδέονται με το "urlId".

Στο Συμπέρασμα

Ελπίζουμε ότι βρήκατε αυτόν τον οδηγό χρήσιμο. Μη διστάσετε να σχολιάσετε παρακάτω με οποιεσδήποτε ερωτήσεις.

Ευχαριστώ!

Mon Oct 26 2020...