给ghost添加gitalk评论功能

虽然有墙的关系github访问是不太行，但终究还是喜欢gitalk的方案来实现评论功能，Gitalk Demo & Gitalk

前置准备：

• github帐户，没有可创建；
• github repository，用于保存评论（issues），没有可创建；
• github application授权，没有可创建。

进到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代码的做法总觉得不安全。