码匠笔记

用心雕琢

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 博客搜索优化

作者

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

评论