Поскольку я недавно заменил 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 г.