Almost Over

Гиперкомментарии для темы Next в Hexo

Гиперкомментарии для темы Next в Hexo

Не достаточно комментариев только в Facebook? Не устраивает функционал Disqus-комментариев? Хочется сделать комментирование анонимным или, хотя-бы, с возможностью логина через ВК? Всё это умеют гиперкомментарии, и ещё кое-что…

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

  1. Невозможность комментировать анонимно.
  2. Невозможность логина через VK.
  3. Ссылки с принудительным dofollow, что не совсем хорошо сказывается на SEO.

И вот, после долгого поиска наилучшей платформы для комментирования статей в Hexo, я всё-таки остановился на «Hypercomments».

Возможности Hypercomments

  • Анонимные комментарии.
  • Инлайн-комментарии (они же — гиперкомментарии). Можно выделить любой текст и прокомментировать непосредственно его. И справа от текста будет высвечен индикатор с кол-вом комментариев непосредственно этого текста.
  • Плагин Like: можно выделить любой текст и поделиться заголовком этого текста с ссылкой на статью в соц-сетях (Facebook, Twitter, VK).
  • Цитирование копированного текста. Если пользователь копирует текст и вставляет его куда-то, то к тексту прилагается ссылка на источник + эта цитата будет отображаться в дополнительной вкладке блока комментариев этого поста.
  • Стереокомментарии. В стереокомментариях две колонки — в левой публикуются комментарии автора, в правой — комментарии пользователей.
  • Категории. Категории помогут пользователю выделить свой комментарий в соответствующий раздел например ‘Замечания’, ‘Отзывы’, ‘Пожелания’ и т.д.
  • Поддержка emoji. relieved
  • Real-time онлайн посетителей, читающих тему.
  • Real-time модерирование.

Стоимость Hypercomments

Если у Вас 1 небольшой сайт, то вполне хватит бесплатной Lite-версии:

  • 1 сайт.
  • 1 модератор.
  • 100 тыс. загрузок виджета в месяц.
  • 1000 запросов к API в час.

Самыё важный здесь пункт — 100 тыс. загрузок виджета в месяц. Давайте немного посчитаем:

  1. В месяце 30 дней.
  2. Предположим, что в сутки общее кол-во посетителей на весь сайт — 1.000; а просмотров — 3.000.
  3. Значит, что в месяц у вас будет использовано 90.000 загрузок виджета, при ограничении в 100.000.

За 24$ в год ограничение на загрузки и запросы увеличивается в 5 раз:

  • 1 сайт.
  • 3 модератора.
  • 500 тыс. загрузок виджета в месяц.
  • 5000 запросов к API в час.

Весь прейскурант цен можно посмотреть здесь.

Установка Hypercomments в Hexo

Основной шаблон кода был взят из дискуса и переделан под гиперкомментарии лично мною, поэтому если вдруг найдёте какие-то ошибки или недочёты, смело пишите в комментариях! simple_smile

$ nano themes/next/_config.yml
1
2
3
4
5
# Disqus
#disqus_shortname: almostover

+# Hypercomments
+hypercomments_id:
$ nano themes/next/layout/_macro/post.swig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
            {% elseif theme.disqus_shortname %}
<span class="post-comments-count">
&nbsp;|&nbsp;
<a href="{{ url_for(post.path) }}#comments" itemprop="discussionUrl">
<span class="post-comments-count disqus-comment-count" data-disqus-identifier="{{ post.path }}" itemprop="commentsCount"></span>
</a>
</span>

+ {% elseif theme.hypercomments_id %}
+ <!--noindex-->
+ <span class="post-comments-count">
+ &nbsp;|&nbsp;
+ <span class="post-meta-item-icon">
+ <i class="fa fa-comment-o"></i>
+ <a href="{{ url_for(post.path) }}#comments" itemprop="discussionUrl">
+ <span class="post-comments-count hc-comment-count" data-xid="{{ post.path }}" itemprop="commentsCount"></span>
+ </a>
+ </span>
+ </span>
+ <!--/noindex-->
$ nano themes/next/layout/_partials/comments.swig
1
2
3
4
5
6
7
8
9
    {% elseif theme.disqus_shortname %}
<div id="disqus_thread">
<noscript>
Please enable JavaScript to view the
<a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a>
</noscript>
</div>
+ {% elseif theme.hypercomments_id %}
+ <div id="hypercomments_widget"></div>
$ nano themes/next/layout/_scripts/third-party/comments.swig
1
2
3
{% include './comments/duoshuo.swig' %}
{% include './comments/disqus.swig' %}
+{% include './comments/hypercomments.swig' %}
$ nano themes/next/layout/_scripts/third-party/comments/hypercomments.swig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
+{% if not (theme.duoshuo and theme.duoshuo.shortname) and not theme.duoshuo_shortname and not theme.disqus_shortname %}

+ {% if theme.hypercomments_id %}

+ <script type="text/javascript">
+ _hcwp = window._hcwp || [];

+ _hcwp.push({widget:"Bloggerstream", widget_id: {{ theme.hypercomments_id }}, selector:".hc-comment-count", label: "{\%COUNT%\}" });

+ {% if page.comments %}
+ _hcwp.push({widget:"Stream", widget_id: {{ theme.hypercomments_id }}, xid: "{{ page.path }}"});
+ {% endif %}

+ (function() {
+ if("HC_LOAD_INIT" in window)return;
+ HC_LOAD_INIT = true;
+ var lang = (navigator.language || navigator.systemLanguage || navigator.userLanguage || "en").substr(0, 2).toLowerCase();
+ var hcc = document.createElement("script"); hcc.type = "text/javascript"; hcc.async = true;
+ hcc.src = ("https:" == document.location.protocol ? "https" : "http")+"://w.hypercomments.com/widget/hc/{{ theme.hypercomments_id }}/"+lang+"/widget.js";
+ var s = document.getElementsByTagName("script")[0];
+ s.parentNode.insertBefore(hcc, s.nextSibling);
+ })();
+ </script>

+ {% endif %}

+{% endif %}

Настройка Hypercomments под Hexo

Заходим на сам сайт hypercomments.com, регистрируемся, добавляем сайт.

Переходим на вкладку “Структура“ и включаем плагины «Like» и «Читатели». Первый позволяет лайкать/дизлайкать статью, с возможностью поделиться ссылкой в соц-сетях; второй - отображает кол-во читающих текущую статью в режиме Real-time. Также, на этой вкладке по-усмотрению можно активировать другие не менее интересные функции.

Далее, переходим на вкладку “Гиперкомментарии“. На этой вкладке можно полностью запретить гиперкомментарии (комментирование выделенного текста), или же, можно их вообще отключить.
Если Вы решили их разрешить, тогда следует настроить фильтр элементов, на которых будут и не будут работать гиперкомментарии:

  1. В поле ID/class элемента вписываем: *, .ol
  2. В поле ID/class элемента для блокировки вписываем: img, .image-caption, .post-meta, .pagination, figure, table, footer, .header-inner, .sidebar, a, code

Pull на обновление в официальную ветку темы Next был сделан, смерджили. relieved