Коришћење FastComments у VanillaJS једностраничним апликацијама

! Овај чланак садржи технички жаргон

Циљна публика

Овај чланак је намењен програмерима.

Увод

Већина примерних употреба FastComments VanillaJS виџета је врло једноставан код који учитава нит коментара за URL тренутне странице. Ово је зато што је то случај употребе за огромну већину наших корисника, али у последње време смо видели прилив програмера који граде SPA‑ове и користе FastComments.

Прво, имајте у виду да FastComments има посвећене React и Vue компоненте, па их проверите ако користите те библиотеке како не бисте морали да градите сопствени омотач око FastComments.

Ако, међутим, градите апликацију користећи VanillaJS, можете динамички инстанцирати и ажурирати виџет за коментаре.

Прво, URL и URL ID

FastComments има два идентификатора за страницу или чланак на који је везана нит коментара. У објекту конфигурације, то су својства „url“ и „urlId“.

URL је URL до виџета за коментаре. Идеално, треба да можете посети овај URL изван ваше апликације. Он ће бити приказан као линк у имејл обавештењима и у администраторским алатима.

URL ID је ниска која може бити URL или ID – може бити било која вредност док представља тренутну страницу. Ако имате ID поста, чланка или странице, можете га користити уместо URL странице за ову вредност. Разлог што је URL ID одвојен је што можда желите да у URL-у складиштите додатне информације које би учиниле URL нејединственим за страницу.

Имајте на уму да смо документовали пуну конфигурацију коју виџет подржава у TypeScript‑у на GitHub‑у.

Детаљи и прави демонстрациони пример

Када се виџет инстанцира, ухватите резултат из функције FastCommentsUI коју обично позивате:

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

Затим, можете позвати метод „update“ на објекту инстанце да ажурирате конфигурацију. Ово ће освежити компоненту:

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“ чак и ако су исти, како би линкови из имејл обавештења и алата за модерацију радили. Само ажурирање „url“ неће радити – коментари су везани за „urlId“.

У закључку

Надамо се да вам је овај водич био користан. Слободно оставите коментар испод са било каквим питањима.

Поздрав!

Mon Oct 26 2020...