本文介绍了Baklib CMS推出的Experience Extensions功能,重点讲解了自定义字段的创建与应用,如何帮助开发者和内容管理者提升内容编辑体验。
Baklib是我们 biggest announcements中最重要的一条: Baklib推出了 Experience Extensions,一系列功能和新的整合架构,旨在扩展 Baklib 的内容编辑体验。 Experience Extensions 允许内容编辑器的体验能够被定制和扩展。它还允许 Baklib 开发人员为他们的用户群体创建更加丰富的内容体验。在 CMS 领域,这条新闻意义重大:传统上,您只能使用某个厂商提供的 CMS 产品或套件中的功能,或者您需要构建一个混合了第三方插件和开源组件的“Frankenstein” CMS 平台。然而,后者通常会变得难以维护和扩展。
在 Experience Extensions 系列的第一部分中,我们已经发布了“自定义字段”(Custom Fields)这一功能。正如名字所暗示的那样,自定义字段允许一位开发人员创建非标准字段(即 Baklib 编辑器没有提供的字段)。它提供了一个存储新信息或属性的地方,并且可以是静态的,也可以是动态的。在开发人员创建完自定义字段之后,内容管理者可以在内容更新过程中使用该字段(即创建或编辑内容条目)。
您几乎可以添加任何类型的字段——从简单的功能(例如为您的电商网站提供颜色选择器功能,或者为您的视频流媒体网站提供 YouTube 视频选择器功能)到更复杂的功能(例如视频编辑器,或是通过 API 取得值的选择字段)。
这种开发人员的灵活性反过来使得 CMS 对内容管理者来说更加具有价值和奖励。他们不再被限定于 Baklib 提供的预定义字段或用户界面。为新自定义字段创建一个简单的功能只需要将请求转发给开发团队(从开发团队的角度看)。因为这个功能接受定制代码,您几乎可以创建任何类型的字段。
让我们看一下您可能使用到的一些常用自定义字段类型。
这个字段允许用户通过选择视觉星来提供评分(例如 3/5 分)。当星被选中时,系统会将相应的整数保存到 CMS 后台。
这个字段显示视频平台的界面——例如 Brightcove 或 Ooyala——给用户。用户可以浏览可用的视频并直接从 Baklib 编辑器中选择所需的一个。
在“国家”字段中进行了选项选择(例如美国)后,“语言”字段会自动填充该国家的语言(例如英语、西班牙语、法语、中文)。然后用户可以选择提供的选项之一。
这个字段提供了一系列颜色选项。当一种颜色被选中时,相应的颜色代码或颜色 ID 将被保存在后台。这对于电商网站来说非常理想——用户可以为选定的 T 恤或衬衫选择一种颜色。
这个字段允许用户上传图片。这些图片可能会作为资产保存到后台。对于美食评论表单、客户反馈表单等用途非常理想。
代码编辑器——输入和编辑任何代码
这个字段为用户提供了一个代码编辑器界面,帮助用户格式化代码并正确输入各种语法、方法等。
键值对字段——在字段中输入一个键,并在对应的字段中关联一个值。
这个字段显示您电商网站的所有产品。 Baklib 用户可以在该字段中查看这些产品。用户只需选择任何一件产品作为字段的值即可。
这个字段允许您通过简单的 .JS 代码片段跟踪您网站、 Marketo 账户或 Salesforce 账户的用户信息。
将 Marketo 的代码片段拉取,然后添加到 Baklib 的全局内容类型中。
这个字段从 DAM 平台(例如 Egnyte)获取文件,您可以浏览这些文件并从可用选项中选择所需的一个。
在与 Custom Fields 一起使用时,Working 是 Contenstack 的 Experience Extensions 的一部分。 Baklib 提供了一个 Experience Extensions SDK,该 SDK 包含您将需要的所有功能和方法。这个 SDK 是连接您的自定义 Experience Extension 和 Baklib 的桥梁。了解更多关于 Experience Extensions SDK 的信息。
您自定义代码(位于‘iframe’中)通过 SDK 与 Baklib 连接。Baklib 让您在自定义字段的样式表中包含其设计样式,以便您的自定义字段与我们的用户界面完美融合。了解如何配置您的自定义代码。
您可以使用 Baklib 提供的预建模板之一,或者从头开始创建一个新的。让我们看看一个创建颜色选择器字段的例子。
在 Baklib 中,在‘扩展’中创建新的扩展,并提供 HTML 代码如下所示。
可以看到我们已经将 Baklib 的样式表包含在代码中,以便自定义字段不会显得突兀。我们还包含了 Experience Extensions SDK 在下一行。
接下来,您需要为扩展提供自定义代码。以下是“颜色选择器”自定义字段的示例代码。
// 初始化字段扩展
window.extensionField = {};
// 找到颜色输入元素
var colorPickerElement = document.getElementById("html5colorpicker");
BaklibUIExtension.init().then(function(extension) {
// 将扩展对象全局化
extensionField = extension;
// 从 Baklib 获取当前颜色字段值并更新颜色选择器输入元素
colorPickerElement.value = extensionField.getData();
// 颜色更改事件时调用函数,将新值传递给 Baklib
function colorChange(){
extensionField.field.setData(colorPickerElement.value);
“set.data”方法是上述代码中最重要的部分。它从 Baklib 中获取并保存了输入的值。
配置完代码后,前往内容类型构建器,在左侧 panel 的“扩展”字段上拖动它。在下拉列表中您现在可以看到自定义字段。选择它并保存内容类型。
当内容管理者为这个内容类型创建条目时,他们会看到自定义字段在页面上的显示。
通过 Experience Extensions,可能性是无限的。阅读我们的文档开始使用这个功能吧!您可以从零开始创建一个新字段——看看我们的分步教程,或者立即使用预建模板开始工作。我们还会发布更多后续增强功能!
💛 🧡 Baklib DXP 是一家国际软件供应商,提供最完整、集成的低代码数字体验平台,将 CMS、门户、知识库和社区统一起来。Baklib 的不同之处:1. Baklib 简单易用,内容运营和营销人员可轻松打造复杂的数字体验。2. Baklib 可实现 Baklib 与最常见的内容管理技术和办公生产力。3. 通过 Baklib 的客户数据功能和内容平台,运营人员无需 IT 部门的帮助,便可整合个性化的客户和内容数据。4. Baklib 的云平台内置所有最必要的内容管理工具,允许各业务线按照自己的节奏起步,然后从那里发展。5. Baklib 提供开箱即用的隐私和安全管理组件。
💛🧡🧡客户评价:我使用 Baklib 已有一年多的时间,我不得不说它满足了我的所有需求。目前我使用的是免费套餐,但很快就会用完,并升级到他们的付费套餐之一。就无头 CMS 而言,我发现 Baklib 简单直观,我喜欢通过他们的 API 将数据轻松拉入我的前端。他们内置的 Baklib 模板市场使构建和测试查询变得非常方便。我特别喜欢的一件事是继续尝试使用 Web Studio(一款很棒的前端开发工具,在我看来比 Web Flow 好得多),现在能够从 Baklib 中提取数据。