【服务器】微博客增加第三方评论模块

  1. 1. 实现步骤
    1. 1.1. 申请第三方登陆需要的id和secret
    2. 1.2. 在配置文件中引入需要的内容
    3. 1.3. 在模板配置中添加相应的参数
    4. 1.4. 增加js全局变量
    5. 1.5. 引入js文件
    6. 1.6. 在页面确定的位置上增加评论内容
    7. 1.7. 修改js配置参数
  2. 2. 使用
  3. 3. 评论基础功能

之前用hexo搭了一个博客(就是现在你看见的这个),但是那时候主题本身并不支持第三方评论,对于博客来说,少了评论就等于是不知道自己写的内容到底是什么样子的,有时候还是希望有人来吐槽一下的,特别是同行的慰问,尤其是同行由衷的表达。于是在网上搜索相关内容,一篇文章吸引了我,主要内容是通过 github issue 进行评论的存储,而且好处显而易见,评论的人群首先集中于开发。虽然自己的博客没什么人访问,但是终究是自己在网络上的一个港湾,所以还是希望编码各位同仁来沟通交流的,当然也欢迎各界人士从不同的视角品评,当然我的文章也不会仅仅在技术层面。

当然已经有人使用github实现了一个版本的第三方评论体系,我觉得非常不错。但是唯一的问题就是github访问速度,有时候某些网段访问还是比较慢,登陆都比较费劲,于是我还是想寻求一些替代品。最终我决定使用自己使用了很长时间码云平台进行是实现,当然除了使用很长时间之外,还由于码云和github和本身的体系是差不多的,所以是实现起来还是没什么难度的。

好了长话短说,还是看一看具体实现方法吧。

实现步骤

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

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

设置图片

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

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

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

1
2
3
4
5
6

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

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

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

1
2
3

comments:
enable: true

增加js全局变量

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

1
2
3
4
5
6
7
8
9
10
11
12

// 模板是否开启评论
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代理的。配置如下:

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

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。当然样式什么的就只能自己完成了。或者参考本站。

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

修改js配置参数

1
2
3
4
5
6
// 在文章页面增加参数
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评论

欢迎访问博客地址:https://www.zhoyq.com