title: 接入gitment為hexo新增評論功能
toc: false
date: 2018-04-16 10:59:56
categories:

• methods

tags:

• hexo
• gitment

註冊一個OAuth application

註冊連結

其中：

Application name 為應用名，取一個跟自己部落格相關的名字即可；

Homepage URL 為部落格地址，例如我的為：https://mikqueenge.github.io；

Application description 為應用描述，可不填；

Authorization callback URL 為回撥URL，可不填；

點選 Register application 祝成功後會得到這個應用的 client ID 和 client secret，等下配置檔案時會用到。

配置檔案

主題：landscape

建立git.ejs

在themes/landscape/layout/_partial/post資料夾中建立檔案git.ejs，寫入下面的程式碼：

<!-- Gitment評論外掛通用程式碼 -->
<div id="git"></div>
<!-- 漢化版 -->
<link rel="stylesheet" href="https://billts.site/extra_css/gitment.css">
<script src="https://billts.site/js/gitment.js"></script>
<script>
var gitment = new Gitment({
  id: '{{ page.date }}', //新增此句解決Error：validation failed的問題
  owner: "%%%%%%%",//github使用者名稱，例如MIKQUEENGE
  repo: "%%%%%%%",//使用者儲存評論的github專案名稱，例如MIKQUEENGE.github.io
  oauth: {
    client_id: "%%%%%%%%%%%%",//註冊OAuth Application時生產的ClinetID
    client_secret:"%%%%%%%%%%",//註冊OAuth Application時生成的Client Secret
  },
})
gitment.render('git')
</script>
<!-- Gitment程式碼結束 -->
 

配置article.ejs

在themes/landscape/layout/_partial/article.ejs檔案的結尾新增：

<% if (!index){ %>
  <% if (post.comments){ %>
  <%- partial('post/git') %>
  <% } else { %>
    <div class="git"></div>
  <% } %>
<% } %>

登陸與新增評論

完成上述配置後部署並開啟某篇文章，拉到最底部可以看到評論區：

點選登陸後就可以新增評論啦！

遇到問題Error：validation failed

md檔名太長導致id出現問題，使用上述程式碼是不會出現這個問題的。

如果出現這個問題，解決方案為在gitment配置檔案（如上述的git.ejs）中的var gitment = new Gitment({})內新增id: '{{ page.date }}',（不要忘記這個逗號）

參考連結：

Hexo部落格yelee主題新增Gitment評論系統

Gitment評論功能接入踩坑教程