虽然有墙的关系github访问是不太行,但终究还是喜欢gitalk的方案来实现评论功能,Gitalk Demo & Gitalk
前置准备:
进到Ghost后台 > Settings > Code injection,在Site Header增加以下代码:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<style type="text/css">
<!-- 下面的代码是改变评论框内的背景颜色的,ghost默认的主题下gitalk的评论框文字白色、背景也是白色会导致文字看不清 -->
.gt-container .gt-header-textarea {
background-color: #24292e;
}
.gt-container .gt-header-textarea:hover {
background-color: #303a3e;
}
再在Site Footer增加以下代码(按自己情况改下参数配置):
<!-- gitalk -->
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<script type="text/javascript">
var gitalkDiv = document.createElement("div");
gitalkDiv.setAttribute("id", "gitalk-container");
if(document.querySelector('.read-next')){
document.querySelector('.read-next').appendChild(gitalkDiv)
}
var gitalk = new Gitalk({
clientID: 'github application的clientID',
clientSecret: 'github application的clientSecret',
repo: 'repository的名称',
owner: 'repository的拥有者',
admin: ['允许创建评论issue的github账户'],
id: location.pathname, // Ensure uniqueness and length less than 50
distractionFreeMode: false // Facebook-like distraction free mode
})
gitalk.render('gitalk-container')
</script>
后话:直接把clientID和clientSecret暴露在js代码的做法总觉得不安全。