Announcement Title

  • Your first announcement to every user on the forum.
Resource icon

入门storyblok

内容制作通常需要工作流程来确保每个团队成员都参与创建故事的过程。Storyblok 允许您定义自己的自定义工作流程和规则来控制此流程的流程。我们为您提供各种级别的内容创作,从免费计划中提供的基本内容到团队和企业计划中提供的带有 Webhook 的自定义工作流程。

基本工作流程​

免费计划提供此级别的内容创作,并提供具有预定义设置的三个基本阶段。默认情况下,所有故事在创建后都将设置为“未定义”工作流程阶段。如果您想利用工作流程的优势,则必须手动将工作流程阶段更改为“起草” 。接下来,您将被迫遵循审核阶段到最终的准备发布阶段的流程,在该阶段您可以发布您的故事。
暗示:
基本工作流程中所有阶段的设置都已预定义,并且可以在更高的计划中进行更改,您可以在其中创建自己的工作流程阶段并定义自己的一组规则/设置。
工作流程阶段描述
未定义/未定义在免费计划或删除已使用的工作流程阶段的情况下,故事的阶段将更改为未定义的阶段。
起草如果启用了内容创作,则故事的初始状态。在此阶段,用户正在编写故事的草稿版本,不允许发布。
审阅故事被发送给一名或多名审阅者(空间的用户)进行审阅。
准备发布故事已准备好发布,该空间的任何用户都可以发布它。
您可以使用网络钩子,当故事的阶段发生变化时,它总是会被触发。发送到 webhook URL 的请求正文将类似于以下 JSON 对象:
{
"action": "workflow_stage_changed",
"text": "The workflow stage of story {Name of the Story} has been changed to {Name of the new stage}.",
"story_id": 12345678, // ID of the Story
"workflow_stage_name": "Reviewing", // Name of the new workflow stage
"space_id": 123456 // ID of the space
}
暗示:
您可以使用 RequestBin.com 服务轻松检查发送到 Webhook URL 的请求正文。请阅读本文了解更多相关信息。

如何改变故事的舞台​

您可以通过以下步骤在 Storyblok 应用程序的可视化编辑器中更改故事的阶段:
  1. 在可视化编辑器中打开故事
  2. 单击“内容视图”右侧的“将选项卡更改为状态”
  3. 单击阶段名称旁边的“更改”按钮/链接

如何改变故事的舞台​

您可以通过以下步骤在 Storyblok 应用程序的可视化编辑器中更改故事的阶段:
  1. 在可视化编辑器中打开故事
  2. 单击工作流程阶段{1}链接。
  3. 从列表{2}中选择所需的阶段。
  4. 您可以将此新阶段分配给特定用户{3}或角色{4}
  5. 单击“保存”按钮{5}。
您可以在更改阶段时发表评论,也可以通过电子邮件通知用户此操作。
有关如何更改故事的工作流程阶段的带注释的屏幕截图



暗示:
您还可以使用管理 API 更改故事的阶段。请阅读 MAPI -工作流程阶段更改的文档了解更多信息。

如何考察故事的舞台​

您可以在可视化编辑器内的“工作流程阶段”菜单中看到故事的当前阶段。您还可以使用“内容”部分中的过滤器来过滤所选阶段的所有故事。

自定义工作流程​

必需的:
自定义工作流程可在团队和企业计划中使用。
使用自定义工作流程功能,您可以定义自己的内容创作流程。您可以创建多个工作流程阶段并定义它们的规则和顺序。

创造新舞台​

您可以在“工作流程”选项卡的“设置”部分中通过定义其名称和颜色来创建新阶段。
如何创建新工作流程阶段的屏幕截图

暗示:
您可以使用管理 API 创建和管理自定义工作流程阶段。请阅读管理 API 文档了解更多信息。

工作流程阶段的定制​

通过单击与阶段名称同一行的齿轮图标来实现阶段的设置。
如何自定义工作流程阶段的屏幕截图

您可以设置工作流程阶段的以下属性:
财产描述
艺名用于识别阶段的标签。
颜色代表舞台的颜色的 RGB 代码。
定义为新项目的默认阶段如果处于活动状态,所有新故事都将在此阶段内创建。
出版权如果处于活动状态,您可以选择允许您发布故事的阶段列表。
下一个可用阶段如果处于活动状态,您可以指定可用作当前阶段的下一个阶段的阶段列表。
可以将阶段更改为下一个可用阶段的用户/角色指定的用户或角色列表,允许他们将阶段从当前阶段更改为下一个允许的阶段之一。
警告:
您可以通过单击工作流程阶段行末尾的垃圾桶图标来删除工作流程阶段。在这种情况下,所有故事的阶段(已删除阶段)将移至未定义阶段。

赞同​

当您更改故事的工作流程阶段时,您可以分配用户、角色和多角色用户来批准更改并将故事移至下一阶段。通过在可视化编辑器的“工作流程阶段”选项中选择更改阶段的用户/角色来执行此操作。
显示如何将用户或角色分配到工作流程阶段的屏幕截图

如果您激活通过电子邮件通知用户复选框,Storyblok 将通过电子邮件通知分配给故事的用户。否则,分配的用户将只能在仪表板的“分配给我”部分找到通知。在本指南的“了解 UI”一章中了解有关仪表板的更多信息。
暗示:
您可以在审批流程中分配多个用户/角色。
您可以在阶段设置中限制有权更改每个阶段的用户列表。请阅读“工作流程阶段的定制章了解更多信息。

评论和讨论​

Storyblok 提供了对每个故事进行评论的可能性。您可以留下注释供以后使用,或者与共同编辑开始讨论。
您可以随时留下与故事的任何块或领域相关的新评论,只需点击可视化编辑器内的开始讨论 {1}按钮即可。您还可以通过输入“@”+他们的名字来标记该空间的其他用户。可以将多个评论添加到同一讨论中,以便在内容创建过程中与其他人协作。当编辑者在讨论或评论中被标记时,他们会收到一封电子邮件通知,其中包含评论页面和空间的链接。
如果您想查看与特定故事相关的所有讨论,可以单击可视化编辑器顶部的讨论{2}链接。
有关如何开始故事讨论的带注释的屏幕截图


日程内容​

内容规划被认为是任何 CMS 的主要功能之一。因此,Storyblok 提供了多种方法来安排多个级别的内容。基本方法是为此目的定义一个特殊的日期/时间字段,更复杂的方法是使用发布应用程序,您可以在其中安排一组内容。

使用日期/时间字段安排内容​

在这种方法中,您将定义一个字段,用于在生成网站/应用程序时过滤 API 结果。为此,您需要在要计划的内容类型的架构中定义一个名为“已计划” 、类型为“日期/时间”的字段。然后,该字段可用于过滤 API 请求中的故事列表。使用过滤器查询lt-date和gt-dateStoryblok Delivery API 来获取已发布的故事。您可以在我们的Delivery API 文档中找到此方法的示例。
暗示:
这种方法不依赖于任何定价计划,其复杂性取决于您需要涵盖的解决方案。

发布应用程序​

发布应用程序旨在用于更高级的工作流程,并允许您创建/计划包含一系列内容更改的发布,然后可以经历不同的审批阶段。
想象一下,您想要在故事中准备一组特定更改并在三周内发布它们。为此,您可以创建一个版本来保存您的更改。您可以指定发布版本的日期时间,也可以手动触发发布。
必需的:
Releases 是一款可用于 Teams 计划的应用程序,并且任何其他应用程序都必须安装在App Store中。

如何创建版本​

在 Storyblok UI 的内容部分中,单击+ 新版本{1} 按钮。在下面的覆盖窗口中填写版本名称{2}以及可选的发布日期和时间{3}。您以后随时可以更改这些详细信息。
有关如何创建新版本的带注释的屏幕截图


单击“创建” {4}按钮后,内容树顶部会显示一个包含版本名称的新选项卡。在此选项卡中,您将看到为此版本所做的所有更改和创建的内容。
学习:
如果您想更改版本的名称、发布日期或任何其他设置,请单击选项卡内版本名称旁边的三个点按钮。

如何编辑版本中的内容​

在 Storyblok UI 的内容部分中,切换到代表要添加更改的版本的选项卡。默认情况下,您将看到所有故事 - 不仅是此版本中更改的故事。如果您只想查看在此版本中创建或编辑的故事,您可以选中仅显示版本内容选项。
如何编辑版本的屏幕截图

要编辑此版本中的任何故事,请在可视化编辑器中打开它并应用您的更改。完成编辑后,您可以使用“保存并计划”按钮保存更改。
有关如何在版本中编辑故事的屏幕截图

如何合并版本的更改​

您可以通过计划发布时间自动发布主(当前)内容的计划更改,也可以通过单击“立即发布”按钮手动发布。如果计划了任何发布日期时间,您将在发布选项卡中内容上方的框中看到它。
有关如何合并版本中的更改的屏幕截图

如何设置版本预览​

可以使用草稿令牌并附加带有版本 ID 的参数从Content Delivery API访问版本的内容。from_release在下面的示例中,您可以看到如何获取草稿版本中id 为29的《家的故事》。
我们建议使用 Storyblok UI 和可视化编辑器中的预览选项卡功能预览发布的内容。如果您需要涵盖需要编程方法的特殊情况,您可以使用Management API从您的空间获取所有版本的完整列表。
学习:
查看此常见问题解答,了解如何从发布中访问故事的编辑版本。

安排故事的一部分​

如果您只想在短时间内发布故事的一部分,请考虑创建一个带有日期时间字段的包装器组件,该字段定义此内容公开可用的时间段。您可以在根据 Vue.js 中的日期渲染动态组件一文中了解有关此方法的更多信息。

管道​

借助 Storyblok 的管道,阶段可以在您的空间中定义严格的内容暂存工作流程。如果您想创建可靠的生产环境,这一点至关重要。您可以定义多个阶段,每个阶段都有自己的内容 API 访问令牌,以便在上线之前进行预览和测试。
Storyblok 管道

警告:
不要将管道阶段与 Git 分支功能混淆。这是一个非常误导性的比较!

术语的定义​

为了更好地理解管道和管道阶段的功能,您应该首先了解本节的术语。请查看下面的定义表:
学期定义
管道每个空间只能有一条管道,并且每条管道至少由 2 级组成。只有第一个阶段(称为“预览”阶段)是可编辑的。
管道阶段管道阶段包含冻结内容,除“预览”阶段外,该阶段的内容不可编辑。Pipeline Stage 的主要功能是预览冻结的内容。
“预览”阶段这是默认的管道阶段。可以编辑该阶段的内容并将其部署到一个或多个管道阶段。

安装​

您将在Apps 目录中找到 Pipeline 应用程序,并可以通过单击“安装”按钮来安装它。安装完成后,您将注意到 Storyblok UI 内容区域的变化以及 Storyblok 空间设置中的附加选项。

新管道阶段的定义​

管道阶段的设置可在您空间的“管道” {1}选项卡下的“设置”中找到。您可以创建、编辑和删除除预览阶段之外的所有自定义管道阶段。可以通过定义阶段的名称{2}并点击添加 {3}按钮来创建新的管道阶段。
有关如何创建和编辑管道阶段的屏幕截图



要永久删除管道阶段,请单击垃圾桶{4}图标。要编辑舞台的以下设置,请单击齿轮{5}图标:
选项描述
姓名使您能够编辑管道的名称
预览网址如果该阶段的内容在可视化编辑器中打开,则覆盖可视化编辑器中使用的 URL。
同步源定义源管道阶段,(复制的)内容将从该阶段部署到该阶段。

在阶段之间部署内容​

重要的是要理解,从其定义来看,管道是处理内容的一种方式。每个阶段都定义了源阶段,或者我们可以说,原点。如果您要将内容部署到下一阶段,请选择要部署的阶段{1}。接下来,点击Deploy from source {2}按钮,系统开始部署内容
学习:
故事的 ID 在不同的管道阶段之间会发生变化。如果您想跟踪管道阶段之间的故事,请uuid改用。要了解两者之间的区别uuid,id请_uid阅读此常见问题解答
显示如何在管道的各个阶段之间部署内容的屏幕截图



学习:
管道是一种单向过程,其中内容仅在预览阶段可编辑,并在所有其他阶段冻结。

如何获取管道阶段的访问令牌​

Pipeline 应用程序为访问令牌引入了新级别的规范。有了它,您可以定义密钥的访问级别,以及您想要访问的管道。通过这种方式,您可以为每个管道阶段创建一个 API 密钥,并确保您不会更改或查看不需要的内容。
如何获取某个管道阶段的访问令牌的屏幕截图

真实世界场景​

如果您想为内容定义严格的多阶段部署工作流程,请使用管道应用程序。您尝试设计的过程应该与此类似:您的编辑和审阅者正在预览阶段创建内容。一旦完成,负责人就会将内容从预览部署到登台阶段。此过程将冻结暂存上的内容并触发预览应用程序/网站的部署。之后,您可以与公司中做出最终决定的人员共享预览链接。
如果最终决定是肯定的,则可以将内容从Staging部署到Live阶段。这将使其可供公众访问,并且生产应用程序/网站将使用新内容进行重建/重新部署。
如果最终的决定是否定的,整个过程将回到预览阶段,编辑和审稿人重新修改内容。该过程基本上又从头开始。
管道处理流程图

警告:
Pipeline 应用程序并不旨在用于测试内容的不同版本。您可以使用Releases 应用程序来实现此目的。

将管道与发布应用程序相结合​

Pipeline 应用程序是在开发时考虑到 Releases 应用程序的。您可以在内容的部署过程中选择应将哪个版本部署到该阶段。通过这种方式,您可以将未完成的版本保留在预览阶段,并在不同的管道阶段呈现未来的版本。
带有版本的插图管道

学习:
您可以在本章文档中了解有关发布应用程序的更多信息。
部署到管道阶段时如何选择版本的屏幕截图

将管道阶段与工作流程阶段相结合​

将内容部署到新管道阶段时,故事的工作流程阶段将设置为新管道阶段上的初始值。这通常意味着,如果Preview中故事的工作流程阶段已准备好发布,那么我们会将这个故事部署到Staging阶段。现在, Staging中故事的工作流程阶段将设置为工作流程的初始值。
阅读:
本章假设您已阅读内容结构并了解如何访问您的内容。
可视化编辑器使您的用户能够通过上下文预览来创建和编辑其内容,包括单击其网站中的组件的可能性。此功能是可选的,不依赖于任何特定技术。它不会改变 HTML 的结构或重新排列 DOM。可视化编辑器不会影响您的生产站点,因为它只能在 Storyblok UI 内启用。可视化编辑器不允许内联编辑;更改内容将始终在 Storyblok UI 以及您为内容类型和块定义的普通表单输入和自定义字段中完成。
  • {1}可视化编辑器 - 预览:嵌入 iFrame 中的项目。
  • {2}可视化编辑器 - 内容:右侧的块和字段。
Storyblok 可视化编辑器的屏幕截图



可视化编辑器 - 预览​

可视化编辑器预览的屏幕截图

可视化编辑器的左侧包含实际网站的 iframe,我们将其称为Preview。这不是我们将在我们端渲染的东西,它实际上是您自己的实现,托管在与 Storyblok 完全解耦的基础设施上。您可以在“可视化编辑器”选项卡下的“空间设置”中配置用于嵌入站点的位置。您可以配置多个预览 URL,这使您能够添加开发和部署环境作为预览源的选项。
当您的项目嵌入到可视化编辑器中时,full_slug您当前正在编辑的故事的 以及其他附加查询参数将被附加到预览 URL。这些参数允许您确定何时加载可视化编辑器预览的草稿内容(如果嵌入)。
暗示:
如果您在加载网站预览时遇到问题,您可能需要将ALLOW-FROM Storyblok.com添加到您的 X-Frame-Options 标头中。您可以在服务器端代码或 Web 服务器配置设置中执行此操作。
暗示:
如果您在可视化编辑器中加载网站预览时遇到问题,并且出现与内容安全策略指令相关的错误,则必须https://app.storyblok.com在内容安全策略指令中添加为框架祖先.

预览 URL 结构​

└── Preview URL │ │
└── full_slug └── additional Query Params

附加查询参数​

查询参数描述
_storyblok数字故事 ID
_storyblok_tk[space_id]空间ID
_storyblok_tk[timestamp]Unix 时间戳
_storyblok_tk[token]验证令牌。_storyblok_tk[space_id]和您的预览令牌的组合_storyblok_tk[timestamp]-使用
_storyblok_release活动版本的 id
_storyblok_lang当前选择的语言
_storyblok_c故事的内容类型

暗示:
重定向可以删除上面的 URL 参数并导致 Storyblok Bridge 未初始化。确保您没有重定向并且相应地传递了查询参数。

可视化编辑器 - 内容​

可视化编辑器内容菜单的屏幕截图

在可视化编辑器的此区域中,您和您的编辑人员可以使用您为内容类型定义的字段和块来调整和更改您的内容。

可视化编辑器预览和内容之间的桥梁​

我们创建了一个工具包,使您能够在可视化编辑器内容和预览中嵌入的项目之间建立桥梁。我们将该工具包称为 Storyblok JS Bridge。Storyblok JS Bridge 使您能够侦听诸如change、published、unpublished、input和 之类的事件enterEditmode。您可以允许您自己的 HTML 元素上的单击事件,然后这将在可视化编辑器内容区域中打开正确的 Story 和 Blok。
Storyblok Bridge 用于两个主要任务:
  1. 启用 HTML 元素上的单击事件以在可视化编辑器内容区域中打开。
  2. 侦听可视化编辑器事件以更新您的内容或触发流程。

安装 Storyblok Bridge​

Storyblok Bridge 的安装是通过在您的站点上包含脚本标签或使用我们针对特定技术的模块之一来完成的。
<script src="//app.storyblok.com/f/storyblok-v2-latest.js" type="text/javascript">
</script>
请记住,Storyblok Bridge 会增加站点的负载,因此不应包含在站点的生产版本中。
学习:
另请查看我们关于Storyblok Bridge 的综合指南。

初始化 Storyblok 桥​

一旦包含了桥的脚本,您就需要对其进行初始化。publish在此示例中,我们还添加了为每个事件重新加载 iFrame 内容的功能change。
// Initialize the Storyblok JS Bridge
const { StoryblokBridge, location } = window
const storyblokInstance = new StoryblokBridge()
storyblokInstance.on(['published', 'change'], () => {
// reload page if save or publish is clicked
location.reload(true)
})
}

在 HTML 元素上启用点击事件​

要启用将消息发送到可视化编辑器的单击事件,您必须在_editable您自己的每个 HTML 元素之前输出属性的内容。该_editable属性的内容包含每个 Story 和 Blok 的 HTML 注释。然后,Storyblok Bridge 将自动注册该 HTML 注释后面的 HTML 元素的单击事件。
示例说明
当您使用 Content Delivery API 中的 URL 参数加载一个故事时,version=draft您将收到如下响应:
{
"story": {
"id": 172223,
"content": {
"_editable": "<!--#storyblok#{\"name\": \"page\", \"space\": \"14141\", \"uid\": \"b370f32d-cd89-4dd3-9437-16b5e9746b31\", \"id\": \"172223\"}-->",
"component": "page",
"body": [
{
"_editable": "<!--#storyblok#{\"name\": \"hero\", \"space\": \"14141\", \"uid\": \"98b685a1-da10-4df2-837e-3429d5ea6f88\", \"id\": \"172223\"}-->",
"component":"hero",
"headline": "This is my headline!"
}
]
}
}
}
学习:
在访问您的内容中详细了解您的内容的不同版本。
然后,我们可以通过您选择的任何模板引擎或框架推送该数据来呈现 HTML。
{{story.content._editable}}
<div class="content-type">
{% for blok in story.content.body %}
{{blok._editable}}
<div class="blok">
{{blok.custom_field}}
</div>
{% endfor %}
</div>
暗示:
您可以使用任何您想要的模板引擎。上面的示例使用 Mustache 语法。
我们最终得到如下所示的 HTML:
<!--#storyblok#{\"name\": \"page\", \"space\": \"14141\", \"uid\": \"b370f32d-cd89-4dd3-9437-16b5e9746b31\", \"id\": \"172223\"}-->
<div class="content-type">
<!--#storyblok#{\"name\": \"hero\", \"space\": \"14141\", \"uid\": \"98b685a1-da10-4df2-837e-3429d5ea6f88\", \"id\": \"172223\"}-->
<div class="blok">
This is my headline!
</div>
</div>
模板和加载的草稿内容组合的结果是上面的 HTML,它将由浏览器加载。此时,Storyblok Bridge 将被加载并初始化。您的集成部分已经通过添加 HTML 注释完成,从现在起 Storyblok JS Bridge 将接管。
在此初始化期间,Storyblok Bridge 会查找 HTML 中的每个 HTML 注释。每个以 开头的 HTML 注释<!--#storyblok#都会被解析。然后,解析后的 JSON 将用于将两个 HTML 属性data-blok-c和data-blok-uid类添加storyblok--outline到 HTML 注释后面的 HTML 元素中。
<!--#storyblok#{\"name\": \"page\", \"space\": \"14141\", \"uid\": \"b370f32d-cd89-4dd3-9437-16b5e9746b31\", \"id\": \"172223\"}-->
<div class="content-type storyblok--outline" data-blok-c="{escapedJSONData}" data-blok-uid="b370f32d-cd89-4dd3-9437-16b5e9746b31">
<!--#storyblok#{\"name\": \"hero\", \"space\": \"14141\", \"uid\": \"98b685a1-da10-4df2-837e-3429d5ea6f88\", \"id\": \"172223\"}-->
<div class="blok storyblok--outline" data-blok-c="{escapedJSONData}" data-blok-uid="98b685a1-da10-4df2-837e-3429d5ea6f88">
This is my headline!
</div>
</div>
storyblok--outline当鼠标悬停在可视化编辑器预览中的网站上时,该类将向您的 HTML 元素添加虚线边框。单击一个 HTML 元素后,该块的名称将添加█ #09b3af彩色边框,以显示当前选择的块。
在此过程中,Storyblok Bridge 还将在 HTML 元素上注册单击事件监听器,这将在可视化编辑器内容区域中打开故事或块。

监听可视化编辑器事件​

您可以使用 Storyblok Bridge 在自己的站点上收听的事件是可视化编辑器通过桥发送的事件,以便您可以对内容更改和 UI 操作做出反应。发送到 Storyblok Bridge 的一些事件包含供您在项目中使用的有效负载。
// listen to a single event
storyblokInstance.on('event_name', (payload) => {
console.log(payload);
})
// listen to multiple events
storyblokInstances.on(['event_name_1', 'event_name_2'], (payload) => {
console.log(payload);
})
事件用法示例:更改和发布
要在每次按下“保存”
“发布”按钮时获取内容的新版本,请侦听更改和发布事件并触发重新加载。您还可以通过从 Content Delivery API 加载内容来手动更新状态。
// Listens on multiple events and does a basic website refresh
storyblokInstance.on(['change', 'published'], () => {
window.location.reload(true);
})
事件用法示例:输入
要根据可视化编辑器内容区域中的输入更改更新项目中的内容,甚至在保存内容之前,您可以使用该input事件。事件中传递的有效负载包含更新的故事,因此您可以使用它来实时更新项目内容状态。

可视化编辑器事件类型​

活动名称将会被发射
输入用户更改字段值后
改变用户保存内容后
发表用户点击发布后
未发表用户点击取消发布后
进入编辑模式编辑器在编辑模式下初始化后
自定义事件在自定义字段类型中触发自定义事件后
Storyblok 提供了一个全面的 API(应用程序编程接口),它遵循您在网络上看到的常见模式。我们提供内容交付 API、管理 API 和 GraphQL API。
我们将在本指南的这一部分中仅讨论 Content Delivery API。Content Delivery API 围绕 REST架构原则设计,支持四个基本 HTTP 动词GET、POST和PUT。DELETE响应将采用 JSON(Javascript 对象表示法)格式。

您的第一个 API 请求​

要发出有效的 API 请求,需要将 HTTP 请求发送到api.storyblok.com。如果您想尝试向 Content Delivery API 发出请求,您可以从 Web 浏览器发送 GET 请求。
GET api.storyblok.com
响应将包含一个简单的 JSON 对象,指示请求已成功处理。
{ "success" : true }
此响应不包含很多有价值的信息,但它显示了基本 API 请求的工作原理。下一步是从 Storyblok API 获取有意义的数据。

访问数据​

创建空间后,会自动添加新页面。为了展示如何使用 API 访问数据,我们将使用这个故事并打开可视化编辑器。
资产库中私有资产的列表视图


要演示 API 在不同状态下返回的内容,请查看按“已发布 JSON”按钮{1}时返回的数据。
{
"stories":[
"This record could not be found"
]
}
由于我们尚未发布内容,因此 API 无法返回任何内容。错误消息表明找不到记录,HTTP 状态代码将为 404。这个结果并不奇怪,因为内容尚未发布。仍然可以以草稿模式查看内容。要请求内容的草稿版本,请按“Draft json”按钮{2}。
{
"story": {
"name": "Home",
"slug": "home",
"full_slug": "home",
"id": 10718480,
"uuid": "74a92c75-dbb6-4cb6-8c2f-b4582017c087",
"content": {
"_uid": "c0c5fd8d-6913-4ebf-bbed-a60d5e83dc1f",
"component": "page",
"body": [
...
],
...
},
...
}
}
请求成功后,您应该会看到一个 JSON 对象,其中包含仍处于草稿模式的故事。每个故事都有相同的基本结构id,uuid其中slug,可用于直接访问故事。此示例使用slugURL 中故事的 来标识内容,但 也uuid可以正常工作。
学习:
如果您想知道 id、uuid 或 _uid 之间的区别,可以查看常见问题解答条目。
处理内容时常用的值有:
  • name用户可读的故事名称
  • content由内容类型定义的字段
学习:
可用属性的全面描述可以在Content Delivery API 文档中找到。
让我们看一下内容发布后 API 返回的内容。为此,请按“发布”按钮{3},这会更改要发布的故事的状态。现在再次按“已发布的 json”按钮{1}。浏览器将打开现在发布的内容,该内容应该与我们之前在草稿模式下查看的内容非常相似。

私募资产管理​

使用 Storyblok,您可以创建和管理私人资产。私有资产是不向公众开放且只能通过访问令牌访问的资产。
您可以在上传对话框中选择可见性,并在已上传资源的信息对话框中更改它。
您可以使用管理 API 添加上传私有资产,方法是将参数“is_private=1”添加到负载中。
图像添加为私有资产

图像添加为私有资产
您可以过滤列表视图以查看所有私有资产。
资产库中私有资产的列表视图


资产库中私有资产的列表视图
要访问私有资产,请创建资产访问令牌并使用新的资产 API 获取签名 URL。您可以在此常见问题解答条目中了解如何获取签名 URL:storyblok.com/faq/how-to-create-a-protected-download-area
学习:
在此处的现场演示中亲自尝试一下。

软件开发工具包​

我们准备了一些帮助程序和 SDK 来帮助您启动新项目。了解新 SDK 的最佳位置是我们的 GitHub 页面 ( https://github.com/storyblok )。
我们一些最受欢迎的项目:
如果这不包括您在项目中使用的编程语言,则始终可以选择直接使用相应语言的 HTTP 客户端。我们在此参考页面上汇总了如何使用不同的 HTTP 客户端。
学习:
同样值得一看的是我们的精彩列表,我们在其中为 Storyblok 收集了宝贵的资源。它包含社区贡献部分,您可以在其中找到更多 SDK 和连接器。

解释 API URL 结构​

API URL 的结构遵循符合 REST 原则的通用模式。每个条目都由其自己的 URL 表示。Content Delivery API 的 URL 由四个部分组成。查看前面示例中的 URL,它们可以分为以下部分:
│-----------------│------│-------------│------------│---------│-----
└── Base URL │ └─ Resource │ └─ token │
└─ Path └─ version └─ cache
  • 基本网址:https://api.storyblok.com/
  • 小路:/v2/cdn
  • 资源:/{stories|spaces|datasources|datasource_entries|links|tags},资源 - 参见:待定
  • 资源标识符:/{id|uuid|slug},资源的唯一标识符 - 参见:tbd
  • 参数:
    • 版本:{draft|published}已发布或草稿版本 - 请参阅:待定
    • 令牌:{preview token|public token},访问令牌 - 参见:待定
    • cv: {timestamp},缓存版本 - 请参阅:Content Delivery API 参考

使用API​

内容交付 API:故事 Storyblok 中最基本的元素之一是故事。slug可以使用,id或直接获取故事uuid。
GET /v2/cdn/stories/:)full_slug|:id|:uuid)
更多详细信息和所有参数在Content Delivery API Reference中进行了描述。

内容交付 API:链接​

链接是您内容的另一种表示形式。将其视为故事的替代格式。每个故事都由一个 uuid 表示。然后,链接格式使用 uuid 作为键来保存一个对象,该对象包含识别、加载或显示资源链接的基本信息。
GET /v2/cdn/links/
更多详细信息和所有参数在Content Delivery API Reference中进行了描述。

过滤查询​

Content Delivery API 提供了广泛的运算符并允许过滤结果。
GET /v2/cdn/stories/?filter_query\[ATTRIBUTE\]\[OPERATION\]=VALUE,…
如果您有兴趣了解有关这些过滤器功能的更多信息,或者如果您有具体的用例,我们建议您查看 Content Delivery API 参考,特别是我们为您准备的示例。

内容版本​

为了使 API 适用于不同的用例,帐户可以针对内容的草稿版本和已发布版本拥有不同的 API 令牌。
要在这些版本之间切换,您可以附加查询参数version={draft | published}并使用适当的令牌来调用内容的草稿或已发布版本。
预览令牌允许访问内容的草稿和已发布版本。这在开发期间或在将新内容部署到生产环境之前进行审查时非常有用。
一旦在公共环境中使用已发布的内容,强烈建议使用不同的(公共)令牌。公共令牌仅允许访问已发布的内容,并防止意外发布草稿内容。
要在设置区域中配置您的空间,您必须是该空间的管理员或所有者才能获得访问权限。
“设置”菜单的屏幕截图并显示“空间”选项卡

空间的设置是动态的,并将根据您空间中安装的应用程序进行调整。本章仅描述默认设置。每个应用程序文档中描述了与应用程序相关的设置。

空间​

在此选项卡下,您将找到与空间相关的常规配置。
行动描述
空间名称您可以调整空间的名称。
空间ID您可以复制空间 ID 来寻求支持。
默认内容类型您可以为您在空间中创建的故事定义默认内容类型。

订阅​

“订阅”选项卡仅适用于所有者和有权查看和更改订阅的用户。您可以选择五个计划之一或编辑/取消您的有效订阅。
故事集订阅

在“订阅”选项卡下,您可以查看当前计划的详细信息,也可以选择您想要订阅的计划。

可视化编辑器​

在“可视化编辑器”选项卡下,您可以设置可视化编辑器的默认位置并为其定义多个预览 URL(环境)。如果您不希望编辑器使用它,您还可以禁用所有空间的可视化编辑器。最后,您还可以设置可视化编辑器中包含的响应式视图快捷方式的尺寸。
首先,您需要选择令牌的访问级别,然后选择一个可选名称(我们强烈推荐)。您可以在公共和预览访问级别之间进行选择,并且可以在API 令牌文档中找到有关令牌的更多信息。

国际化​

您可以通过在此选项卡中添加新语言来启用内容本地化。您可以根据需要选择多种语言。
学习:
我们强烈建议您阅读我们的多语言网站/应用程序创建指南。

网络钩子​

您可以为事件定义 Webhook。您可以配置一个在您发布/取消发布内容时触发的一个,另一个在保存数据源时触发的一个,以及另一个用于管理工作流程阶段更改的 Webhook。您还可以查看 Webhooks 日志,并配置用于连接它们的安全性。
您可以在本指南中阅读有关 webhook 的更多信息。

访问令牌​

您可以为您的空间创建多个 API 令牌,并在不同的环境中使用它们来呈现您的内容。首先,您需要选择令牌的访问级别,然后选择一个可选名称(我们强烈推荐)。您可以在公共和预览访问级别之间进行选择,并且可以在API 令牌文档中找到有关令牌的更多信息。
暗示:
令牌的访问级别以后无法更改。每个新的访问级别都必须生成一个新的令牌。
简而言之,公共访问令牌仅用于访问已发布的版本,而预览令牌用于访问已发布和草稿版本。
学习:
这些令牌是只读的,不能用于编辑内容。要编辑内容,请使用您的用户身份验证令牌 -请在此处阅读更多信息

工作流程​

Storyblok 使您能够为除免费计划之外的所有计划中的内容定义工作流程。默认情况下,新项目已具有三个预定义的工作流程阶段,但您可以编辑它们或创建新的阶段。
工作流程阶段的配置 您可以通过单击阶段名称旁边的齿轮图标来打开配置。它将为您打开配置选项,您可以在其中更改舞台的名称和颜色。
有关如何配置和使用工作流的更多详细信息,请参阅这篇有关工作流管理的文章。

资源库​

在此选项卡下,您可以配置与 Asset Manager 相关的详细信息,例如上传文件时的必填字段或与 Storyblok 的图像服务相关的设置。

备份与恢复​

使用您的 Amazon S3 存储桶创建备份。在此选项卡下,您可以配置自动备份过程,或从以前的备份恢复空间。
您可以在本指南中阅读有关备份内容的更多信息。

用户​

您可以在此部分管理空间的用户及其在空间中的角色。您还可以邀请新用户加入空间,并更改任何用户角色。

改变合作者的角色​

如果您是管理员,您可以更改用户的角色。您可以通过打开(单击齿轮图标)用户的设置叠加层来添加/删除用户的角色。
暗示:
一个用户可以有多个角色。

更改空间的所有者​

如果您需要更改空间所有者,请打开空间当前所有者的设置(单击齿轮图标)并输入新所有者的电子邮件。
必需的:
已使用 Storyblok 的用户的电子邮件。您还可以为 SSO 用户使用 SSO 电子邮件。

角色​

暗示:
每个空间中有两个默认角色 - 管理员和编辑者。您无法编辑它们。

创建新角色​

单击添加新角色按钮。填写角色的名称及其简短描述(可选,但推荐)。下面,您可以定义与角色相关的不同访问权限和安全配置。当您的新角色可供使用时,请单击右上角的“保存”按钮。

松弛集成​

您可以为已发布的事件配置 Slack 通知。

维护模式​

您可以阻止所有非管理员用户更改内容。

危险区​

您可以永久删除此处的空间。

概览屏幕​

登录 Storyblok 后看到的第一个屏幕是您有权访问的所有空间的概览屏幕。如下图所示,屏幕分为两个主要部分。
  • 侧边栏 {1} - 位于左侧
  • 主仪表板 {2 } - 位于右侧。
Storyblok 应用程序概述



故事集应用程序

侧边栏​

侧边栏的功能:
行动与领域描述
我的空间{3}默认情况下选择此选项。如果选择此选项,您将在主仪表板上看到空格。
合作伙伴门户{4}如果您想访问合作伙伴门户,请单击此处。如果您不是合作伙伴,则会显示加入屏幕。
我的帐户{5}我的帐户位于侧边栏的底部。您可以使用它来执行以下操作:

- 打开帐户设置
- 从 Storyblok UI 注销
- 管理插件(自定义字段类型、工具)

主仪表板​

该区域完全专注于显示您可以访问的空间以及创建新空间。
单击+ Add Space {1}并从以下选项中进行选择:
  • 新空间
  • 示例空间 - 具有示例项目集成的演示空间。
您甚至可以搜索{2}并对您的空间进行排序{3}。
单击空间名称旁边的星号{4} ,创建您最喜欢的空间的列表。星号旁边的三个点{5}提供以下选项:
  • 视图 - 进入空间。
  • 设置 - 用于空间设置。
  • 复制 - 复制空间。
故事集应用程序



故事集应用程序

空间​

空间的 UI 是应用程序中大多数用户花费最多时间的部分。

仪表板​

空间仪表板是您进入空间后看到的第一个部分。根据您的角色,屏幕有多种变化。仪表板的三种不同变体是:
  • 编辑器仪表板(常规仪表板)
  • 管理仪表板
  • 业主仪表板

编辑器(常规)仪表板​

编辑器仪表板



编辑器仪表板



编辑器仪表板
区域描述
最后更新{1}显示空间内容的最后更改以及进行更改的用户。
空间信息{2}显示空间的全局统计数据。
它显示了所有故事、资产、区块和用户的数量。
活动{3}显示有关空间变化的信息。它具有三个选项卡 -

- 内容:每个人在空间中最近发生的内容更改。
- 我的最新编辑:登录用户最近的更改。
- 分配给我:这显示是否已将某些内容分配给登录用户。
内容活动{4}表示过去 14 天内的内容活动数量以及每日条形图。

管理仪表板​

除了编辑器仪表板之外,管理员还将看到空间操作{1}、计划详细信息{2}、团队活动{3}和 API 请求{4}。
管理仪表板

1
2
3
管理仪表板



管理仪表板
区域描述
空间行动{1}此下拉菜单为您提供 3 个操作 -

- 设置:转到空间设置
- 工作流程:编辑工作流程
- 访问令牌:查看和编辑访问令牌
计划详情{2}提供有关空间计划的详细信息 - 计划、流量使用情况和当天的 API 请求
团队活动{3}这与编辑器仪表板中的内容活动不同,它显示了所有最近的团队活动,例如角色添加、评论、块编辑等。
API 请求{4}表示过去 14 天内发出的 API 请求数以及每日条形图。

业主仪表板​


所有者将看到与管理员相同的仪表板,以及查看和更新订阅的功能{1}
业主仪表板


业主仪表板

内容​

“内容区”是该空间中所有故事的概述。在这里,您可以创建内容的层次结构或平面结构。通过为故事创建不同的文件夹,您可以创建一个层次结构,您可以在不同的用例中使用它。
要打开故事,请单击表中代表故事的行。它以视觉或纯表单形式打开编辑器(取决于故事的设置)。您可以通过单击文件夹来浏览分层文件夹结构,就像在常规操作系统中一样。
内容部分



内容部分
区域描述
创建新的{1}用于创建新文件夹或新故事的按钮。
搜索{2}您可以使用故事和文件夹的名称进行搜索。
过滤器{3}过滤您的内容。
排序{4}对您的内容进行排序。
多选{5}它选择当前文件夹中的所有条目并显示选择控件。
状态{6}条目名称左侧的绿点表示状态:

- 绿色 - 条目及其所有内容已发布。
- 灰绿色 - 该条目已发布,但有一些未发布的更改。
- 灰色 - 该条目从未发表。
如果故事已经发表过一次,外圈将具有相同的颜色。

块库​

在块库中,您可以概览空间中的所有块(嵌套、内容类型和通用)。您可以创建文件夹来对块进行分组,以便更好地概览。
块库



块库
区域/行动描述
新块{1}创建一个新组件(嵌套/内容类型/通用)
阻止组{2}块组列表。
新组{3}创建一个新的块组。
搜索块{4}按名称搜索块。
排序{5}对块进行排序。
多选{6}选择/取消选择视图中的所有块。
块菜单{7}显示动作。仅当您至少选择一个组件时才会显示块操作。
预设{8}显示块的预设数量。

资产​

在资产部分,您可以上传和管理您的资产。
资产



资产
区域/行动描述
搜索资产{1}使用该名称搜索任何资产。
已删除的资产{2}查看您已删除的资产。
上传文件{3}上传您的资产。
过滤器{4}过滤资产。
排序{5}对资产进行排序。
所有文件夹{6}所有资产文件夹的列表。
查看切换{7}使用两个选项在列表视图和平铺视图之间切换

数据源​

数据源是键值对的集合。单击右上角的“新建”按钮创建一个新集合。

数据源



数据源
区域/行动描述
自动保存{1}启用/禁用自动保存
设置{2}它显示数据源的高级设置,您可以在其中导入和导出数据源。您还可以为值启用新维度(对于翻译有用)。您将找到数据源数据的删除操作和 API URL。
添加{3}添加新的键值对。
搜索{4}按键搜索。
拖动{5}拖动条目并重新排序。

应用​

Storyblok 编辑功能

应用程序目录显示空间中可以安装的所有应用程序。您可以通过单击每个应用程序的名称来安装或了解有关每个应用程序的更多信息,这将打开该应用程序的详细信息页面。

设置​

每个空间的设置部分可能会根据您的角色和空间规划而有所不同。
暗示:
普通用户根本看不到设置 - 空间的这一部分只能由空间的管理员和所有者访问。
设置

设置
空间设置分为几个不同的选项卡,代表设置的不同区域。您可以在此区域中执行空间的一般操作,并查看配置您的空间以获得更详细的功能视图。
暗示:
设置的每次更改都必须保存在右上角。

编辑​

Storyblok 为每个故事提供两种编辑器模式。您始终可以在两者之间进行选择,并且可以为内容树中的每个文件夹设置默认模式。这两种模式/版本是:
  • 可视化编辑器
  • 仅表单编辑器
单击内容部分中的“故事”行,在编辑器中打开您的故事。

可视化编辑器​

可视化编辑器是 Storyblok 的关键功能,它需要进行配置才能与您的项目配合使用。按照本指南了解如何正确配置您空间的可视化编辑器。
可视化编辑器由以下部分组成:
可视化编辑器



可视化编辑器
区域/行动描述
操作栏{1}提供基本的故事动作,并在下一张图片/表格中详细描述
可视化编辑器预览{2}将显示项目(网站或应用程序)前端的预览。它允许您单击并打开内容区域中的块字段。
可视化编辑器内容区域{3}显示故事的块和字段并允许您编辑它们。

操作栏​

顶部的操作栏分为两部分,一部分为深色背景,另一部分为白色背景。
操作栏



操作栏
区域/行动描述
返回按钮{1}返回到内容部分。
活跃用户{2}显示当前编辑打开的条目的用户的缩略图。
预览{3}在新选项卡中打开包含草稿内容的当前条目。
已发布状态{4}显示故事的状态。

- 绿色 - 条目已发布,并且没有未发布的更改。
- 灰绿色 - 包含未发布的更改,但之前已经发布过。
- 灰色 - 该条目从未发表。
如果故事已经发表过一次,外圈将具有相同的颜色。
保存按钮{5}将内容/更改保存为草稿版本。
发布按钮{6}保存并更改已发布状态的条目状态。此操作会触发发布 Webhook。
操作下拉列表{7}显示高级操作,这些操作可能会受到已安装应用程序的强烈影响。有关更多信息,请参阅操作栏后面的操作下拉选项。
操作栏



操作栏
区域/行动描述
内容浏览器下拉菜单{1}打开内容浏览器以帮助用户浏览以及创建新的故事/文件夹,而无需离开可视化编辑器
当前故事{2}显示当前故事的名称以及子弹。
工作流程状态{3}显示已打开故事的当前工作流程阶段(如果有)。
工作流程阶段{4}打开页面状态菜单。它允许更改和设置工作流程阶段以及注释。提供将故事分配给特定用户和角色的选项。
讨论{5}显示开放且已解决的讨论。
条目配置{6}更改故事的名称和片段。
块库{7}打开当前故事中的块库。在右侧显示所选组件的架构。可以添加和编辑块。
响应式视图{8}显示在不同屏幕之间切换的选项(桌面/平板电脑/移动设备)
选项下拉菜单{9}提供三个选项 -

- 其一用于打开工具部分。
- 一种改变内容区域的样式。(覆盖或在内容浏览器旁边)
- 用于重新启动 v2 游览的一个。
内容切换{10}显示/隐藏内容区域

操作下拉选项​

操作下拉菜单



操作下拉菜单
行动描述
开放草稿{1}在新选项卡中打开包含草稿内容的当前条目。
打开已发布的{2}在新选项卡中打开当前条目以及上次发布的内容。
JSON 草案{3}在新选项卡中打开当前条目的草稿 JSON。
已发布 JSON {4}在新选项卡中打开当前条目的上次发布的 JSON。
页面历史记录{5}打开历史记录弹出窗口,您可以在其中查看条目更改的时间线。您甚至可以回滚到任何旧版本。
取消发布{6}取消发布这个故事。

条目配置详细信息​

条目配置


条目配置
行动描述
蛞蝓{1}改变故事的主题。
定义为文件夹{2}的根目录从条目中删除 slug 并使该条目充当当前文件夹的根条目。例外:您不能在空间的根文件夹中执行此操作
标签{3}为条目设置标签。
按日期排序{4}允许按日期排序。
真实路径{5}定义可视化编辑器在位置与 slug 不同时应打开的位置。主要用在空间的首页(索引页),告诉可视化编辑器home代表的/。

可视化编辑器预览​

可视化编辑器


可视化编辑器
行动描述
预览网址下拉列表{1}在空间设置中配置的不同环境之间切换。
内容导航器{2}搜索并导航故事的内容。
表单模式切换{3}最小化网站预览区域,放大表单区域,充分专注于内容编辑。

内容区域详细信息​

内容区



内容区
行动描述
块名称{1}显示所选块的名称。
选项下拉列表{2}在块库中打开块的选项以及打开块的预设
编辑字段{3}编辑字段,例如更改类型和设置其他属性。
开始讨论{4}开始现场讨论。讨论也将显示在操作栏讨论中。
拖动{5}拖动并更改块的顺序。
块编辑器{6}显示块架构中定义的字段,并使编辑者能够创建/编辑内容。
添加块{7}对于嵌套块,您可以将另一个块上的实例添加到此数组中。

仅表单编辑器​

仅表单编辑器有许多用例。将其用于没有任何自己的前端表示层的故事,或者如果您想专注于创建内容而不是被视觉效果打扰,请使用它。
仅表格

仅表单编辑模式
您可以从操作栏上的条目配置在视觉编辑器和仅表单编辑器之间切换。
有一个选项可以在编辑模式之间切换{1}
切换编辑模式


切换编辑模式
暗示:
您可以在内容区域的文件夹设置中禁用可视化编辑器。

帐户​

一个帐户由一名具有唯一电子邮件地址的注册用户组成。在一个帐户下,您可以为您的项目创建多个空间,并使用其他用户的帐户电子邮件邀请其他用户加入这些空间。

空间​

空间是一个内容存储库。将其视为保存与一个项目相关的所有内容的地方。每个空间都有自己的故事内容类型资产和配置(工作流程、用户、角色、访问令牌)。如果您的目标是将不同语言的相同内容交付到多个平台(常见的一组是网络、iOS 和 Android 应用程序、数字标牌系统、商店屏幕),那么您可以使用一个空间并创建多个 API键来传递内容。如果您想启动多个彼此独立的网站或应用程序,最好的方法是为每个项目创建一个单独的空间。

故事​

“故事”是我们所说的您可以在 Storyblok 中创建的内容条目。每个故事都由一个Content Type定义。内容类型描述了可供内容创建者填写的故事的字段。除了您定义的字段之外,故事还附带默认属性name,例如slug、published_date、 等等。请随时查看我们的Content Delivery API 文档中的完整列表。
{
"story": {
"uuid": "ac0d2ed0-e323-43ca-ae59-5cd7d38683cb",
"name": "My third post",
"slug": "my-third-post",
...
}

文件夹​

文件夹是故事的集合,可用于对特定内容类型的条目进行分组。您想将所有帖子集中在一处吗?创建一个文件夹将允许这样做。您还可以使用我们的 API 查询特定文件夹中的所有条目,以构建项目中的概述。
{
"story": {
"uuid": "ac0d2ed0-e323-43ca-ae59-5cd7d38683cb",
"name": "My third post",
"slug": "my-third-post",
+ "full_slug": "posts/my-third-post",
...
}

成分​

您可以在 Storyblok 中创建三种不同类型的组件:Content-Type、Nestable 和 Universal。

内容类型块​

内容类型允许您为您的故事创建模板。您可以根据需要创建任意数量的内容类型。常见内容类型的示例有帖子产品页面常见问题解答条目。创建内容类型后,您可以根据您定义的模板创建此类型的故事。默认情况下,我们提供“页面”内容类型。当然,如果你不需要这个类型,你可以随意删除。
{
"story": {
"uuid": "ac0d2ed0-e323-43ca-ae59-5cd7d38683cb",
"name": "My third post",
"slug": "my-third-post",
"full_slug": "posts/my-third-post",
+ "content": {
+ "component": "your_content_type",
+ // fields you define for your content type
+ },
...
}

可嵌套块​

这种类型的组件仅存在于 Story 和其他 Bloks 中,例如HeroGridFull Width Image。您无法由此创建新的故事,因为它只是一个故事的一部分。要在一种内容类型中使用它们,您需要创建一个允许嵌套组件的类型块字段。
{
"story": {
"uuid": "ac0d2ed0-e323-43ca-ae59-5cd7d38683cb",
"name": "My third post",
"slug": "my-third-post",
"full_slug": "posts/my-third-post",
"content": {
- "component": "your_content_type",
+ "component": "page",
// fields you define for your content type
+ "body": [ // also a field you defined (type blocks)
+ {
+ "component": "teaser",
+ "headline": "My headline Content",
+ // fields you define for your blok
+ }
]
},
...
}

万能块​

通用块可以同时用作内容类型和可嵌套块。一个故事可以作为独立的故事存在,也可以作为可嵌套组件添加到故事中。例如,在创建“产品详细信息”组件时,您可以将其合并到具有其他产品详细信息组件集合的故事中,或者可以将其用作独立的内容类型。

类型例子
内容类型帖子、作者、产品、页面、团队成员、常见问题解答文章
可嵌套英雄、网格、部分、通讯部分、章节、全宽图像、滑块
普遍的横幅/CTA、联系表、产品详细信息

模式​

每个Component,无论是Content Type还是Blok,都有一组已定义的字段,称为Schema。您的架构由一个或多个具有不同字段类型的字段组成。一个模式可以有多个选项卡,允许您对字段进行分组。

场地​

字段类型定义您希望编辑器能够存储哪种内容。您可以从许多不同的类型中进行选择:
字段类型描述
积木允许嵌套 Bloks 的字段
文本基本的单行文本字段
文本区没有格式选项的多行文本区域
富文本带有格式选项的多行字段,可生成 JSON 格式
降价带有格式选项的多行字段,生成 Markdown 格式
数字没有格式化的数字文本字段
约会时间没有格式化的数字文本字段
布尔值复选框 - true/false
多种选择键/值对、故事、数据源、外部 JSON 或字段级翻译语言的多选选项
单选项键/值对、故事、数据源、外部 JSON 或字段级翻译语言的下拉列表
资产单个文件上传输入和对资产管理器的访问。您可以将“资源”用于图像、视频、音频和文档
多资产多资产上传输入并访问资产管理器。您可以对图像、视频、音频和文档使用“多资产”
关联内部和外部链接、电子邮件和锚点
桌子轻松管理表格数据的组件
团体允许您将字段分组到一个部分中(无法输入)
图片(旧)单个图像上传输入和对资产管理器的访问。使用“资产”而不是图像(旧)
文件(旧)单个文件上传输入和对资产管理器的访问。使用“资产”而不是文件(旧)
插入使用您自己的自定义字段类型扩展可视化编辑器内容区域
字段类型定义您希望编辑器能够存储哪种内容。 您可以选择多种不同类型

暗示:
对于每个字段,您可以设置一些属性,例如用于验证(如果是必填字段,则为最大长度)和设置默认值。

资产

Storyblok 中的资产是您使用imagefile或多资产字段或在资产管理器本身中上传的所有文件。上传到 Storyblok 的资产将托管在我们的基础设施上,并通过我们的 CDN 交付,为您提供尽可能最佳的性能。此外,您可以使用我们的内置图像服务来优化图像并调整图像大小。您可以在下面找到每种资产类型的 MIME 类型。

Storyblok 中的资产可以是图像、视频、音频、文档

文件类型MIME 类型
图片图像/x—png、图像/png、图像/gif、图像/jpeg、图像/svg+xml、图像/webp
视频视频/*、应用程序/mp4、应用程序/x—mpegurl、应用程序/vnd.apple.mpegurl、音频/webm
声音的声音的/*
文本文档应用程序/msword、文本/纯文本、应用程序/pdf、应用程序/vnd.openxmlformats-officedocument.wordprocessingml.document
顶部