Mon Oct 26 2020
...

Korištenje FastComments u VanillaJS Jednostranim Aplikacijama

! Ovaj Članak Sadrži Tehničku Terminologiju

Ciljana Publika

Ovaj članak je namijenjen programerima.

Uvod

Većina primjera korištenja FastComments VanillaJS widgeta je vrlo jednostavan isječak koda koji učitava komentarni niz za trenutnu URL stranicu. To je zbog toga što je to slučaj za veliku većinu naših korisnika, no nedavno smo primijetili porast programera koji razvijaju SPAs i koriste FastComments.

Prvo, imajte na umu da FastComments ima namjenske React i Vue komponente, pa ih provjerite ako koristite te biblioteke kako ne biste morali izraditi vlastiti omotač oko FastComments.

Ako razvijate svoju aplikaciju koristeći VanillaJS, međutim, možete dinamički instancirati i ažurirati widget za komentare.

Prvo, URL i URL ID

FastComments ima dva identifikatora za stranicu ili članak s kojim je vezan komentarni niz. U konfiguracijskom objektu, to su svojstva "url" i "urlId".

URL je URL do widgeta za komentare. Idealno, trebali biste moći posjetiti ovaj URL izvana iz svoje aplikacije. Bit će izložen kao link u obavijesnim e-mailovima i u alatima za administratore.

URL ID je niz koji je ili URL ili ID - može biti bilo koja vrijednost sve dok predstavlja trenutnu stranicu. Ako imate ID objave, članka ili stranice, možete koristiti to umjesto URL-a stranice za ovu vrijednost. Razlog zašto je URL ID odvojen je taj da možda želite pohraniti dodatne informacije u URL koje bi učinile URL nejedinstvenim za stranicu.

Napominjemo da smo dokumentirali kompletnu konfiguraciju koju widget podržava u TypeScript na GitHubu.

Specifikacije i Stvarna Demo

Kada je widget instanciran, zabilježite rezultat iz funkcije FastCommentsUI koju biste normalno pozvali:

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

Nakon toga, možete pozvati "update" metodu na objektu instance kako biste ažurirali konfiguraciju. To će osvježiti komponentu:

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

Možete vidjeti radni primjer s ovom fiddle.

Napominjemo da u ovom primjeru koristimo document.getElementById, ali možete koristiti bilo koji mehanizam koji želite za dohvaćanje ciljanog elementa.

Zamke

Iako samo ažuriranje "urlId" će funkcionirati, trebali biste ažurirati i "urlId" i "url" čak i ako su isti kako bi linkovi iz obavijesnih e-mailova i alati za moderiranje radili. Samo ažuriranje "url" neće raditi - komentari su vezani za "urlId".

Na Zaključak

Nadamo se da ste pronašli ovaj vodič korisnim. Slobodno komentirajte u nastavku s bilo kakvim pitanjima.

Živjeli!

Mon Oct 26 2020...