首页指南Ghost 自带评论的那道会员门,和绕开它的一个 div

Ghost 自带评论的那道会员门,和绕开它的一个 div

只有会员能回,还是 Google 登录就能写。选好之后,要粘的只有一行。

更新

Ghost 从 2022 年 8 月起就有自带评论,而且设计上就是会员专属:读者得先注册成你站点的会员并登录,回复框才会出现。对一份付费通讯来说这是划算的交易,对一个开放的博客来说是亏的,因为有话想说的人里,大多数永远不会去注册账号。想让路过的读者也能留言,就另外装一个第三方评论小部件:Settings > Advanced > Code Injection 里一个脚本标记,评论区该在的位置一个 <div>,事先不需要升到哪个 Ghost(Pro) 档位。

Ghost 本来就带评论,这件事就把决定做完了

自带那套跑在你的会员名单上。Ghost 写得很直白:留言只对已登录的会员开放。开关在 Settings > Membership > Access,点 Edit,能选的是 All members 和 Paid-members only。没有给匿名读者留的第三项,而 Ghost 自己的帮助文档也把这扇门关上了,需要匿名留言的话,它让你去看第三方集成。

当评论区本身就是人们付费买的东西的一部分时,这道门是功能,不是缺陷。订阅者在付费长文下面互相较劲是个好房间,要求登录正好把这个房间守住。放到开放博客上,同一道门就反过来了。有人从某个聚合站点跳进你那篇跑分文章,想告诉你数字不对,他不会为这一句话去注册。评论区一直空着,你得出的结论是没人看。

按你的流量挑一套

Ghost 自带评论BootSignal 评论
谁能留言你站点的会员,而且已登录。匿名留言不支持。任何有 Google 账号的人。不必是你站点的会员。
在哪里打开Settings > Membership > Access,设为 All members 或 Paid-members onlyCode Injection 里一个加载器,加上一个挂载 <div>
对主题的要求一个跟得上版本的官方主题,或者在自定义主题的博文模板里加上 {{comments}}没有。<div> 粘在哪里就画在哪里。
管理在 Ghost 后台隐藏、恢复、置顶,带筛选和全文搜索在 BootSignal 控制台删掉一条评论,或者封掉写它的人
数据在谁那里你自己的 Ghost 站点BootSignal,挂在你登记的域名下
花费Community comments 在每个 Ghost(Pro) 档位都标着包含按登记域名每月 $20 或每年 $200,全部小部件包含
做决定的是第一行。剩下的都是哪边都能将就的细节。

有句话得说明白:Ghost 自带的管理做得好。工作人员可以隐藏和恢复评论,把某一条置顶,按博文、作者、可见范围或日期筛选,还能全文搜索。你希望说话的那批人如果已经是会员,就别去替换它。小部件是留给那批不是会员、往后也不会是的人的。

这里被档位锁住的是主题,不是脚本

Code injection 不是付费加购项。Ghost(Pro) 的方案对比表里根本没有 code injection 这一行:Site Header 和 Site Footer 两个栏位在每个档位的 Settings > Advanced 下面都在,而自建的 Ghost 压根没有档位去锁什么。Community comments 也在每个档位标着包含,所以这两套系统,哪一套都不是你为了解锁而升档的理由。

被锁住的是主题文件。Ghost(Pro) 写着自定义主题和市场主题在 Starter 上用不了,从 Publisher 起才可用,所以下面那条 post.hbs 的路,在 Ghost(Pro) 上需要 Publisher 或更高。HTML card 那条路和按篇注入那条路在任何档位都能走,自建的 Ghost 三条全开。动手之前先决定走哪一条。代码本身不变,变的只是它落在哪里。

博文上的评论区长什么样

预览

2 条评论

添加评论…
以 Alex 身份评论发布
  • M
    Maya2 小时前

    真的一行就搞定了,没想到安装这么简单!

  • J
    Jordan昨天

    连登录都是共享的,不用再额外接入。👍

div 放好之后,坐在你文章下面的就是这个。里面的评论是样例。

  1. Ghost(Pro) 和自建的起点主机名不一样

    BootSignal 控制台里填任何东西之前,先弄清读者实际到达的是哪个地址,因为 Ghost 在这里有两个答案。每个 Ghost(Pro) 站点默认自带一个免费的 ghost.io 子域名,自定义域名要之后用一条 CNAME 记录接上,所以 Pro 上的刊物通常头几周都在 yourpublication.ghost.io 上应答,等 DNS 备好了再搬家。自建的 Ghost 没有厂商子域名可以垫底:它在安装时给它的那个主机名上应答,常常是你已经在跑的营销站点旁边一个 blog. 子域名。把读者所在的那个登记上去;Pro 站点搬到一半就两个都登记,因为小部件会拿 location.hostname 和你 site id 上的清单核对,不在清单上就一声不吭。开头的 www. 在两边比较时都会被去掉,所以 www.example.com 不用单独登记,登记了主域名也就覆盖了它下面的子域名。控制台还给你的是一个 site id,Ghost Admin 接下来要的就是这串字符。

  2. 把加载器粘进 Site Footer

    在 Ghost Admin 里进 Settings > Advanced > Code Injection。Site Header 的代码输出在 <head> 里面,Site Footer 的代码输出在闭合的 </body> 标记前面,Ghost 自己的教程也让 JavaScript 走 Site Footer,这样才加载得正常。这两个栏位收的是原始 HTML,不是只收 JS,所以 <script> 标记要你自己写上。注入的代码在主题的样式和脚本之后加载,这正是你要的顺序,而标记上的 defer 让它避开解析和首屏渲染。一份刊物有一个加载器就够了,以后再挂的都是标记,不是第二次请求。

    代码
    <script src="https://bootsignal.com/bootsignal.js"
            data-site-id="YOUR_SITE_ID" data-lang="zh-cn" defer></script>

挂载 div 能去的三个位置

Code injection 只能往 <head> 里面或者 </body> 紧前面写字,这一条约束就把这一节决定了。挂载 div 掉进 Site Footer,评论区会画在页面最底下、你站点页脚的下面,而且首页、标签页和作者归档页上也都有,因为全站注入在每一个页面上都触发。所以加载器走 code injection,div 去一个对位置有主见的地方。

HTML card,一次管一篇

在编辑器里点 + 按钮,或者在新的一行敲 /,选 HTML card,把 div 粘进去。Ghost 把 HTML card 写作嵌入外部内容和接第三方工具的地方,它自己的 Typeform 集成用的就是这一手。卡片坐在博文正文的流里,所以评论区落在你最后一段下面,而不是站点页脚下面。

HTML card 里的内容
<div data-bootsignal="comments" data-thread-id="my-post-slug"></div>

post.hbs,所有博文同一个位置

Ghost 官方的 Disqus 集成文档就是可以照抄的样板,搬到这里一个字都不用改:把 div 放进 post.hbs 正文后面,官方主题的话,删掉 {{#if comments}} 块,把 {{comments}} helper 换成你的标记。然后把改好的主题上传并重启 Ghost,或者点 Edit code 进到浏览器里的主题编辑器做同样的修改。需要自定义主题权限的就是这一条,所以在 Ghost(Pro) Starter 上它是关着的。

post.hbs
{{!-- post.hbs, where {{comments}} used to be --}}
<div data-bootsignal="comments" data-thread-id="{{slug}}"></div>

按篇 code injection,只给一个页面用

每篇博文在编辑器侧栏里都有自己的 Code Injection 一节,Header 和 Footer 两个栏位分开,只作用于那一篇,这是 Ghost 1.5 带来的。位置规则一样,所以评论区落在页面最底下而不是文章下面:放在落地页上没问题,放在博客文章上就不对。想不碰主题、只给一个页面加评论区时,才拿它出来。

给每篇博文各自的 thread id

data-thread-id 属性把这一页的评论和那一页的分开。小部件认的是这个值,不是 URL,所以带着同一个值的两篇博文共用一段对话,而值一变的博文看上去就像把评论弄丢了。在 HTML card 里,这个值你手打就行,反正你已经在那一篇里面了。在 post.hbs 里你处在博文的上下文中,把博文自己的 slug 打进属性,改一次模板,每篇文章就都有了自己的评论区。

slug 的坑是改名。已发布博文的 URL 一改,会话键跟着走,所以你要是经常回头改标题,就把属性绑到一个永远不动的值上,比如博文 id。不是每个小部件都要这个值:评论、评分、投票、留言板、点赞、表情、浏览量、邮件订阅和反馈收会话 id,而阅读进度条或者目录,没有什么要按页面存的东西。

两个评论框,多了一个

所有官方 Ghost 主题默认都支持会员评论,所以只要留言功能开着,同一篇文章下面就可能叠着自带评论区和你的小部件。挑一个。在 Settings > Membership > Access 把自带评论关掉最快,而且任何档位都能做。自定义主题的话,也可以改成从博文模板里删掉 {{#if comments}} 块,这跟 Disqus 那份样板要求的是同一处修改。在用不了自定义主题的 Starter 上,设置里的开关是你手上唯一的把手。

两套一起跑,有一种情况说得通:付费文章下面留会员专属回复,免费文章下面放公开评论区。Ghost 的 HTML card 和 code injection 都是按篇生效的,这种分法不需要把主题分叉。

我们这边收多少

评论包含在 BootSignal 订阅里:按登记域名 每月 $20 或每年 $200,34 个付费小部件全都算在内,没有一项随流量增长。下个月加一条阅读进度条,账单不变,你订阅之后才发布的小部件也一起进来。多余的域名从控制台另外买,如果搬家之后你还把 ghost.io 地址和自定义域名一起登记着,这一条值得记住。细节在价格页上,对比专区则把托管评论系统互相摆在一起比。

给 Ghost 博客加上公开评论

Site Footer 一行,HTML card 里一个 div。

长篇 Ghost 文章配得上的另外两个小部件

这两个在那种本来就会招来评论的长文里才显出价值,挂法跟评论区一模一样:博文里的一个 HTML card,或者模板里的一行。两个都不收会话 id,也都不增加请求,因为 Site Footer 里的加载器已经在页面上了。

预览

阅读进度:一条细窄的条,随着访客往长文下面走而填满。

预览
☰ 目录
快速开始配置常见问题

目录,用你自己的标题生成,正在读的那一节会亮起来。

挂载元素,不需要会话 id
<div data-bootsignal="reading"></div>
<div data-bootsignal="toc"></div>

Ghost 安装安静下来的六种样子

  • 哪儿都没画出东西:你看的是编辑器,不是已发布的页面。更新博文,再打开线上 URL。
  • yoursite.ghost.io 上有、在自定义域名上没有,或者反过来:小部件先看 location.hostname,每一个主机名都得单独登记到你的 site id 上。
  • 你看得见评论区,登出的读者看不见:查 HTML card 上的眼睛图标。带会员限制的卡片对公开访客整个隐藏。
  • 两篇博文显示同一批评论:它们共用了一个 data-thread-id。给每篇各自的值,或者在模板里把属性绑到博文 slug 上。
  • 评论区画在页面最底下、页脚下面:div 进了 code injection 栏位,而那个栏位只能写在 </body> 前面。把它挪进 HTML card 或者 post.hbs
  • 评论加载得出来,却没人能发:回复框要 Google 登录,这个登录由该域名上所有 BootSignal 小部件共用。

常见问题

要买 Ghost 的付费方案才能装评论插件吗?
不用。Ghost(Pro) 的方案对比表里没有 code injection 这一行,所以 Settings > Advanced 下面的 Site Header 和 Site Footer 栏位在每个档位都有,Starter 也有,自建的 Ghost 更是完全没有档位这回事。被锁住的只有改 post.hbs 那一条,因为自定义主题和市场主题写着在 Starter 上不可用。在那个档位上,改用 HTML card 或者按篇 code injection 来挂。
Ghost 的 page 上也能放评论区,不只是 post 吗?
能。HTML card 在 page 里和在 post 里表现一样,所以一个关于页面或者更新日志下面的评论区,除了自己的 data-thread-id 之外不需要别的。搬不过去的是模板那一条:post.hbs 画的是 post,page 从它自己的模板文件出来,所以两边都要,就得用卡片一个个手挂,或者在 page 模板里把同样的修改再做一遍。Ghost 把自带评论写成 post 层面的功能,也从没说过它在 page 上画不画得出来,所以这一处反倒是小部件更好预测。
我的文章也会作为邮件通讯发出去,订阅者能在邮件里看到评论区吗?
看不到,而且没有哪个小部件能改变这一点。邮件客户端不跑 JavaScript,所以挂载 div 到达时是一段什么都不做的标记,加载器根本不会执行,不管 Ghost 往邮件正文里塞了什么。对话只存在于文章的网页版。要是你的读者大多在收件箱里读,那正是选 HTML card 那一条的理由:在卡片正上方放一句话,告诉从邮件过来的读者,想回复就到浏览器里打开这篇。
Ghost 会员评论和公开小部件,能不能同时留着?
技术上可以,而且在官方主题上,你不插手的话,同一篇文章下面会画出两个评论区。真正好用的做法是按篇分:付费文章保留自带的会员评论,免费文章用 HTML card 放进小部件。要是到处只想留一套,就到 Settings > Membership > Access 把自带留言关掉。
读者要先成为我站点的会员才能留言吗?
小部件这边不用。他们用 Google 登录,而这个登录由你域名上每一个 BootSignal 小部件共用。Ghost 自带评论正好相反:先要会员身份,再要登录,第一次发言时还会问名字和专长。
换了主题之后评论区不见了,评论也跟着走了吗?
没有。评论是按 data-thread-id 的值存下来的,跟主题无关,所以一个没有挂载 div 的新主题只是把评论区藏起来,一个字都没动。用同样的值把 div 放回去,整段对话就都回来了。这也是在你在意的文章上更推荐 HTML card 的实际理由:卡片标记是博文的一部分,换主题它还在,而 post.hbs 的修改属于主题文件,不会跟着你新选的主题走。
别人写下的内容,我在哪里管?
在 BootSignal 控制台,可以删掉一条评论或者封掉写它的人。要是你正拿它跟留在自带那套比:Ghost 后台给的是隐藏和恢复、置顶、按博文和作者和可见范围与日期做筛选,以及对评论正文的全文搜索。
登记你的 Ghost 域名

登记之后拿到的 site id,就是要填进 Site Footer 那段代码里的。

数据来源