Ghost 支持一次性登录码

在 Ghost 中,会员登录一直都是无密码的。我们不会要求读者记住另一个密码,而是向他们发送一个安全的链接,让他们立即登录。

ghost-member-otc-l

在 Ghost 中,会员登录一直都是无密码的。我们不会要求读者记住另一个密码,而是向他们发送一个安全的链接,让他们立即登录。

该系统不会消失,但我们收到反馈,有时魔法链接可能会有点麻烦,尤其是在移动设备上,因为应用内浏览器并不总是能很好地工作。

所以今天我们新增了一个选项:一次性代码。

现在,会员登录时会收到一个魔法链接和一个一次性验证码。他们可以选择更方便的方式——像往常一样一键登录,或者直接在登录页面输入验证码。

Ghost 中的自定义登录表单同时支持魔法链接身份验证和一次性代码默认情况下,登录表单会向会员的电子邮件地址发送一个验证链接。要同时包含一次性验证码选项,请将以下属性添加到表单元素中:data-members-otc="true"例子

<span class="line"><form data-members-form="signin" data-members-otc="true"></span>
<span class="line">  <input data-members-email type="email" required="true" placeholder="jamie@example.com" /></span>
<span class="line">  <button type="submit">Sign in</button></span>
<span class="line"></form></span>

如果data-members-otc="true"存在,表单成功提交后,将通过门户网站显示一个模态框,无需自定义处理,即可让用户直接输入一次性代码。这样一来,会员可以选择最适合自己的登录方式——通过电子邮件一键登录,或者手动输入代码登录。

退出登录

使用数据属性创建退出按钮或链接,让会员可以选择退出您的网站data-members-signout

<span class="line"><a href="javascript:" data-members-signout>Sign out</a></span>

将该对象与注销按钮结合使用@member,可以在成员注销时显示登录链接,在成员登录时显示注销链接。

<span class="line">{{#if @member}}</span>
<span class="line">  <a href="javascript:" data-members-signout>Sign out</a></span>
<span class="line">{{else}}</span>
<span class="line">  <form data-members-form="signin"></span>
<span class="line">    <input data-members-email type="email" required="true"/></span>
<span class="line">    <button type="submit">Sign in</button></span>
<span class="line">  </form></span>
<span class="line">{{/if}}</span>

内容可见性

控制会员如何访问您网站上的内容,以及作为登录会员他们可以阅读哪些完整内容。

内容

所有登录您网站的成员都拥有一个访问级别。相应地,所有帖子都有一个visibility与之对应的设置content此设置应用于管理界面,作为每篇文章的访问权限级别。

使用权

access是一个变量,用于计算查看帖子的成员的访问级别以及应用于帖子的访问级别设置。如果成员的访问级别与帖子的访问级别匹配或更高,则返回 true;如果不匹配,则access返回 false 。truefalse

<span class="line">{{#post}}</span>
<span class="line">  <h1>{{title}}</h1></span>

<span class="line">  {{#if access}}</span>
<span class="line">    <p>Thanks for being a member...</p></span>
<span class="line">  {{else}}</span>
<span class="line">    <p>You need to become a member in order to read this post... </p></span>
<span class="line">  {{/if}}</span>

<span class="line">  {{content}}</span>
<span class="line">{{/post}}</span>

默认 CTA

借助此{{content}}辅助功能,无法访问特定文章(由文章access属性决定)的访客将在内容区域看到默认的行动号召按钮,提示用户升级订阅。该按钮与文章内容中的免费公开预览功能配合使用,会在免费预览结束后显示。

2d462c05-content-cta_hu3d640371aa932b7b360881a3df965f9b_54918_1462x0_resize_q100_h2_box_3

./partials/content-cta.hbs您可以通过在主题中提供模板文件来覆盖默认的 CTA。Ghost提供的默认内容 CTA可作为参考。

@member物体

@member对象可用于根据成员的访问级别确定主题中的哪些内容对外显示。这是通过以下#if语句实现的:

<span class="line">{{#if @member}}</span>
<span class="line">  <p>Thanks for becoming a member 🎉</p></span>
<span class="line">{{else}}</span>
<span class="line">  <p>You should totally sign up... 🖋</p></span>
<span class="line">{{/if}}</span>

此功能@member.paid允许您向拥有有效付费订阅的会员展示不同的内容。

<span class="line">{{#if @member.paid}}</span>
<span class="line">  <p>Thanks for becoming a paying member 🎉</p></span>
<span class="line">{{/if}}</span>

@member.paid对于处于“有效”、“试用”、“未付款”和“逾期”状态的活跃订阅会员,系统将进行退款true。要取消付款失败会员的访问权限,请更新您的Stripe 设置,以便在所有付款尝试失败后自动取消订阅。这两个布尔值可以一起使用,以便针对特定受众群体自定义主题内的用户界面和消息:

<span class="line">{{#if @member.paid}}</span>
<span class="line">  <p>Thanks for becoming a paying member 🎉</p></span>
<span class="line">{{else if @member}}</span>
<span class="line">  <p>Thanks for being a member 🙌</p></span>
<span class="line">{{else}}</span>
<span class="line">  <p>You should totally sign up... 🖋</p></span>
<span class="line">{{/if}}</span>

能见度

visibility属性相对于文章或页面而言是有用的,可以根据查看者状态为模板提供额外的属性信息。visibility它有 3 个可能的值:publicmemberspaid

<span class="line"><article class="post post-access-{{visibility}}"></span>
<span class="line">  <h1>{{title}}</h1></span>
<span class="line">  {{content}}</span>
<span class="line"></article></span>

例如,可以在文章标题旁边显示特定图标:

<span class="line"><h1></span>
<span class="line">  {{title}}</span>
<span class="line">  <svg></span>
<span class="line">    <use xlink:href="#icon-{{visibility}}"></use></span>
<span class="line">  </svg></span>
<span class="line"></h1></span>

visibility在帖子中

默认情况下,所有帖子(包括设置为members-only或 的帖子paid-members only)都会出现在帖子存档中,除非在辅助visibility函数中包含该参数#foreach

<span class="line">{{#foreach visibility="paid"}}</span>
<span class="line">  <article></span>
<span class="line">    <h2><a href="{{url}}">{{title}}</a></h2></span>
<span class="line">  </article></span>
<span class="line">{{/foreach}}</span>

帖子内容仍然会根据登录会员的访问权限级别进行限制。

visibility#has

结合#has辅助函数使用可见性标志可以实现不同public文章memberspaid帖子之间的更独特的样式。例如:

<span class="line">{{#foreach posts}}</span> <span class="line"> <article></span> <span class="line"> {{#has visibility="paid"}}</span> <span class="line"> <span class="premium-label">Premium</span></span> <span class="line"> {{/has}}</span> <span class="line"> <h2><a href="{{url}}">{{title}}</a></h2></span> <span class="line"> </article></span> <span class="line">{{/foreach}}</span>

结账按钮

通过 Stripe 将您的会员网站转变为一家提供付费订阅服务的企业,按月或按年提供付费内容。

订阅计划

目前会员等级分为两种方案:月度方案和年度方案。了解如何连接 Stripe 账户Stripe 配置完成后,可以通过添加data-portal指向套餐月费或年费价格的按钮,将访客引导至预先填写了所选套餐的 Stripe 付款表单。套餐月费/年费的数据属性可以从管理 URL 的门户设置中获取/ghost/#/settings/members?showPortalSettings=true

<span class="line"><a href="javascript:" data-portal="signup/TIER_ID/monthly">Monthly plan</a></span>

<span class="line"><a href="javascript:" data-portal="signup/TIER_ID/yearly">Yearly plan</a></span>

会员个人资料页面

在 Ghost 主题中,可以公开成员信息,以便成员在登录时管理自己的订阅或更新其详细信息。

4f101771-theme-account-example_hua1cc91f659d30ed537e78ceeee649a6e_60374_800x0_resize_q100_h2_box_3

成员属性

@member对象具有一系列属性,这些属性公开了创建会员个人资料页面所需的信息:

  • @member– 成员对象,判断true查看false者是否为成员。
  • @member.paid–会员的付款状态、退款情况truefalse会员是否拥有有效的付费订阅
  • @member.email–成员的电子邮件地址
  • @member.name– 成员的全名
  • @member.firstname– 成员的名字(成员全名中第一个空格字符之前的所有内容)
  • @member.uuid– 用于成员的唯一标识符,以便进行分析跟踪,例如 Google Tag Manager。

会员订阅

也可以使用来自 Stripe 的数据来检索和公开有关成员订阅的信息@member.subscriptions成员可以拥有多个订阅,以数组形式提供。订阅数据可以通过以下方式公开#foreach

<span class="line">{{#foreach @member.subscriptions}}</span>

<span class="line">  <p>Name: <strong>{{customer.name}}</strong></p></span>

<span class="line">  <p>Plan type: <strong>{{plan.nickname}}</strong></p></span>

<span class="line">  <p>Status: <strong>{{status}}</strong></p></span>

<span class="line">{{/foreach}}</span>

订阅属性

订阅数据来自 Stripe,因此需要一个已关联到 Ghost 的有效 Stripe 账户。在本地环境中使用订阅数据需要Stripe CLI 工具

  • id订阅的 Stripe ID
  • avatar_image— 客户的头像图片,从Gravatar获取。如果客户的电子邮件未设置头像,png则默认返回透明背景的图片。
  • customer.id– 客户的 Stripe ID
  • customer.name– Stripe 中的客户名称
  • customer.email– Stripe 中客户的电子邮件地址
  • plan.id– 套餐的 Stripe ID
  • plan.nickname– Stripe 为该计划起的昵称(目前只有“月付”或“年付”)
  • plan.interval– Stripe 计划的付款周期(目前仅支持“月”或“年”)
  • plan.currency–该计划的货币代码(ISO货币代码)
  • plan.amount– Stripe 套餐金额以最小货币单位表示(例如,5 美元将表示为“500”美分)
  • status– 订阅状态​​(可以是以下几种之一:“有效”、“试用”、“未付费”、“逾期”、“已取消”)
  • start_date–订阅首次开始的日期可以与{{date}}辅助函数一起使用
  • default_payment_card_last4用于支付订阅费用的银行卡的后四位数字
  • current_period_end– 订阅费用已支付的日期可以与{{date}}助手一起使用

会员账户编辑

会员可能需要更新账单信息。会员无需联系网站所有者,只需点击一个按钮即可跳转到更新页面:

<span class="line"><a href="javascript:" data-members-edit-billing>Edit billing info</a></span>

还可以使用其他属性,在会员更新账单信息或取消订阅时,将他们定向到不同的 URL:

<span class="line"><a href="javascript:"</span>
<span class="line">  data-members-edit-billing</span>
<span class="line">  data-members-success="/billing-update-success/"</span>
<span class="line">  data-members-cancel="/billing-update-cancel/"</span>
<span class="line">>Edit billing info</a></span>

助手price

{{price}}辅助函数可将货币值从最小面额格式化为人类可读的货币单位。它最适用于订阅计划,例如格式化 Stripe 计划金额(见plan.amount上文)或输出不同等级的价格。示例:

<span class="line">{{price plan}}</span>

这将输出$5{{price}}辅助工具提供了许多选项,详细文档请参见此处

{{cancel_link}}辅助程序旨在输出用于取消或继续订阅的链接,以便您的成员可以管理自己的订阅。该辅助函数封装了取消有效订阅或在先前取消订阅后继续订阅所需的所有内部功能。必须在特定上下文中使用该辅助函数@member.subscriptions,例如:

<span class="line"><!-- Usage Context --></span>

<span class="line">{{#foreach @member.subscriptions}} {{cancel_link}} {{/foreach}}</span>

这段代码生成的HTML标记如下所示:

<span class="line"><!-- Generated HTML --></span>

<span class="line"><a class="gh-subscription-cancel" data-members-cancel-subscription="sub_*****" href="javascript:"></span>
<span class="line">    Cancel subscription</span>
<span class="line"></a></span>
<span class="line"><span class="gh-error gh-error-subscription-cancel" data-members-error><!-- error message will appear here --></span></span>

{{cancel_link}}辅助函数接受多个可选属性:

  • class- 默认值gh-subscription-cancel
  • errorClass- 默认值gh-error gh-error-subscription-cancel
  • cancelLabel- 默认值Cancel subscription
  • continueLabel- 默认值Continue subscription

以下示例展示了如何使用该辅助函数及其所有属性:

<span class="line"><!-- Usage --></span>

<span class="line">{{cancel_link</span>
<span class="line">  class="cancel-link"</span>
<span class="line">  errorClass="cancel-error"</span>
<span class="line">  cancelLabel="Cancel!"</span>
<span class="line">  continueLabel="Continue!"</span>
<span class="line">}}</span>

这将为之前已取消的订阅生成以下 HTML 代码:

<span class="line"><!-- Generated HTML --></span>

<span class="line"><a class="cancel-link" data-members-continue-subscription="sub_*****" href="javascript:"></span>
<span class="line">    Continue!</span>
<span class="line"></a></span>
<span class="line"><span class="cancel-error" data-members-error><!-- error message will appear here --></span></span>

以下是在account.hbs文件中{{cancel_link}},会员功能主题Lyra中使用该助手的示例。它在一个{{#foreach @member.subscriptions}}循环中使用,该循环为辅助函数提供生成适当链接所需的上下文,并且被显示给成员的其他有用信息包围。

<span class="line"><!-- account.hbs --></span>

<span class="line">{{#foreach @member.subscriptions}}</span>
<span class="line">  <div class="subscription"></span>
<span class="line">    {{#if cancel_at_period_end}}</span>
<span class="line">      <p></span>
<span class="line">        <strong class="subscription-expiration-warning">Your subscription will expire on {{date current_period_end format="DD MMM YYYY"}}.</strong> If you change your mind in the mean time you can turn auto-renew back on to continue your subscription.</span>
<span class="line">      </p></span>
<span class="line">    {{else}}</span>
<span class="line">      <p></span>
<span class="line">        Hey! You have an active {{@site.title}} account with access to all areas. Get in touch if have any problems or need some help getting things updated, and thanks for subscribing.</span>
<span class="line">      </p></span>
<span class="line">    {{/if}}</span>
<span class="line">    <div class="subscriber-details"></span>
<span class="line">      <div class="subscriber-detail"></span>
<span class="line">        <label class="subscriber-detail-label">Email address</label></span>
<span class="line">        <span class="subscriber-detail-content">{{@member.email}}</span></span>
<span class="line">      </div></span>
<span class="line">      <div class="subscriber-detail"></span>
<span class="line">        <label class="subscriber-detail-label">Your plan</label></span>
<span class="line">        <span class="subscriber-detail-content">{{price plan}}/{{plan.interval}}</span></span>
<span class="line">      </div></span>
<span class="line">      <div class="subscriber-detail"></span>
<span class="line">        <label class="subscriber-detail-label">Card</label></span>
<span class="line">        <span class="subscriber-detail-content">**** **** **** {{default_payment_card_last4}}</span></span>
<span class="line">      </div></span>
<span class="line">      <div class="subscriber-detail"></span>
<span class="line">        <label class="subscriber-detail-label"></span>
<span class="line">          {{#if cancel_at_period_end}}</span>
<span class="line">            Expires</span>
<span class="line">          {{else}}</span>
<span class="line">            Next bill date</span>
<span class="line">          {{/if}}</span>
<span class="line">        </label></span>
<span class="line">        <span class="subscriber-detail-content">{{date current_period_end format="DD MMM YYYY"}}</span></span>
<span class="line">      </div></span>
<span class="line">    </div></span>
<span class="line">    {{cancel_link}}</span>
<span class="line">  </div></span>
<span class="line">{{/foreach}}</span>
订阅评论
提醒
guest的头像

0 评论
内联反馈
查看所有评论
0
希望看到您的想法,请您发表评论x