2018-11-01 · Blog

Ghost 博客添加 Valine 评论系统

今天开始将博客从 Wordpress 迁移回 Ghost, 在这之前就必须解决之前放弃 Ghost 的一个主要原因--评论系统。

国外的评论系统就不考虑,主要是速度问题,开始时时选择的 畅言 但是需要 VIP 才可以去广告,还有就是需要登陆才可以进行评论。
对于博客的评论系统来说,越简单评论越好。
所以最后选择的是 Valine,下面就开始安装吧

注册账户

首先阅读 Valine 的官网上的文档,并进行注册。获取到后面需要的 APP ID 和 APP key。

valine-app-id-key

添加 DIV

找到文章的合适文章添加评论和展示的 DIV , 我是在 post.hbs 的 footer 标签后面进行的添加

<article>
    <footer>
    ...
    </footer>

    <!-- 添加 Valine 评论 start -->
    <div class="col-md-12">
        <div id="vcomments"></div>
    </div>
    <!-- 添加 Valine 评论 end -->

    ...
</article>

添加 Script 代码

剩下的 Script 代码就添加在 Code injection 的 Blog Footer 部分吧

<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src='//unpkg.com/valine/dist/Valine.min.js'></script>
<script>
	new Valine({
		el: '#vcomments',
		appId: '<APP ID>',
		appKey: '<APP Key>'
	})
</script>

下面是效果图

valine-comment-demo-on-ghost