本文主要是关于评论系统在hexo-yilia主题中的添加和配置。使用主题： hexo-theme-yilia-plus
常用系统
目前hexo可用的评论系统比较多，如：畅言、来必力、Disqus、Gitment、gitalk、utterances、Giteement、valine等等。不过有些已关停服务。
这里列举五个hexo常用的评论系统：
1、gitment：基于GitHub issue的评论系统，可参考：简书；2、gitalk: 基于GitHub issue的评论系统，可参考：gitalk；3、utterance: 基于GitHub issue的评论系统，可参考：详情4、giteement: 码云评论系统，国内用户建议使用这个，相对比较快，详情；5、valine: valine 评论系统，到 leancloud 进行注册。
1.Gitment配置
首先要注册 OAuth Application 当别人评论你的文章时，会需要它是授权。
注册成功后，会获取到Client ID/scerct，需要填入配置文件中。
打开文件themes\yilia-plus\_config.yml, 修改配置：
gitment_owner: ''# 你的 GitHub ID (github 账户名)# 是否使用官方js(false可以提升访问速度，本地修改过一部分的js，官方js可能会出现服务器不稳定，不太建议使用)gitment_repo: '如：xxx.github.io' #存储评论的 repo name(需要在Github创建)gitment_oauth:client_id: '' #client IDclient_secret: '' #client secret
在themes\yilia-plus\layout\_partial\post目录下，会默认有一个gitment.ejs文件，可以自定义样式
对应的themes\yilia-plus\layout\_partial\article.ejs文件，会有gitment相关的配置。
2.Gitalk配置
2.1.新建gitalk.ejs文件
与gitment类似配置，首先在themes\yilia-plus\layout\_partial\post目录下，新建gitalk.ejs文件，
添加如下内容：
<div id="gitalk-container" style="padding: 0px 30px 0px 30px;"></div> <link rel="stylesheet" href="/npm/gitalk@1/dist/gitalk.css"><script src="/npm/gitalk@1/dist/gitalk.min.js"></script><script type="text/javascript">if(<%=theme.gitalk.enable%>){var gitalk = new Gitalk({clientID: '<%=theme.gitalk.ClientID%>',clientSecret: '<%=theme.gitalk.ClientSecret%>',repo: '<%=theme.gitalk.repo%>',owner: '<%=theme.gitalk.githubID%>',admin: ['<%=theme.gitalk.adminUser%>'],id: '<%= page.date %>',distractionFreeMode: '<%=theme.gitalk.distractionFreeMode%>'})gitalk.render('gitalk-container') }</script>
2.2.修改文件comment.scss
在文件themes\yilia\source-src\css\comment.scss中，做如下修改：
#disqus_thread, .duoshuo, .cloud-tie-wrapper, #SOHUCS, #gitment-ctn, #gitalk-container {padding: 0 30px !important;min-height: 20px;}#SOHUCS {#SOHU_MAIN .module-cmt-list .block-cont-gw {border-bottom: 1px dashed #c8c8c8 !important;}}
2.3.修改主题配置文件_config.yml
打开文件themes\yilia-plus\_config.yml, 修改配置：
gitalk:enable: truegithubID: ''# 写自己github的IDrepo: ''# 新建存放评论的仓库名ClientID: ''# 与 `gitment` 一样ClientSecret: '' # 同上adminUser: ''# 也填GitHub的IDdistractionFreeMode: true
2.4.在文件article.ejs中添加配置
打开themes\yilia-plus\layout\_partial\article.ejs文件，添加：
<% if(theme.gitalk.enable){%><%- partial('post/gitalk', {key: post.slug,title: post.title,url: config.url+url_for(post.path)}) %><% } %>
3.Utterance配置
3.1.授权Utterance应用能访问仓库的issues
即安装Utterance应用，点击 install utterances，选择需要安装的仓库。
3.2.fork项目
去GitHub上 fork Utterance项目，按照它的教程在SITES.md文件中注册你的博客网址，否则可能会配置失败。
3.3.修改主题配置文件_config.yml
打开文件themes\yilia-plus\_config.yml, 修改配置：
# utteranc评论： https://utteranc.es (参数配置详见主页) 替换 gitment、gitalkutterance:enable: truerepo: ''#仓库名字,格式：你的用户ID/仓库名称，如：blog/utterance_repoissue_term: 'title' #映射配置theme: 'github-light'#主题
3.4.在文件article.ejs中添加配置
打开themes\yilia-plus\layout\_partial\article.ejs文件，添加：
<% if (theme.utterance && theme.utterance.enable){%><section id="comments" class="comments"><style>.utterances{max-width: 100%;}</style><script src="https://utteranc.es/client.js"repo="<%= theme.utterance.repo %>"issue-term="<%= theme.utterance.issue_term %>"theme="<%= theme.utterance.theme %>"crossorigin="anonymous"async></script></section><% } %>
4.Giteement配置
基于码云的评论系统，类似GitHub的配置
4.1.新建giteement.ejs文件
在themes\yilia-plus\layout\_partial\post目录下，新建giteement.ejs文件，添加如下内容：
<% if (!index && ments && theme.giteement && theme.giteement.enable){%><div id="giteement-ctn"></div><% if (theme.giteement && theme.giteement.remote){%><link rel="stylesheet" href="https://giteement.oss-cn-/default.css"><script src="https://giteement.oss-cn-/giteement.browser.js"></script><% } else {%><link rel="stylesheet" href="<%- url_for('lib/default.css') %>"><script src="<%- url_for('lib/giteement.browser.js') %>"></script><% } %><script><!-- id: "<%= page.title %>" -->var giteement = new Giteement({id: '<%=page.date.format('YYYYMMDDHHmmss')%>',owner: '<%=theme.giteement.giteeID%>',repo: '<%=theme.giteement.repo%>',backcall_uri: '<%=theme.giteement.redirect_uri%>',oauth_uri: '<%=theme.giteement.oauth_uri%>',oauth: {client_id: '<%=theme.giteement.gitment_oauth.client_id%>',client_secret: '<%=theme.giteement.gitment_oauth.client_secret%>'},})giteement.render('giteement-ctn')</script><% } %>
4.2.修改主题配置文件_config.yml
打开文件themes\yilia-plus\_config.yml, 修改配置：
giteement:enable: true # 是否启用码云评论系统# 是否使用官方js(false可以提升访问速度)remote: falseredirect_uri: '' # 应用回调地址(请和配置的第三方应用保持一致)# 不能更改(网上开源项目/Rob--W/cors-anywhere作者提供的专门用来跨域服务器的配置)oauth_uri: https://cors-//oauth/tokengiteeID: '' # 你的码云账号英文名# 存储评论的 reporepo: yilia-plus-demogitment_oauth:client_id: '*********' #client IDclient_secret: '*********' #client secret
4.3.在文件article.ejs中添加配置
打开themes\yilia-plus\layout\_partial\article.ejs文件，添加：
<% if (theme.giteement && theme.giteement.enable){%><%- partial('post/giteement', {key: post.slug,title: post.title,url: config.url+url_for(post.path)}) %><% } %>
5.Valine配置
5.1.注册LeanCloud
先到 leancloud进行注册、创建应用等等，页面有帮助教程。
到【设置】-【应用keys】，找到AppID和AppKey，配置需要。
5.2.部署云引擎
在Leancloud 【云引擎】-【设置】界面，创建代码仓库，并保存：/DesertsP/Valine-Admin.git设置环境变量部署（分支选master）可参考：Valine配置手册
5.3.新建valine.ejs文件
在themes\yilia-plus\layout\_partial\post目录下，新建valine.ejs文件，添加如下内容：
<div class="valine_comment"></div><!--载入js，在</body>之前插入即可--><!--Leancloud 操作库:--><script src="///static/js/3.0.4/av-min.js"></script><!--Valine 的核心代码库--><script src="///valine/dist/Valine.min.js"></script><script>var notify = '<%= theme.valine.notify %>' == true ? true : false;var verify = '<%= theme.valine.verify %>' == true ? true : false;new Valine({av: AV,el: '.valine_comment',emoticon_url: '/alu',emoticon_list: ["狂汗.png","不说话.png","汗.png","坐等.png","献花.png","不高兴.png","中刀.png","害羞.png","皱眉.png","小眼睛.png","暗地观察.png"],app_id: '<%= theme.valine.appid %>',app_key: '<%= theme.valine.appkey %>',placeholder: '<%= theme.valine.placeholder %>'});</script>
5.4.修改主题配置文件_config.yml
打开文件themes\yilia-plus\_config.yml, 修改配置：
# valine 评论系统，到leancloud进行注册# /dashboard/login.html#/signupvaline:appid: '' # Leancloud应用的appIdappkey: ''# Leancloud应用的appKeyverify: false# 验证码notify: true # 评论回复提醒avatar: mm # 评论列表头像样式（/avatar）placeholder: 欢迎您的评论~ # 评论框占位符
5.5.在文件article.ejs中添加配置
打开themes\yilia-plus\layout\_partial\article.ejs文件，添加：
<% if (theme.valine && theme.valine.appid && theme.valine.appkey){%><section id="comments" style="margin:10px;padding:10px;background:#fff;"><%- partial('post/valine', {key: post.slug,title: post.title,url: config.url+url_for(post.path)}) %></section><% } %>
