当前位置: 首页 > 后端技术 > Node.js

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

时间:2023-04-04 01:17:45 Node.js

使用Ghost发布第一篇文章后,突然意识到一个问题,这个产品没有评论系统?看了官网的描述,他们把主要精力放在了博客系统的基本功能上,外围功能可以通过引入第三方功能来实现。例如代码的高亮可以使用highlight.js等组件实现[见这里]。第三方评论系统选择Valine,网上大部分的解释都是以例子为例。不过多说作为多年来使用率最高的第三方系统,其实已经关闭了评论系统的入口。目前比较知名的第三方评论系统大概有:畅言——搜狐出品,目前国内用户比较多的——国内另一款第三方评论系统Disqus——Ghost推荐的评论系统,经常用到bywall根据网上的反馈,第一个想到的是用长颜。毕竟是搜狐出品,质量和功能是可以保证的。但考虑到这项服务的可持续性,既然第一玩家无法通过盈利来维持这项服务,那么如果有一天停止这项服务我也不会感到惊讶。他犹豫了一下,看到了Valine。纯前端,后端数据支持是通过LeanCloud实现的。这打消了我最大的疑虑,简约的风格很符合我的审美。Valine的安装Valine的安装非常简单,整个过程参考官网即可实现。需要注意的是Valine的js代码可以通过代码注入设置来引用,但是body端的代码需要下载到post.hbs模板文件中。(因为普通的代码注入只能注入footer,而且是全局所有页面,不能指定评论组件的位置,必须在所有页面都引入评论组件。)导入文件//编辑ghost/content/themes/casper/default.hbs...{{#ifpost}}{{/if}}...导入代码//编辑ghost/content/themes/casper/post.hbs//在中添加...{{content}}

//下面是要添加的内容
...修改后保存文件,重启高ost,第一次刷新页面,会在评论组件底部显示应用正在初始化,需要等待3分钟。3分钟后,评论系统就可以使用了。修改了Valine的样式。Valine可以正常使用,但是字体显示很小,小得几乎看不出来。打开开发者工具查看,字体都设置为0.875rem大小。别的博客系统不知道,但是在Ghost系统上,这样的字号,几乎是看不懂任何文字的。您可以通过添加CSS样式来重新调整评论系统的字体大小/*createghost/content/themes/casper/assets/css/valine.css*/.v.vinput{font-size:1.5rem!important;}。v.veditor{字体大小:1.5rem!重要;}.v.vbtn{字体大小:1.5rem!重要;}.v.vinfo.col{字体大小:1.5rem!重要;}.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{字体大小:1.2rem重要;}.v.vlist.vcard.vh.vtime{字体大小:1.2rem重要;}.v.vlist.vcard.vh.vat{font-size:1.2rem!important;}.v.vlist.vcard.vcontent{font-size:1.5rem!important;}重启Ghost,刷新网页,大功告成!