码匠笔记

用心雕琢

Commenthub —— 多说、网易云跟帖的替代品

访问 次

前言

“多说”和“网易云跟帖”相继不维护了，每一次给大家带来了希望又带来了失望，于是 Commenthub 出现了。Commenthub 是作者使用免费的服务 Heroku 和 Github Issues 结合起来做的一套开源的评论系统。其灵感源于 Gitment，但是 Gitment 的 Key 和 Secret 都存在浏览器端，这样对于安全也是一个问题，于是作者使用 Heroku 搭建后端服务用于处理业务和存储证书，通过 iframe 实现评论功能。

效果图

Demo

演示地址

http://commenthub.github.io/

功能介绍

Commenthub 目前只支持 Github 用户登录评论，同时也只支持 Github 用户为自己的博客添加评论功能。目前 Commenthub 支持 Markdown 语法，表情，手机和PC响应式布局。

Octopress 接入

注册 commenthub 账号

访问 Commenthub官网，点击 Sign up，使用 Github 账号登录成功以后，点击 Set up，填写博客地址。同时记住 ID，后面需要使用。

配置 config.yml

在 config.yml 里面填写 commenthub_id，其内容就是上面说的ID，用于标记作者是谁。

1

commenthub_id: 3821949

配置显示位置

在 _layouts/post.html 的 article 标签下面添加如下代码，用来告诉 Commenthub，在什么地方显示评论功能。

1
2
3
4
5
6

{% if site.commenthub_id and page.comments == true %}
  <section>
    <h1>评论</h1>
    <div id="commenthub_thread" aria-live="polite"></div>
  </section>
{% endif %}

创建 commenthub.html

创建 includes/commenthub.html，填入如下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

{% comment %} Load script if commenthub comments are enabled and `page.comments` is either empty (index) or set to true {% endcomment %}
{% if site.commenthub_id and page.comments != false %}
<script type="text/javascript">
    var commenthub_id = '{{ site.commenthub_id }}';
    var commenthub_website = '{{ site.url }}';
    var commenthub_identifier = '{{ page.url }}';
    var commenthub_url = '{{ site.url }}{{ page.url }}';
    var commenthub_title = '{{ page.title }}';
    (function () {
        var dsq = document.createElement('script');
        dsq.type = 'text/javascript';
        dsq.async = true;
        dsq.src = 'https://commenthub.herokuapp.com/js/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    }());
</script>
{% endif %}

引入 commenthub.html

在 includes/after_foot.html 里面添加一行如下内容，用于引入 commenthub.html 文件

1

{% include commenthub.html %}

完成

这样 Octopress 的配置就结束了，如果配置中遇到问题，可以在当前博客中评论留言，或者到 Github Issue 中留言。

Hexo 接入

Hexo 使用的是比较热门的主题 Next。

注册 commenthub 账号

同上

配置 config.yml

配置 themes/next/_config.yml 文件，在里面的 Disqus 后面配置如下内容

1
2
3
4

commenthub:
  enable: true
  id: your_id
  site: your_website_url

配置显示位置

在themes/next/layout/_partials/comments.swig里面添加一行代码，记得注意看elseif的位置

1
2
3
4

  {% elseif theme.commenthub.enable %}
    <div class="comments" id="comments">
      <div id="commenthub_thread"></div>
    </div>

创建 commenthub.swig

创建新文件themes/next/layout/_third-party/comments/commenthub.swig并贴入如下代码，如下代码主要是用于加载和生成评论的逻辑。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

{% if not (theme.duoshuo and theme.duoshuo.shortname) and not theme.duoshuo_shortname %}
  {% if theme.commenthub.enable %}
      <script type="text/javascript">
        var commenthub_id = '{{ theme.commenthub.id }}';
        var commenthub_website = '{{ theme.commenthub.site }}';
        var commenthub_identifier = '{{ page.path }}';
        var commenthub_url = '{{ page.permalink }}';
        var commenthub_title = '{{ page.title| addslashes }}';
        var dsq = document.createElement('script');
            dsq.type = 'text/javascript';
            dsq.async = true;
            dsq.src = 'https://commenthub.herokuapp.com/js/embed.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
      </script>
  {% endif %}
{% endif %}

引入 commenthub.swig

在themes/next/layout/_third-party/comments/index.swig文件添加如下代码：

1

{% include 'commenthub.swig' %}

完成

这样 Hexo 的配置就结束了，如果配置中遇到问题，可以在当前博客中评论留言，或者到 Github Issue 中留言。

建议与反馈

如果在使用过程中有任何问题欢迎建议和反馈到 Commenthub。

扩展阅读

  1. Heroku 教程：MySQL 中文乱码
  2. Heroku 教程：自定义域名配置 HTTPS
  3. 如何使用 Heroku 搭建免费的微信小程序服务
  4. Heroku 教程：绑定自定义域名
  5. Heroku 教程：使用 Heroku 快速搭建站点
  6. 修复 Octopress Table 样式
  7. 给博客添加目录
  8. Octopress 添加 扩展相关阅读
  9. Octopress 添加标签云
  10. Octopress 首页添加‘更多’功能
  11. Octopress 博客搜索优化
  12. notepad.cc 替代品——在线 Markdown 笔记
  13. Chrome自动生成网页目录插件的编写和使用

作者

本文作者麻酱，欢迎讨论，指正和转载，转载请注明出处。
原文地址：Commenthub —— 多说、网易云跟帖的替代品
如果兴趣可以关注作者微信订阅号:码匠笔记
majiangbiji

评论