开头
说到建立博客，除了分享自己的一些文章，记录自己的足迹以外，还有一个乐趣那就是建立一个博客评论系统了，当看到有小伙伴在你的博客下留言的时候，你的心情一定会无比的开心
那么，如何开启或者说建立博客的评论系统呢?
•第一种方法：HEXO原生支持GitHub的免费评论系统Gitment,你可以直接在github上找到这个功能并进行申请，在博客的配置文件种填入相关的配置即可使用了，网上教程页很多
•第二种：自己建评论系统，网上开源的评论系统有很多，不过都需要你有自己的服务器进行部署才能使用，很多小伙伴可能还没有自己的服务器就没办法用这个方法了
•第三种：使用他人搭建好的评论服务器，本文正是重点介绍这个
评论系统的选择
网上有很多第三方的评论系统，但你也就只能部署一个在你的博客上，什么样的评论系统比较好呢？当然是越大的评论系统，功能越完善的越好，比如畅言，多说（貌似即将关闭了），网易云评论系统等，那我们直接就选用这种咯？
不是这样的，很多评论系统的注册是有门槛的，比如畅言，多说等都需要你的网站有了备案以后才能使用，如果你的网站已经有了备案呢，选择他们就没错了。
那没有备案又想要用评论系统怎么办呢？我们只能选择一些不用备案的，或者说规模小一些的第三方评论系统了。比较有名的有Disqus，valine等网上教程很多了可以直接百度到使用这些评论系统的教程。
如何手动添加评论系统
如果你选择了一个适合你的评论系统，正在开心的想要添加到你的HEX O博客中，这时你才发现，你的博客原生并没有支持这个评论系统，又该如何添加到自己的博客中去呢？
下面以一个“云评论系统”http://cs.occamx.com/ 为例子来介绍如何添加未原生支持的评论系统到你的博客中
首先，在评论系统中注册一个账号，登陆管理系统，你将会看到这样的信息：
一般评论系统的文档页面都会告诉你，你需要把这段代码添加到你的博客页面中。。。。底下还会有一些说明
思考
首先，我们要思考一个问题，博客评论系统有什么特点？
1.它一般出现在文章的末尾
2.不同的文章显示的是相应文章的评论内容
想到这些，我们首先就是要让评论框出现在我们的文章末尾，那么我们就要把代码添加到我们的文章页面处
分析
从HEXO官方文档中得知，我们的文章之所以都是同样的页面，显示不同的文章内容，是因为有文章模板这个文件的存在，我们需要找到这个文件
在进行了一通查找之后，我们就找到了1
HEXO文件夹\themes\你使用的主题\layout\_partial\article.ejs
这个路径的文件（没有使用主题的路径是：HEXO文件夹\themes\landscape\layout_partial\article.ejs）
打开这个文件，你会看到很多代码，不要紧张，往下面仔细查找你会发现这么一堆代码：
其中你就会看到comments（评论）字样，还有各种主题原生支持的一些评论系统的关键字，比如多说，网易云评论啊，gitment等等，这就是文章模板中插入评论系统的代码了。
编写代码
第一次编写代码
❌🚫（这一小节所示的代码有一些BUG，不过也记录下来，正确的代码在”第二次编写”）对插入的结构进行分析，就会发现，就是IF的判断这么简单，如果（if）开启评论系统，则插入xxxxx页面，再定义了一些所需的变量，今次而已，那么，我们也依葫芦画瓢添加一个判断，最终就写出了下面的代码：
2
3
4
5
6
<%- partial('post/yunping', {
key: theme.yunping_sid,
title: post._id
}) %>
<% } %>如果，theme.yunping这个参数为ture则运行下面的代码，插入页面post/yunping.ejs,带入两个变量（key,和title）
theme.yunping_sid 是_config.yml的自建参数，你可以在_config.yml添加这一项并将ID写入
post._id 是HEXO文章的文章变量，官方文档并没有注明，在对源代码进行一顿分析之后才发现的这个变量，因为示例所使用的评论系统[pid]只能是数字和英文，所以只能用id作为变量，有些评论系统是用文章标题作为识别的则你需要是用post.title作为变量。全局变量直接查阅官方文档直接使用即可
这段写完了，那么，插入页面的代码写在哪里？就是在post/yunping.ejs里，你会在artucle.ejs目录发现一个post文件夹，在文件夹中新建一个yunping.ejs（文件名按照所写的代码来）文件
目录结构是这样：
打开yunping.ejs，按照评论系统网站上要求插入的代码进行插入，最终写了如下代码:
2
3
4
5
6
7
8
9
10
11
<!-- 引入云评论系统css代码 -->
<link rel="stylesheet" href="//c.fansx.com/tc.css"/>
<!-- 云评论框 start -->
<div id="tc_s<%=key%>p<%=title%>"></div>
<!-- 云评论框 end -->
<!-- 云公共JS代码 start (一个网页只需插入一次) -->
<script src="//c.fansx.com/?m=c1&sid=<%=key%>&pid=<%=title%>"></script>
<!-- 云公共JS代码 end -->
</div>其中，[sid]和[pid]由<%=key%>和<%=title%>这两个变量来替换就好了。
到这里一切问题看似都解决了，但是出现了一些意外的BUG，评论代码中要求的 [pid] 使用的是 post._id 进行id的获取的，但是，这个 post._id 有点问题,在每一次的 HEXO generate中，获取到的文章ID都不一样，导致评论丢失。这可咋办勒。。😭
第二次编写代码
🉑
为了解决 ID 的问题，首先我就想到了 post.date变量，因为文章的创建时间实际上也可以作为唯一标识来使用。
但 post.date变量不仅有数字还有空格还有英文字符还有特殊符号，不符合 [pid] 的纯数字或者带英文字符的要求
经过几个小时的查找资料，最后还是在官方文档中找到了解决办法
🔆在HEXO文档中有一节叫 辅助函数（Helpers）
里面写到：
日期与时间
date
插入格式化的日期。date 可以是 UNIX 时间、ISO 字符串、Date 对象或 Moment.js 对象。format 默认为 date_format 配置信息。<%- date(date, [format]) %>示例：
<%- date(Date.now()) %>// 2013-01-01
<%- date(Date.now(), 'YYYY/M/D') %>// Jan 1 2013
date_xml
插入 XML 格式的日期。date 可以是 UNIX 时间、ISO 字符串、Date 对象或 Moment.js 对象。<%- date_xml(date) %>示例：
<%- date_xml(Date.now()) %>// 2013-01-01T00:00:00.000Z
time
插入格式化的时间。date 可以是 UNIX 时间、ISO 字符串、Date 对象或 Moment.js 对象。format 默认为 time_format 配置信息。<%- time(date, [format]) %>示例：
<%- time(Date.now()) %>// 13:05:12
<%- time(Date.now(), 'h:mm:ss a') %>// 1:05:12 pm
根据文档里的说法，我们就可以依葫芦画瓢把post.date变量格式化为我们需要的字段了。
下面是相关的代码1
2
3
4
5
6
7
8文件："article.ejs"
//中的插入代码修改成了这样（title参数不要了，在yunping.ejs中直接获取好了）
-----------------------------------------------------------------------------
<% if (theme.yunping){ %>
<%- partial('post/yunping', {
key: theme.yunping_sid,
}) %>
<% } %>
1 | 文件："yunping.ejs" |
经过这一顿折腾，文章评论的[pid]算是正常了。
成果的检验
现在执行hexo server 预览一下，如果没问题的话，评论应该就会显示在你的文章底部了
发布
测试成功之后，就可以对评论系统的样式进行一下修改，最后就可以发布页面了。看，你的博客的评论页面就这样搭好了，是不是很简单呢？🙃（逃
Tip.修改了网页的样式，必须要先hexo clean再生成网页文件再进行发布啊。
