Ghost配置3——添加评论系统

2019年9月3日 154次阅读 来源: 一光年

用上Ghost发表第一篇文章以后，突然意识到一个问题，这货没有评论系统？

看了下官网的说明，他们把主要精力都放在了博客系统的基础功能上，对于周边功能可以通过引入第三方功能来实现。例如代码的高亮问题，就可以使用highlight.js等组件来实现[看这里]。

选择Valine

关于第三方的评论系统，网络上大多以多说为例进行的说明。然而多说作为一个多年来使用率第一的第三方系统，竟然已经关闭了评论系统的接入。目前知名的第三方系统大概有：

  • 畅言 —— 搜狐出品，目前国内用户量第一
  • 来比力 —— 另一家国产第三方评论系统
  • Disqus —— Ghost推荐使用的评论系统，经常被墙

根据网络上的反馈，第一想法是使用畅言。毕竟是搜狐出品，品质和功能都是可以保证的。但从服务的可持续性考虑，既然占有率第一的多说都不能通过盈利来维持服务，畅言如果哪一天被停止服务也一点不会让我惊讶。

犹豫间看到了Valine。纯前端，后端数据支持通过LeanCloud来实现。这就打消了我最大的疑虑，而且简洁的风格也非常符合我的审美。

Valine的安装

Valine的安装非常简单，全程参考官网即可以实现。

需要注意的是，Valine的js代码可以通过代码注入的设置来进行引用，但body端的代码则需要下入到post.hbs模板文件当中才可以。（因为普通的代码注入只能注入到footer，而且是全局所有页面，既不能指定评论组件的位置，也必须在所有页面中都引入评论组件。）

引入文件

// 编辑 ghost/content/themes/casper/default.hbs
...
    {{# if post}}
        <link rel="stylesheet" type="text/css" href="{{asset "css/valine.css"}}" />
        <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
        <script src='https://cdnjs.cloudflare.com/ajax/libs/valine/1.3.3/Valine.min.js'></script>
    {{/if}}
...

引入代码

// 编辑 ghost/content/themes/casper/post.hbs
// 在<section class='post-full-content'></section>中加入
...
  <section class="post-full-content">
    <div class="post-content">
        {{content}}
    </div>
    // 下面是要加入的内容
    <div id="vcomments"></div>
    <script>
        new Valine({
            el: '#vcomments',
            appId: '<AppId>',
            appKey: '<AppKey>',
            notify:false,
            verify:false,
            avatar:'mm',
            placeholder: '请发表您的高见'
        })
    </script>

</section>
...

修改后保存文件，重启ghost，刷新页面。初次使用，在评论组件的下方位置显示应用初始化中，要等待3分钟。3分钟后，评论系统便可以使用了。

Valine的样式修改

valine可以正常使用了，但字体显示却非常的小，小到几乎看不到。打开开发者工具查看，字体都被设定在了0.875rem的大小。

别的博客系统不知道，但是在Ghost系统上，这样的字体大小几乎没办法看清任何字。可以通过添加CSS样式，来重新调整评论系统的字体大小

/* 创建 ghost/content/themes/casper/assets/css/valine.css */ 
.v .vinput {
  font-size: 1.5rem !important;
}

.v .veditor {
  font-size: 1.5rem !important;
}

.v .vbtn {
  font-size: 1.5rem !important;
}

.v .vinfo .col {
  font-size: 1.5rem !important;
}

.v .vinfo .vcount .vnum {
  font-size: 1.5rem !important;
}

.v .power {
  display: none !important;
}

.v .vlist .vcard .vhead .vnick {
  font-size: 1.5rem !important;
}

.v .vlist .vcard .vhead .vsys {
  font-size: 1.2rem !important;
}

.v .vlist .vcard .vh .vtime {
  font-size: 1.2rem !important;
}

.v .vlist .vcard .vh .vat {
  font-size: 1.2rem !important;
}

.v .vlist .vcard .vcontent {
  font-size: 1.5rem !important;
}

重启Ghost后刷新网页，一切搞定！

    原文作者：一光年
    原文地址: https://segmentfault.com/a/1190000016758693
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞