本文主要是關于 評論系統 在 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 ID
  client_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="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/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:  true
  githubID:  ''      # 寫自己github的ID
  repo:  ''          # 新建存放評論的倉庫名
  ClientID:  ''      # 與 `gitment` 一樣
  ClientSecret:  ''  # 同上
  adminUser:  ''     # 也填GitHub的ID
  distractionFreeMode: 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、gitalk
utterance:
  enable: true
  repo: ''     #倉庫名字,格式：你的用戶ID/倉庫名稱，如：blog/utterance_repo
  issue_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 && post.comments && theme.giteement && theme.giteement.enable){ %>
  <div id="giteement-ctn"></div>
  <% if (theme.giteement && theme.giteement.remote){ %>
    <link rel="stylesheet" href="https://giteement.oss-cn-beijing.aliyuncs.com/default.css">
    <script src="https://giteement.oss-cn-beijing.aliyuncs.com/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: false
  redirect_uri: ''   # 應用回調地址(請和配置的第三方應用保持一致)
  # 不能更改(網上開源項目https://github.com/Rob--W/cors-anywhere作者提供的專門用來跨域服務器的配置)
  oauth_uri: https://cors-anywhere.herokuapp.com/https://gitee.com/oauth/token
  giteeID: ''  # 你的碼云賬號英文名
  # 存儲評論的 repo
  repo: yilia-plus-demo
  gitment_oauth:
    client_id: '*********'           #client ID
    client_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.部署云引擎

1. 在Leancloud 【云引擎】-【設置】界面，創建代碼倉庫，并保存：https://github.com/DesertsP/Valine-Admin.git
2. 設置環境變量
3. 部署（分支選master）

可參考：Valine配置手冊

5.3.新建 valine.ejs 文件

在 themes\yilia-plus\layout\_partial\post 目錄下，新建 valine.ejs 文件，添加如下內容：

<div class="valine_comment"></div>
<!--載入js，在</body>之前插入即可-->
<!--Leancloud 操作庫:-->
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<!--Valine 的核心代碼庫-->
<script src="//unpkg.com/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: 'https://cloud.panjunwen.com/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進行注冊
# https://leancloud.cn/dashboard/login.html#/signup
valine:
 appid: ''  # Leancloud應用的appId
 appkey: ''          # Leancloud應用的appKey
 verify: false      # 驗證碼
 notify: true       # 評論回復提醒
 avatar: mm        # 評論列表頭像樣式（https://valine.js.org/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>
  <% } %>

---