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, которая сделает 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...