为站点主题添加评论模块 — Disqus, 多说, 友言

术业专攻

前言

目前自己的主题 Guozhi 已支持使用 Disqus, 多说和友言评论，代码逻辑和配置也做了些优化，应该是比较完善了。简单分离整理一下，分享于此，方便大家添加到自己制作或使用的主题中。

文件结构

参考以下文件结构把复制的代码和下载的文件放到合适的位置，必要时自行修改文件引用位置。

1
2
3
4
5
yelee/_config.yml
-----/layout/_partial/article.ejs
---------------------/comments/disqus.ejs
------------------------------/duoshuo.ejs
------------------------------/youyan.ejs

关联模块

在合适位置添加以下代码，以便引入评论模块代码。代码使用我比较熟悉的 EJS 书写，使用 Swig, Jade 等其他模板的，请自行转换。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<% if (!is_home() && post.comments){ %>
    <% if (theme.duoshuo.on) { %>
      <%- partial('comments/duoshuo', {
          key: post.path,
          title: post.title,
          url: config.url+url_for(post.path),
          }) %>
    <% } else if (theme.youyan.on) { %>
        <%- partial('comments/youyan') %>
    <% } else if (theme.disqus.on) { %>
        <%- partial('comments/disqus', {
            shortname: theme.disqus.shortname
          }) %>
    <% } else if (config.disqus_shortname) { %>
        <%- partial('comments/disqus', {
            shortname: config.disqus_shortname
          }) %>
    <% } %>
<% } %>

代码简析

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
<!--//如果不是首页且没使用 `comments: false` 关闭评论，则尝试加载评论 -->
<% if (!is_home() && post.comments){ %>
    <!--//配置中启用多说时，导入相应代码 -->
    <% if (theme.duoshuo.on) { %> 
      <!--//导入duoshuo.ejs时，同时指定其中几个变量的内容。 -->
      <%- partial('comments/duoshuo', {
          key: post.path,
          title: post.title,
          url: config.url+url_for(post.path),
          }) %>
    <!--//配置中仅启用友言时，导入相应代码 -->
    <% } else if (theme.youyan.on) { %>
        <%- partial('comments/youyan') %>
    <!--//配置中仅启用 Disqus 时，导入相应代码 -->
    <% } else if (theme.disqus.on) { %>
        <%- partial('comments/disqus', {
            shortname: theme.disqus.shortname
          }) %>
    <!--//以上皆关闭且 Hexo 配置中设置了 disqus_shortname 时，导入相应代码 -->
    <% } else if (config.disqus_shortname) { %>
        <!--//文件分离和变量的使用，使代码能较好的兼容 Hexo 主配置 -->
        <%- partial('comments/disqus', {
            shortname: config.disqus_shortname
          }) %>
    <% } %>
<% } %>

新评论系统添加

  • 如果你想使用畅言或者其他社会化评论系统，并能灵活切换，请参考上文，新加一个 else if 判断引入服务商提供的代码，同时参考后文的配置添加新的设置项。

配置更新

在主题中添加以下设置项进行评论功能的配置。评论设置为二级选项，因为之前不少人设置了 duoshuo: true ，结果都进群聊了。要启用某一个评论系统，只需去掉 on 前的 “#”，同时按照说明设置好对应个人账号信息即可。

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
# >>> Conments 评论系统 <<<
# Chose ONE as your comment system and keep others disable.
# 选一个作为网站评论系统，其他保持禁用。
disqus: 
  #on: true
  shortname: 
  # https://help.disqus.com/customer/en/portal/articles/466208-what-s-a-shortname-
  # It is unnecessary to enable disqus here if 
  # you have set "disqus_shortname" in your site's "_config.yml" 
duoshuo: 
  #on: true
  domain: 
  # 是否开启多说评论，http://duoshuo.com/create-site/
  # 使用上面网址登陆你的多说，然后创建站点，在 domain 中填入你设定的域名前半部分
  # http://<要填的部分>.duoshuo.com (domain只填上<>里的内容，不要填整个网址)
youyan:
  #on: true
  id: 
  # 是否开启友言评论，http://www.uyan.cc/index.php
  # id 中填写你的友言用户数字ID，注册后进入后台管理即可查看
  # 友言服务在 Web 环境下运行，普通本地环境无法查看，请部署后在线上测试。
# >>> <<<

模块代码

模块代码已附在下载文件中，在此同时列出备用。依旧是使用 EJS 编写，引入一些信息，设置了几个变量，使用其他模板引擎请自行转换。所有评论模块都设置了 id="comments"，以便有需要时通过锚点定位跳转到评论区。

Disqus

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<section id="comments">
  <div id="disqus_thread"></div>
    <script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = '<%= shortname%>'; // required: replace example with your forum shortname
    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
      var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
      dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
  </script>
  <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</section>

多说评论

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="duoshuo" id="comments">
    <!-- 多说评论框 start -->
    <div class="ds-thread" data-thread-key="<%= key%>" data-title="<%= title%>" data-url="<%= url%>"></div>
    <!-- 多说评论框 end -->
    <!-- 多说公共JS代码 start (一个网页只需插入一次) -->
    <script type="text/javascript">
    var duoshuoQuery = {short_name:"<%= theme.duoshuo.domain%>"};
    (function() {
        var ds = document.createElement('script');
        ds.type = 'text/javascript';ds.async = true;
        ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
        ds.charset = 'UTF-8';
        (document.getElementsByTagName('head')[0] 
         || document.getElementsByTagName('body')[0]).appendChild(ds);
    })();
    </script>
    <!-- 多说公共JS代码 end -->
</div>

友言评论

1
2
3
4
<section class="youyan" id="comments">
    <div id="uyan_frame"></div>
    <script src="http://v2.uyan.cc/code/uyan.js?uid=<%= theme.youyan.id%>"></script>
</section>

相关链接

  1. 多说评论: http://duoshuo.com/
  2. 友言评论: http://www.uyan.cc/
  3. Disqus: https://disqus.com/
  4. refactor: comments code & configuration 评论模块优化 by MOxFIVE on 2016/01/01: https://github.com/MOxFIVE/hexo-theme-yelee/commit/3138ca36bd209fd9f79b60fbb6b15b44673560b5
文章目录
  1. 1. 前言
  2. 2. 文件结构
  3. 3. 关联模块
    1. 3.1. 代码简析
    2. 3.2. 新评论系统添加
  4. 4. 配置更新
  5. 5. 模块代码
    1. 5.1. Disqus
    2. 5.2. 多说评论
    3. 5.3. 友言评论
  6. 6. 相关链接