如何给自己的博客添加评论系统

想要做一个骚气的博主，没有一个评论系统怎么行呢

打开我的Google复制一下别人的，
呸，
打开我的Google搜索一下前辈们的经验。

首先，我了解到的是next官网推荐的几种评论插件，分别是以下这几个哥们
DISQUS Facebook Comments HyperComments 网易云跟帖 来必力

从名字上来说，我选择最后一个试一下(绝对不是我看不懂别人官网，绝对不是!)

来必力

来必力(这特喵的居然是个韩文网站) 这款评论系统比较简单，首先要去人家官网注册一个账号，登陆以后根据提示申请一个免费的city版什么鬼的，然后在代码里能得到一串LiveRe UID，在next 的_config.yml文件里编辑livere_uid字段，就完成啦，系不系很简单？效果如下
来必力
然后我觉得太丑了，不符合next的黑白简约主题，而且很大概率进入页面后需要重新刷新才能显示出来，所以我就放弃了。

Gitment

接下来我又在茫茫Google中搜索，然后找到了它，看介绍说是通过github提issue的方式来创建一个评论系统，看到github我嘴角疯狂上扬，符合我的气质，这个我看行，开搞！

首先在https://github.com/settings/developers申请一个免费的application，根据提示填写如下内容，

Application name：blog-comments  // 随便写啥，你能记住就好 
Homepage URL：https://网站地址/  // 你的博客地址
Application description：Blog comment system  // 随便写
Authorization callback URL：https://网站地址/  // 你的博客地址

创建完成后先不要关闭，client_id与client_secret下面要用

接着在你的github新建一个空的仓库来存放评论，比如叫做blog-comments

然后在主题配置文件_config.yml里填写gitment的相关配置

gitment:
  enable: true  // 这个改成true
  mint: true # RECOMMEND, A mint on Gitment, to support count, language and proxy_gateway
  count: true # Show comments count in post meta area
  lazy: false # Comments lazy loading with a button
  cleanly: false # Hide 'Powered by ...' on footer, and more
  language: zh-Hans # Force language, or auto switch by theme
  github_user: BiYangJun # MUST HAVE, Your Github ID
  github_repo: blog-comments # MUST HAVE, The repo you use to store Gitment comments 这是你新建的存放评论的库
  client_id: # MUST HAVE, Github client id for the Gitment 刚刚创建application里有的
  client_secret: # EITHER this or proxy_gateway, Github access secret token for the Gitment 刚刚创建application里有的
  proxy_gateway: # Address of api proxy, See: https://github.com/aimingoo/intersect
  redirect_protocol: # Protocol of redirect_uri with force_redirect_protocol when mint enabled

全部配置完后，一切看起来很顺利，页面底部也出来了评论框，就差最后一步登陆自己的github来初始化了，一开始本地登陆不了，我以为是要部署后才能登陆，然后我部署了上去，心里想着这下成了!

部署后，我点击登陆后，一直给我报错[object ProgressEvent]，试了很多次，我还一度怀疑是不是我github密码输错了，纳闷的我去看了一下gitment的issue，最后发现原因大概是gitment的网站证书到期了，gitment需要这个为接口，所以一直报错。
辛辛苦苦1小时，我…

哎，接着在茫茫Google找吧…

Gitalk

接着，在茫茫博客中，我发现了戳兔专家这位大哥的博文，跟着他的教程开始了安装Gitalk,帖个官网。

首先

刚刚申请的application和新建存放评论的仓库不要丢，裹上鸡蛋液，放在油锅里炸一炸，隔壁小孩…
住嘴！
由于next还没有集成gitalk，所以配置起来相当繁琐

首先还是要在github上申请一个application和新建一个存放评论的仓库(上面的就可以用)

在 /layout/_third-party/comments/ 目录下新建 gitalk.swig 文件，内容如下：

{% if page.comments && theme.gitalk.enable %}
    <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
    <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
    <script type="text/javascript">
        var gitalk = new Gitalk({
          clientID: '{{ theme.gitalk.ClientID }}',
          clientSecret: '{{ theme.gitalk.ClientSecret }}',
          repo: '{{ theme.gitalk.repo }}',
          owner: '{{ theme.gitalk.owner }}',
          admin: ['{{ theme.gitalk.adminUser }}'],
          id: location.pathname,
          distractionFreeMode: '{{ theme.gitalk.distractionFreeMode }}'
        })
        gitalk.render('gitalk-container')           
    </script>
{% endif %}

修改 /layout/_partials/comments.swig，在最后一个 elseif 后添加字段，修改后如下：

 {% elseif theme.gitment.enable %}
    <div class="comments" id="comments">
      {% if theme.gitment.lazy %}
        <div onclick="showGitment()" id="gitment-display-button">{{ __('gitmentbutton') }}</div>
        <div id="gitment-container" style="display:none"></div>
      {% else %}
        <div id="gitment-container"></div>
      {% endif %}
    </div>

  {% elseif theme.valine.appid and theme.valine.appkey %}
    <div class="comments" id="comments">
    </div>
  
  {% elseif theme.gitalk.enable %}
    <div id="gitalk-container"></div>

  {% endif %}

{% endif %}

修改 /layout/_third-party/comments/index.swig，在其末尾添加如下字段：
1
{% include 'gitalk.swig' %}
设置 gitalk 的样式，参考1：在 /source/css/_common/components/third-party/ 目录下新建 gitalk.styl 文件，内容如下：
1
2
3
4
.gt-header a, .gt-comments a, .gt-popup a
border-bottom: none;
.gt-container .gt-popup .gt-action.is--active:before
top: 0.7em;
修改 /source/css/_common/components/third-party/third-party.styl 文件，在末尾添加如下字段：
1
@import "gitalk";

最后在主题配置文件 _config.yml 中添加如下项：

gitalk:
  enable: true
  owner: 你的github帐号  # lzcwr  
  repo: 存放评论的仓库名称   # Gitalk-comments
  ClientID: 在申请好application的页面中有
  ClientSecret: 在申请好application的页面中有
  adminUser: 你的github帐号 # 可初始化评论的账户
  distractionFreeMode: true

完整无误地完成上述步骤后，在本地可以看到gitalk的按钮，然后通过hexo d部署到线上后，登陆你的github进行初始化就大功告成了啦！

如果你给一篇博文的文件命名有中文的话，你可能会碰到这个报错Error: Validation Failed。哎，真是一波三折啊

Error: Validation Failed 解决方案

修改前文提到的gitalk.swig，先下载一个md5.js,更改完毕后的gitalk.swig如下：

{% if page.comments && theme.gitalk.enable %}
    <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
    <script src="/js/md5.min.js"></script>
    <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
    <script type="text/javascript">
        var gitalk = new Gitalk({
          clientID: '{{ theme.gitalk.ClientID }}',
          clientSecret: '{{ theme.gitalk.ClientSecret }}',
          repo: '{{ theme.gitalk.repo }}',
          owner: '{{ theme.gitalk.owner }}',
          admin: ['{{ theme.gitalk.adminUser }}'],
          id: md5(location.pathname),
          distractionFreeMode: '{{ theme.gitalk.distractionFreeMode }}'
        })
        gitalk.render('gitalk-container')           
    </script>
{% endif %}