Valine is a fast, simple & efficient leancloud based no back end comment system.

Theoretically, but not limited to static blog. Ghost,Hexo, Jekyll, Typecho, Hugo and other blog programs are currently using Valine.

In this tutorial we will show you how to integrate Valine comments with your Ghost blog. By default, Ghost does not support post comments but you can easily integrate the third party service Valine comments.

  1. Get APP_ID and APP_Key

    Click here to register or login in leancloud.
    Click here Create new application in Leancloud, and you will get APP ID/APP Key.

  2. Put the following HTML code in the appropriate location 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. Put the following HTML code in the appropriate location ghost/versions/content/themes/post.hbs ,and change '<API_ID>','<API_Key>' with your APPID ,APP Key.

    </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. restart ghost.

  5. if you do not like the css, you may try the next , like this page

  6. Put the following HTML code in the appropriate location Code injectionBlog Header

  7. <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>
    
  8. download Valine.min.js from https://github.com/DesertsP/Valine/releases, and upload to themes/**/assets/js

  9. Put the following HTML code in the appropriate location ghost/versions/content/themes/post.hbs ,and change '<API_ID>','<API_Key>' with your APPID ,APP Key. and restart ghost。

  10. <!-- Valine -->
    	<script src="/assets/js/Valine.min.js"></script>
          <div class="comment"></div>
          <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: 'appID',
    		 appKey: 'appkey',
               placeholder: 'Write a Comment'
                })
            </script>