Jekyll 3: Комментарии

Для комментирования используются сторонние сервисы.

Первое, что я попробовал был сервис Staticman. Этот сервис делает каждый комментарий отдельным merge request-ом в репозиторий сайта. Подключить его не получилось, так как на текущий момент сервис очень загружен и автивировать сервис для сайта не удалось. Есть вариант установить сервис на свой сервер (self-hosted вариант), только какой смысл иметь статический сайт и хостить к нему динамические компоненты?

Самый популярный сервис комментирования - Disqus. Все комментарии хранятся на сервисе и доступны в рамках сообществ. При подключении к сайту можно отображать все комментарии вперемешку, либо к коментариям каждой статьи передавать уникальный ключ и отображать к каждой статье свои комментарии. Из минусов данного сервиса:

  • сервис собирает данные пользователей,
  • увеличивается размер загружаемых страниц из-за подключаемых скриптов
  • это создает дополнительную нагрузку на браузер и интернет-канал пользователя.

Но сервис работает стабильно, что в некотором смысле компенсирует неудобства.

Установка

После регистрации в сервисе нужно подключить новый сайт. Сервис выделит новый поддомен, вида subdomain.disqus.com.

Далее, в шаблон статьи добавляем снипет:

<div id="disqus_thread"></div>
<script>
  var disqus_shortname = 'subdomain';
  var disqus_config = function () {
    this.page.url = "http://coderknows.com/2019/06/04/jekyll-3-part-2/";
    this.page.identifier = "/2019/06/04/jekyll-3-part-2";
  };

  (function() {  // DON'T EDIT BELOW THIS LINE
    var d = document, s = d.createElement('script');

    s.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
  })();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>

И теперь, в конце каждой статьи будет отображаться блок с комментариями.

Дополнительные настройки

Отображение комментариев

В разделе front matter шаблона статьи задаем переменную:

comments: false

и оборачиваем сниппет подключения комментариев в блок с условием:

...
\{\% if page.comments != false \%\}
  ...
\{\% endif \%\}
...

Если переменная comments равна false - блок с комментариями подключаться не будет.

Счетчик комментариев

В шаблоне со списком статей можно отображать количество комментариев. Для этого добавляем для каждой статьи ссылку вида:

<a href="#disqus_thread" class="disqus-comment-count" data-disqus-identifier=""></a>
  • #disqus_thread - это якорь, который перекинет пользователя скару в конец статьи к блоку комментариев.
  • class="disqus-comment-count" - по этому классу подключаемый js-скрипт заменяет содержимое тега на текст вида 99 Comments
  • data-disqus-identifier="" - уникальный идентификатор, который позволяет отделить комментарии для выделенной статьи от всех комментариев. Этот параметр задается в сниппете подключения сервиса.

и подключаем скрипт:

<script id="dsq-count-scr" src="//subdomain.disqus.com/count.js" async></script>

NB! Всё это в шаблоне со списком статей.

Можно использовать переменную post.comments, чтобы подключать скрипт или отображать счетчик для статей с включенными комментариями.

Полезные ссылки:

  1. Официальная документация (en)
  2. Add commenting to your posts and other pages using Disqus (en)
Jekyll статический сайт CMS Disqus
Евгений Вдовенко
Евгений Вдовенко

Физик по образованию, занимаюсь веб-разработкой на PHP с 2013 года. Нравится ковырятся в Zend Framework/Expressive и Joomla CMS/Framework. В процессе разборок с Python. Подумываю посмотреть Go. Считаю PostgreSQL крутым продуктом и внедряю его везде, где могу.

eugene@vdovenko.xyz
eugene.vdovenko.xyz