Mon Oct 26 2020
...

Використання 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 - це може бути будь-яке значення, оскільки воно представляє поточну сторінку. Якщо у вас є ідентифікатор поста, статті чи сторінки, ви можете використовувати його замість URL сторінки для цього значення. Причина, чому URL ID окремий, полягає в тому, що ви можете захотіти зберігати додаткову інформацію в 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() });

Ви можете побачити працюючий приклад в цьому фідлі.

Зверніть увагу, що в цьому прикладі ми використовуємо document.getElementById, але ви можете використати будь-який механізм, який вам подобається, щоб знайти цільовий елемент.

Підводячи підсумки

Хоча оновлення тільки "urlId" спрацює, вам слід оновити як "urlId", так і "url", навіть якщо вони однакові, щоб посилання з електронних листів сповіщень і інструментів модерації працювали. Оновлення тільки "url" не спрацює - коментарі прив'язані до "urlId".

На закінчення

Сподіваємося, що цей посібник виявився корисним. Не соромтеся коментувати нижче з будь-якими запитаннями.

На все добре!

Mon Oct 26 2020...