Существует довольно много вариантов добавить систему комментариев на статичный сайт. Погуглив нашел несколько:

  • Disqus - наверное самая известная и распространенная платформа. Discus я отмел, т.к. не планирую покупать подписку и не хочу заставлять читателей смотреть рекламу.
  • Remark42 - opensource платформа для самохостинга. Много возможностей и функций, импорт из Wordpress и Disqus. Возможно это лучший выбор если вы не против администрировать ещё +1 систему, но для моего мини-блога это излишество.
  • Utterances - простой виджет, добавляет комментарии используя issues GitHub-а и это мой выбор на данный момент. Из минусов: не поддерживает локализацию, пользователям для комментирования надо регистрироваться на GitHub.

Как установить

Всё очень просто, документация по виджету занимает одну страницу.

Что необходимо сделать:

  1. Создать на GitHub публичный репозиторий для вашего блога или сайта

  2. Разрешить доступ приложению utterances к issue репозитория

  3. Добавить код в нужное место на странице сайта:

    <script src="https://utteranc.es/client.js"
        repo="[ENTER REPO HERE]"
        issue-term="title"
        label="comment"
        theme="github-light"
        crossorigin="anonymous"
        async>
</script>
    • repo - имя репозитория в формате <ваш логин>/<имя репозитория>
    • issue-term - способ маппинга страниц сайта и issue. Может быть:
      • pathname
      • url
      • title
      • og:title
      • любая строка по которой система будет искать issue
    • issue-number - вместо issue-term можно указать номер конкретного issue
    • label - необязательный параметр, позволяет устанавливать метки создаваемым issue. Метка должна существовать в вашем проекте.
    • theme - тема виджета. Может быть:
      • github-light
      • github-dark
      • referred-color-scheme
      • github-dark-orange
      • icy-dark
      • dark-blue
      • photon-dark
      • boxy-light
      • gruvbox-dark

Если нужного issue еще нет - бот utterances автоматически его создаст при добавлении первого комментария.

Комментарии в блоге Hugo & PaperTheme

В config.yml включаем комментарии:

[params]
    ...
    comments: true
    ...

Создаем файл layouts/partials/comments.html:

<script src="https://utteranc.es/client.js"
        repo="[ENTER REPO HERE]"
        issue-term="title"
        theme="github-light"
        crossorigin="anonymous"
        async>
</script>

Автоматическое переключение темы виджета

В моем блоге тема PaperMod поддерживает переключение между темным и светлым режимом. Можете понажимать иконку луны и солнца в заголовке блога если еще не делали этого. Хотелось бы сделать и переключение темы виджета чтобы он лучше вписывался в общий вид.

Меняем layouts/partials/comments.html на следующий код:

<div class="comments"></div>
<script>
    // функция вставляет в div.comments элемент script 
    // с нужными атрибутами и указанной темой
    function addComments(theme){
        let s = document.createElement('script');
        s.src = 'https://utteranc.es/client.js';
        s.setAttribute('id', 'comments-script');
        s.setAttribute('repo', 'coyotle/minimal-blog');
        s.setAttribute('issue-term', 'title');
        s.setAttribute('theme', theme);
        s.setAttribute('label', 'comment');
        s.setAttribute('crossorigin', 'anonymous');
        s.setAttribute('async', '');
        document.querySelector('div.comments').innerHTML = '';
        document.querySelector('div.comments').appendChild(s);
    }

    // добавляем слушателя событий click для элемента переключения 
    // режима theme-toggle и пересоздаем виджет с нужной темой
    document.getElementById("theme-toggle").addEventListener("click", () => {
        if (document.body.className.includes("dark")) {
            addComments('github-light');
        } else {
            addComments('github-dark');
        }
    })

    // определяем текущий режим и добавляем виджет при первой загрузке страницы
    let theme = document.body.className.includes("dark") ? 'github-dark' : 'github-light';
    addComments(theme);
</script>