为Ghost 博客添加Valine 评论系统

Ghost 博客原来带有disqus 社会化评论系统,后来又取消了。

Anyway,对我们而言,用disqus毕竟是个技术活。

现在,我们可以使用国产的Valine做为Ghost博客的评论系统。

方法很简单:

  1. 按官方教程,获得leancloud应用的APP ID 和 APP Key。

  2. 在后台Code injectionBlog Header放入代码

    <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
        <script src='//unpkg.com/valine/dist/Valine.min.js'></script>
    
  3. ghost/versions/content/themes/ 主题 的post.hbs 如下位置,放入代码。并修改appid 和appkey

    </footer>
                   <!-- Valine -->
    					<div id="vcomments"></div>
    					<script>
    						new Valine({
    						el: '#vcomments',
    						appId: '<API_ID>',
                            appKey: '<API_Key>',
    						visitor: true
    					})
    					</script>
                {{!--
                <section class="post-full-comments">
                    If you want to embed comments, this is a good place to do it!
                </section>
                --}}
    
    
  4. 重启Ghost,既可使用Valine评论系统。

  5. Valine 是无后端评论系统,评论数据管理功能需登录Leancloud应用管理。

    具体步骤:登录>选择你创建的应用>存储>选择Class Comment

  6. 其他配置,参考官网。

  7. valine 简洁高效,用户无需登录,即可评论,现在独立博客越来越少,灌水帖也越来越少,所以,大家不用担心被恶意灌水。

  8. valine对HexoJekyllTypechoHugo都有很好的支出,唯独Ghost 二次开放还很少,希望有大神可以贡献力量。

  9. 如果对原生系统的样式不满意,可以采用二次开发的样式

  10. 在后台Code injection**`Blog Header 插入代码

  11. <script src="https://cdnjs.loli.net/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
    
  12. 样式地址:https://github.com/DesertsP/Valine/releases,下载Valine.min.js ,放在主题/assets/js中,在post.hbs文件的相应位置做引入,并配置如下。

  13. <!-- Valine -->
    <script src="/assets/js/Valine.min.js"></script>
    
    	<div class="comment"></div>
    
         undefinedundefined<script>
          new Valine({
          av: AV,
          el: '.comment',
          emoticon_url: 'https://cloud.panjunwen.com/alu',
          emoticon_list: ["吐.png","喷血.png","狂汗.png","不说话.png","汗.png","坐等.png","献花.png","不高兴.png","中刀.png","害羞.png","皱眉.png","小眼睛.png","中指.png","尴尬.png","瞅你.png","想一想.png","中枪.png","得意.png","肿包.png","扇耳光.png","亲亲.png","惊喜.png","脸红.png","无所谓.png","便便.png","愤怒.png","蜡烛.png","献黄瓜.png","内伤.png","投降.png","观察.png","看不见.png","击掌.png","抠鼻.png","邪恶.png","看热闹.png","口水.png","抽烟.png","锁眉.png","装大款.png","吐舌.png","无奈.png","长草.png","赞一个.png","呲牙.png","无语.png","阴暗.png","不出所料.png","咽气.png","期待.png","高兴.png","吐血倒地.png","哭泣.png","欢呼.png","黑线.png","喜极而泣.png","喷水.png","深思.png","鼓掌.png","暗地观察.png"],
          appId: '',
    	  appKey: '',
          placeholder: 'Write a Comment'
         });
        </script>