Поскольку я недавно заменил Disqus на Commento, я подумал, что было бы неплохо рассказать, как встроить другую систему комментариев - в нашем случае Commento - на ваш сайт Gatsby (или приложение React в целом).

Компонент с нулевой зависимостью

У Disqus есть официальный пакет для встраивания его в приложения React, который я использовал для добавления Disqus в свой блог. В случае с Commento я хотел избавиться от дополнительной зависимости; дополнительные зависимости увеличивают объем обслуживания и всегда сопряжены с определенным риском. Дело не в том, что полагаться на открытый исходный код - плохая идея - просто иногда добавление пакета для мелочей - это просто чрезмерное преувеличение и не стоит своих денег.

Итак, я сам реализовал очень небольшой компонент, который отвечает за встраивание комментария с менее чем 40 строками кода.

Поскольку большинство систем комментирования работают одинаково (путем встраивания простого файла JavaScript на вашу страницу), этот подход должен работать и для других систем, таких как Isso, Schnack, Remark42 и т. д. (с небольшими изменениями). .

Это функциональный компонент, который использует ловушку для встраивания комментария на нужные страницы. Кроме того, он использует две вспомогательные функции (заимствованные из disqus-react) для добавления и удаления скриптов с нашей страницы.

Вся реализация довольно проста:

import React, {useEffect} from 'react';
// Helper to add scripts to our page
const insertScript = (src, id, parentElement) => {
  const script = window.document.createElement('script');
  script.async = true;
  script.src   = src;
  script.id    = id;
  parentElement.appendChild(script);
return script;
};
// Helper to remove scripts from our page
const removeScript = (id, parentElement) => {
  const script = window.document.getElementById(id);
  if (script) {
    parentElement.removeChild(script);
  }
};
// The actual component
const Commento = ({id}) => {
  useEffect(() => {
    // If there's no window there's nothing to do for us
    if (! window) {
      return;
    }
    const document = window.document;
    // In case our #commento container exists we can add our commento script
    if (document.getElementById('commento')) {
      insertScript(`<your commento url>/js/commento.js`, `commento-script`, document.body);
    }
// Cleanup; remove the script from the page
    return () => removeScript(`commento-script`, document.body);
  }, [id]);
return <div id={`commento`} />
};
export default Commento;

Не забудьте заменить <your commento url> правильным URL.

Сценарий Commento добавляется на нашу страницу, как только будет найден связанный контейнер (идентификатор которого равен commento), и повторно отображается, как только свойство id (которое должно быть идентификатором публикации или страницы) изменяется (см. Оптимизация производительности с помощью пропуск эффектов для получения дополнительной информации).

Теперь мы можем добавлять комментарии ко всем страницам, просто добавляя компонент <Commento id={uniquePostId} /> туда, где мы хотим разместить комментарии.

Если вам понравился этот пост, не стесняйтесь оставлять 👏, подписывайтесь на меня в Twitter и подписывайтесь на мой информационный бюллетень. Этот пост был первоначально опубликован в моем блоге 2 сентября 2019 г.