Mon Oct 26 2020
...

Использование FastComments в одностраничных приложениях VanillaJS

! Эта статья содержит техническую терминологию

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

Эта статья предназначена для разработчиков.

Введение

Большинство примеров использования виджета FastComments VanillaJS — это очень простой код, который загружает поток комментариев для текущего URL страницы. Это связано с тем, что это типичный случай для подавляющего большинства наших клиентов, но в последнее время мы наблюдаем наплыв разработчиков, создающих SPA и использующих FastComments.

Во-первых, имейте в виду, что у FastComments есть выделенные React и Vue компоненты, так что ознакомьтесь с ними, если вы используете эти библиотеки, чтобы вам не пришлось создавать собственный обертку вокруг FastComments.

Однако, если вы разрабатываете свое приложение с использованием VanillaJS, вы можете динамически создавать и обновлять виджет комментариев.

Во-первых, URL и ID URL

FastComments имеет два идентификатора для страницы или статьи, к которой привязан поток комментариев. В объекте конфигурации они представляют собой свойства "url" и "urlId".

URL — это URL для виджета комментариев. Идеально, если вы сможете посетить этот URL извне вашего приложения. Он будет представлен как ссылка в уведомлениях по электронной почте и в инструментах администратора.

ID URL — это строка, которая может быть либо URL, либо ID — это может быть любое значение, если оно представляет текущую страницу. Если у вас есть идентификатор поста, статьи или страницы, вы можете использовать его вместо URL страницы для этого значения. Причина, по которой ID URL отделен, заключается в том, что вы можете захотеть хранить дополнительную информацию в 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...