Mon Oct 26 2020
...

Използване на FastComments в VanillaJS приложения с една страница

! Тази статия съдържа технически термини

Целева аудитория

Тази статия е насочена към разработчици.

Въведение

Повечето примери за използване на FastComments VanillaJS уиджета са много прост кодов фрагмент, който зарежда нишката с коментари за текущия URL на страницата. Това е така, защото това е случая за голямото мнозинство от нашите клиенти, но напоследък сме свидетели на наплив от разработчици, които изграждат SPAs и използват 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...