【第三方评论】构建基于码云的第三方评论体系

2018-05-12 技术笔记

2020-01-06 更新：不再使用这种方式接入评论，采用自建服务的方式进行。

我这个博客有一个缺点就是不支持评论，主题本身并不支持第三方评论。对于博客来说，少了评论就少了很多乐趣。于是在网上搜索相关内容，一篇文章吸引了我，主要内容是通过 github issue 进行评论的存储，而且好处显而易见，评论的人群首先集中于开发人员，另外就是非侵入式并不需要本地的后台支持。

当然已经有人使用github实现了一个版本的第三方评论体系，我觉得非常不错。但是唯一的问题就是github访问速度，有时候某些网段访问还是比较慢，登陆都比较费劲，我还是想寻求一些替代品。最终我决定使用自己使用了很长时间码云平台代替github实现第三方评论体系。说干就干，下面是具体方法：

实现步骤

申请第三方登陆需要的id和secret

通过码云登陆后 -> 设置 -> 数据管理 -> 第三方应用 -> 创建应用 -> 选择 user_info 和 notes 权限即可 -> 最终得到 Client ID 和 Client Secret

设置图片

注意：测试的时候，可以使用本地的回掉地址。我在应用回掉地址中就填写的 http://127.0.0.1:8080，在使用的时候回掉地址必须是这个被填写的回掉地址。（虽然在gitee中有回掉地址参数，但是并没有什么作用，仅仅是验证是不是同样的回掉地址而已）

在配置文件中引入需要的内容

在hexo工程的 _config.yml 配置文件中，引入配置脚本，除了申请第三方应用之外，还需要创建一个仓库，用于存储评论的内容。

comments: 
  clientId: <your client id>
  clientSecret: <your client secret>
  user: <your user id>
  repo: <you repo id>

在模板配置中添加相应的参数

配置都在外部开启了，仅仅需要在模板中开启评论功能就行了。

1 2	comments: enable: true

增加js全局变量

可以在引用js的时候加入变量，而我是使用js全局变量的形式引用的。类似这样：

  // 模板是否开启评论
  var COMMENTS_ENABLE = <%- theme.comments.enable %>; 

  // 引入参数
  var COMMENTS_CLIENT_ID = "<%- config.comments.clientId %>"; 
  var COMMENTS_CLIENT_SECRET = "<%- config.comments.clientSecret %>";
  var COMMENTS_USER = "<%- config.comments.user %>";
  var COMMENTS_REPO = "<%- config.comments.repo %>";

  // 文章是否开启评论
  var POST_ISSUE = POST_ISSUE || false;

引入js文件

我自己封装了相关内容，可以直接引用或者是参考，中间的链接是使用nginx代理的。配置如下：

location /gitee/ {
    proxy_pass http://gitee.com/;
    proxy_set_header Host 'git.oschina.net';
    proxy_set_header X-Real-IP $remote\_addr;
    proxy\_set\_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header User-Agent 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36';
    client_max_body_size 1024m;
    client_body_buffer_size 1024m;
    proxy_connect_timeout 30;
    proxy_send_timeout 30;
    proxy_read_timeout 60;
    proxy_buffer_size 256k;
    proxy_buffers 4 512k;
    proxy_busy_buffers_size 512k;
}

js引用地址：<script src="http://www.zhoyq.com/js/comments.js"></script> 。目前仅实现了基础功能：登陆、评论、退出。（当然这个只是一个针对本站的实现，如果你想使用，我建议你基于这个文件修改一下）

在页面确定的位置上增加评论内容

也就是在页面上文章需要评论的位置，增加一层div。当然样式什么的就只能自己完成了。或者参考本站。

<% if ( post.issue && theme.comments.enable){ %>
    <section id="comments">
        <div id="gitee_comments"></div>
    </section>
<% } %>

修改js配置参数

// 在文章页面增加参数
var POST_ISSUE = "<%- post.issue %>";
// 在全局增加初始化
if(POST_ISSUE && COMMENTS_ENABLE){
    L.init(COMMENTS_CLIENT_ID,COMMENTS_CLIENT_SECRET,COMMENTS_USER,COMMENTS_REPO,POST_ISSUE,"gitee_comments");
}

使用

在写文章的时候直接增加相应配置 issue 即可，需要自己在repo中增加对应issue。

也许会在将来增加相关内容：回复评论功能、删除评论功能、修改评论功能、时间显示优化、评论增加多媒体内容、可以使用md评论等。

衷于栖