Mon Oct 26 2020
...

Χρησιμοποιώντας το FastComments σε Εφαρμογές Μονοσέλιδης

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

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

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

Εισαγωγή

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

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

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

Πρώτον, το URL και η Ταυτότητα URL

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

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

Η Ταυτότητα URL είναι μια αλφαριθμητική συμβολοσειρά που είναι είτε ένα URL είτε μια ταυτότητα - μπορεί να είναι οποιαδήποτε τιμή αρκεί να αντιπροσωπεύει την τρέχουσα σελίδα. Εάν έχετε μια ανάρτηση, άρθρο ή ταυτότητα σελίδας, μπορείτε να χρησιμοποιήσετε αυτήν αντί για το URL της σελίδας για αυτήν την τιμή. Ο λόγος που η Ταυτότητα 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...