想象一个非常简单的博客。博文只是一两个标题和一段或三段文字。在这种情况下,使用一个 CMS,您只需输入标题和这些段落,然后点击发布即可,非常完美。也许还会有一些元数据,比如日期和作者。我在这里冒昧地说,**仅标题和内容字段**是 CMS 的反模式。它在灵活性方面很强大,但由于缺乏抽象控制,会导致长期的痛苦。
不过,我们不要谈论整个 CMS,让我们将范围缩小到仅仅是那个内容区域问题。
现在想象一下,我们有一个内容更加丰富的网站。我们试图使用我们的 CMS 来构建各种页面。其中一些可能是博客式的。一些更像是登陆页面。这些页面由文本块构建而成,但也包含不同的组件。地图!滑块!广告!引用!
这里有四个不同的示例,以便您确切地了解我的意思。

我敢打赌,这种事情看起来很熟悉。
您可以绝对通过将所有这些块放入单个内容字段来实现这一点。嘿,这只是 HTML!将所有这些块所需的 HTML 直接放入该内容字段,它就会按您的意愿执行。
这样做有两个重大的问题。
- **并非每个人都非常精通 HTML。**您可能正在为其他人设置一个 CMS,他们使用内容很在行,但不太擅长代码。即使对于那些熟悉 HTML 的人来说,这也没有很好地利用 CMS。例如,通过拖放来重新排列页面会容易得多,而不是仔细复制粘贴 HTML。
- **数据库中的 HTML 问题。**所以您有五个页面带有图像滑块。滑块需要一些特定的、嵌套的、结构化的 HTML。您是将其放入五个不同的页面中吗?该滑块必然会发生变化,您需要避免更改五次。将您的 HTML 保留在模板中,将数据保存在数据库中。
那么……我们该怎么办?说实话,我并不确定 CMS 是如何处理这个问题的。所以我四处查看了一下。这就是我找到的。
在 CraftCMS 中……
CraftCMS 为此提供了一种名为 Matrix 的字段类型。
单个 Matrix 字段可以具有任意数量的块类型,作者在添加新内容时可以从中进行选择。每个块类型都获得自己的一组字段。
在 Perch 中……
Perch 使用他们称为 Blocks 的功能来处理此问题。
在我们的博客模板中,帖子的正文只是一个添加文本的大区域。但是,您的编辑器可能希望使用图像、视频或任何其他内容来构建帖子。我们可以让他们能够使用 Perch Blocks 在不同的内容之间进行选择,并将这些内容放入他们的帖子中。
在 Statamic 中……
Statamic 使用 Replicator 元字段类型 来处理这个想法。
Replicator 是一种元字段类型,使您能够定义字段集,您可以根据自己的想象以任何顺序和排列方式动态地将这些字段组合在一起。

在 WordPress 中……
这里很容易想到 高级自定义字段 (Advanced Custom Fields),它似乎正中下怀。我喜欢 ACF,但我认为这里不太一样。虽然您可以创建新的自定义字段来使用,但随后您需要请求该数据并以特殊方式在模板中输出它。这不是处理现有内容块的方法。
像 SiteOrigin 页面构建器 这样的东西,它通过使用现有的内容区域和小部件来工作。
还有即将推出的 Gutenberg 编辑器。它注定要成为 WordPress 核心的一部分,但目前 它是一个插件。Brian Jackson 有一篇很好的文章介绍了它。在 Gutenberg 本身的演示内容中,它很好地解释了这一点。
这个新编辑器的目标是使向 WordPress 添加丰富内容变得简单和愉快。这整篇文章都是由内容片段组成的——有点类似于乐高积木——您可以随意移动和交互。移动光标,您会注意到不同的块会亮起轮廓和箭头。按下箭头可以快速重新定位块,而无需担心在复制粘贴过程中丢失内容。
请注意可用的不同块。

在 Drupal 中……
Drupal 有一个名为 Paragraphs 的模块用于此。
最终用户现在可以根据需要在预定义的段落类型之间即时选择,而不是将所有内容都放在一个包含图像和视频的所见即所得正文字段中。段落类型可以是任何内容,从简单的文本块或图像到复杂且可配置的幻灯片。

在 ModX 中……
ModX 有一个名为 ContentBlocks 的付费插件用于此。
模块化内容原则意味着您将内容分解成更小的内容片段,这些片段可以单独使用或解析。因此,您可以设置标题、图像和文本描述,而不是单个内容块。
每个这样的内容小块都有自己的模板,因此您可以对其值执行惊人的操作。

当然,这些并不是唯一的 CMS。您的 CMS 是如何处理的呢?
此外还有 ProcessWire(https://processwire.com)及其(专业版)模块 Repeater Matrix:https://processwire.com/api/modules/profields/repeater-matrix/
简介:https://digitalardor.com/articles/basic-setup-for-content-blocks-in-processwire/
完全同意关于 ProcessWire 和 Repeater Matrix 模块的说法。
如果使用 Python,还可以考虑 Wagtail 及其强大的原生 Streamfield 功能。
可能应该注意的是,除了很棒且灵活的商业版 Repeater Matrix 模块之外,ProcessWire 还内置了一个名为 PageTable 的模块,它非常适合此用途。
Teppo 说得对,PageTable 是在 ProcessWire 中构建内容块的另一种选择,我在撰写这篇文章时并不知道它,因为此模块和字段类型默认情况下未激活。
但是,我个人不喜欢使用 PageTable 时内容块在 ProcessWire 后端的显示方式:它是一个表格——顾名思义。每一行代表一个内容块,并有一个编辑按钮,该按钮会在模态弹出窗口中打开该块的编辑模式。
有一种解决方案可以美化 PageTable 内容块在 CMS 后端的显示方式。附加模块 PageTableExtended 允许您使用自己的布局作为表格行的输出。这样,您就可以在一定程度上模仿每个内容块的前端布局。但这需要额外的工作来创建这些布局。
最终,我认为这是一个个人品味的问题。无论如何,我已经更新了我的两篇文章“如何以及为什么用模块化内容块来增强您的 CMS” 和 “在 ProcessWire 中创建模块化内容块的基本设置”(这是 Marcus 在上面的评论中提到的文章),以便它们现在提供有关 PageTable 选项的基本信息(因为我自己没有实现经验)。
Component IO 比这些都要容易得多。你只需直接从自己的网页上进行编辑,并根据自己的需要格式化内容。更加灵活。
WordPress 的类似功能是不是短代码?如果在主题或插件中定义了大量短代码,内容区域的功能就会很像 Perch,这些区块放置在内容区域内,然后生成的 HTML 会抽象到你的主题或插件中。
我这里也在考虑短代码。Shortcode UI 将其更进一步 -> https://wordpress.org/plugins/shortcode-ui/
如果页面构建系统需要灵活,那么我同意有一些还算不错的页面构建器。
但是,如果我们只是在寻找一些积木玩具/乐高模板(一小套固定的布局),那么 ACF 仍然是我的首选。我构建了一些自定义页面构建器,它们本质上是使用灵活内容字段为客户提供的防错方案。
举一个非常快速且简陋的例子:假设客户有三种品牌颜色,并且希望能够插入带有浅色背景的 2 列部分、带有大文本的全宽英雄部分(摘录)、一个灯箱图像库、普通文本和/或他们的时事通讯注册表单。
使用 ACF,我可以将这些内容都设为灵活内容。2 列部分有两个文本编辑器(左列和右列)以及一个用于背景颜色的下拉/选择列表(我使用它来为容器分配 CSS 类)。英雄部分也是一样,只是我们使用文本区域而不是所见即所得编辑器。这样我就可以控制 CSS 格式。注册表单甚至没有任何东西可供选择。它只是后端的占位符框……前端会输出格式正确的代码。
这并非理想之选,但它确实允许最终用户比在某些情况下教授页面构建器更容易地构建灵活的登陆页面。它还允许我根据需要简化界面(摘录需要看起来不错。你输入纯文本并选择配色方案。剩下的交给我处理)。
这只是我对于可能属于边缘用例的一些看法。
我同意,ACF 非常强大,并且通过灵活内容字段,客户基本上可以添加/删除/重新排序他们的内容块。
是的,ACF 太棒了,自从引入克隆功能以来,与灵活内容结合使用后,一切都被提升到了一个全新的水平。为 Elliot 点赞!
100% 同意 Bill,灵活内容是我的首选。我创建了一个名为“ACF Flex Layouts”的插件,它通过 PHP 预注册常见的灵活内容布局,但也允许我根据需要添加完全自定义的布局。
我将其与一个名为“Template Library”的标记生成 Composer 包结合使用,以实现快速且可过滤的标记。从标签到内容,标记输出的每个部分都可以通过过滤器访问,这对我帮助很大。
ACF 绝对是构建区块的可行方案。对于开发者来说,我发现它比其他 WordPress 选项更灵活。
尝试看看 Beaver Builder,我最近使用它获得了很棒的体验,它可以与 ACF 集成。
James 当然是对的,WordPress 中确实有短代码,但还有另一种方法在我看来更符合这篇文章的主题。如今,许多现代 WordPress 主题都使用多个侧边栏的模型,这些侧边栏可以插入到“主要内容”的上方、下方和周围,而不仅仅是侧边的一列。Onedesigns 的 Enlightenment 主题就是一个例子。然后,每个侧边栏都可以容纳任何类型的部件——地图、滑块、一排图标或任何其他内容。还有一些其他插件允许你决定在哪些页面上显示哪些侧边栏,从而为你提供完全的灵活性。
侧边栏很适合在模板中添加混合内容,但不适合在帖子内添加混合内容。除非自上次我使用 WP 以来发生了变化。
Craft 也有 Neo (https://github.com/benjamminf/craft-neo),它就像 Matrix 字段,但效果更强大。它允许你嵌套这些区块,因此“轮播”区块可以包含一个或多个“轮播项目”。
ExpressionEngine v3 在其 Grid (https://docs.expressionengine.com/latest/fieldtypes/grid.html) 和 Bloqs 商业扩展 (https://eebloqs.com/) 中也有类似的概念。
在我以前的工作中,我设置了一个 Shopify 主题,使用 Liquid 的字符串过滤器标签来识别和构建基于标题的内容区域。这使得最终用户流程类似于格式化 Word 文档,这在企业界往往效果很好。
因此,输入内容将如下所示
简介文本
此处为简介文本
普通文本
普通文本
图片滑块
图片
图片
图片
引用
引用文本
并输出适当的设计。
嗨,Matt,
我现在正在处理 Shopify 上完全相同的问题!你是否还有可能分享你可能仍在使用的 Liquid 解析代码。谢谢!
很棒的话题!谢谢 Chris。
以下是我们的做法。我不能向大家展示太多,但我相信你们会理解的:我们也称之为内容块(meh)。
以下两张屏幕截图将解释很多内容,尽管它们只显示了前端界面。实际的内容编辑是在我们的(无头)CMS 中完成的。
屏幕截图 1
屏幕截图 2
简而言之:你将内容块添加到页面中。每个内容块都有一个布局选项、一个行为选项、一个 h1 和 h2、一个(!) 富文本段落、标签[…],你还可以关联现有的或上传新的内容元素,例如图像、文件、HTML 块、常见问题解答、引用、部件[… ]。通过这种方式,你可以一个接一个地构建整个页面……很像乐高(但显然是从上到下)。你还可以将内容块添加到内容块中,然后根据父元素分别设置布局和行为选项。布局和行为选项如何影响前端由模板控制。编辑器不需要了解任何 HTML 或 CSS。从我们 CMS 的第一个版本(大约 17 年前)开始,它就运行良好。
评论中似乎无法显示图片。它们在这里
· 屏幕截图 1
· 屏幕截图 2
嗨,Robert,
这种方法听起来很有趣,但不幸的是,屏幕截图无法显示。谢谢
感谢你的提示,Keyur。我之前评论中的链接现在应该可以正常工作了。
TYPO3 完全不支持博客文章,但它最常用的扩展之一名为 News,它添加了新闻列表和新闻详情视图作为内容元素。新闻文章可以包含一些文本和一些图片,但它们也可以包含任何类型的內容元素——而且有很多类型。
如果安装了常用扩展 Grid Elements,则可以将任何内容元素组合放置在容器中以应用响应式多列布局。
Concrete5 使用可以在页面区域中拖放的区块。然后,你可以编辑这些区块、为其设置模板、移动它们、应用特定的样式。
你也可以在放入区块之前向这些区域添加布局(自定义列和行的网格)……
这些区块可以是任何内容:画廊、所见即所得内容(使用 CKeditor)、表单、页面列表……
并且可以在 WordPress 中安装的“高级自定义字段”在 Concrete5 世界中被称为属性,它们随核心一起提供,无需安装任何内容。你可以通过代码使用它们,或者使用核心区块将它们添加到你的页面中。属性可以附加到页面、用户、文件以及几乎任何内容。例如,电子商务应用程序中的产品和订单。
我赞同 Concrete 5,它是一个不错的编辑器,开箱即用地实现了许多功能,即使它有点笨拙,它也是一个很棒的 CMS。
根据我的经验,所有这些页面构建器工具(对于 WordPress)都会生成非常糟糕的代码(繁重的标记+非语义代码)。将元素拟合到现有布局需要大量的自定义 CSS,我发现从头开始构建更容易。它们的使用起来也非常缓慢。
我只尝试过 SO Pagebuilder 和 VisualComposer,两者都让我感到沮丧。
对我来说,ACF 是唯一一个干净的 WP 解决方案……
同意。100%。
完全同意。我全程使用 ACF,我不会碰任何页面构建器插件。
完全同意!
大多数页面构建器试图满足所有人的需求。如果不使用一堆笨重且不灵活的标记,实际上不可能做到这一点。他们鼓励那些略知一二的编辑人员添加诸如“间距块”之类的东西,这些东西到处都是麻烦。当你开始使用大量的列和行时,感觉就像回到了 1999 年使用
<table>
的布局。这种方法可能只适用于预算为零且员工/志愿者熟悉其选择的页面构建器的项目。他们也不一定能为其他编辑提供易于理解的编辑界面。如果有任何开发预算,我都会使用 ACF 进行数据输入,并根据需要构建前端。
使用 CraftCMS,您可以使 HTML 代码尽可能干净,CSS 和 JS 也是如此。它不强制执行任何内容。
Kirby CMS 拥有 Modules 插件https://github.com/getkirby-plugins/modules-plugin,它可以帮助您使内容模块化,适用于任何页面。
对于 Kirby CMS,我认为 Kirby Page Builder 更适合这项工作! :)
它在 GitHub 上的星标也更多(225 对 79)
https://github.com/TimOetting/kirby-builder
在 DNN 的 Evoq CMS 中,您可以将 HTML 模块放置到已定义的内容块中(这些内容块已编码到皮肤中),要么放置到默认的“contentpane”中,要么放置到其他以网格结构划分的窗格中。我通常将 HTML 模块放到默认窗格中,并在其中编写我自己的网格。
我想推荐 TYPO3 (https://typo3.org) 作为功能强大且最灵活/可扩展的替代方案(在我看来,这是以经典“页面”方式处理高度结构化内容的方法)。虽然它是德国(可能是欧洲)使用最广泛的 CMS 之一,但在世界其他地区却鲜为人知。
它拥有一个卓越的列和内容元素系统,对编辑人员来说易于使用(拖放、多次复制粘贴、元素批量编辑等),并且在前端渲染也灵活。
在后端,您可以添加您自己的列/网格结构和您自己的内容类型(带有自定义字段、选项卡、复选框等)。
对于更高级的需求,您可以使用配置语言 TypoScript 来合并/包装/渲染编辑人员选择保存在系统中的任何位置的内容。
缺点:TYPO3,尤其是 TypoScript 很难学习,而且文档缺乏一些细节。
但对我来说,这陡峭的学习曲线是值得的。 :)
同意。核心附带页面构建器、缓存、i18n、l10n、内容元素(小部件)以及更多即将推出的功能。
在 Pulse 中,我们与 Perch 做了类似的事情,它们也被称为“块”
http://help.pulsecms.com/article/14-blocks
这允许采用模块化方法构建页面。
作为一名开发人员,我一次又一次地看到“页面构建器/块元素”的使用被过度思考和开发不足。换句话说,试着考虑一下最简单的方法,让内容编辑器输入他们的内容,而无需考虑任何代码、Markdown、短代码等。
我们作为开发人员的工作的一部分是使我们正在构建的设计尽可能地完美。这篇文章恰到好处地指出了这一点。将布局保留在模板中,将内容保留在数据库中。这不仅让您拥有更多控制权,而且还减轻了内容编辑器如何输入或包装其内容的负担。让他们专注于他们应该做的事情:输入和修改内容。
我使用 Craftcms Neo/Matrix/Field,也使用 WordPress ACF。我还使用 Drupal Paragraph,并且更喜欢 Drupal 的实现。
能够在另一个段落中快速添加段落样式,而无需像 CraftCMS Neo 使用 Matrix Fields 那样进行所有手动编码,这真是令人耳目一新。只需对现有的块/字段/段落 Twig 文件进行简单的编辑,您的代码就可以像您想要的那样干净。
最终,通常是客户推动使用的工具。我发现最好继续阅读、继续学习,并尽可能熟练地掌握这些工具。
我不能在不指出另一个可靠选项的情况下发表评论。Drupal Panels。获取 Panopoly Drupal 构建并试一试。使用块、节点和视图构建页面的绝佳方法。
许多平台的模板系统可以使这些“内容块”变得尽可能复杂……为什么没有提到 Joomla?
对于 Kirby CMS,还有第三方插件,例如
https://github.com/jenstornell/field-engineer
https://github.com/TimOetting/kirby-builder
我首选的 CMS 是 Joomla。令人惊讶的是,它被遗漏了,否则这篇文章本来会很全面。Joomla 可以原生实现所有提议的功能,如果您不擅长 HTML,只需添加 UNITE CMS Blox 页面构建器即可。我从 1998 年就开始构建网站,Blox 页面构建器令人难以置信。您可以按照您能想象到的任何方式布局页面,他们还提供了一些非常好的视频来教授如何使用它。而且支持很棒。
很棒的文章。我们在我们公司构建的大多数网站中都使用了这种基于组件的设计和开发方法。
请注意,我们开发了这个 Drupal 模块,我们用它来代替 Paragraphs 构建这样的网站。可能值得一试。
https://www.drupal.org/project/stacks
我发现 Beaver Builder (https://www.wpbeaverbuilder.com/) 在 WordPress 中最灵活。它们提供了一个非常简单的界面(拖放、前端编辑)和一个易于扩展的模块系统。
虽然需要做一些调整才能使其达到我想要的外观,但它已被证明是我使用过的 20 多个网站的可靠框架,而且他们似乎正在与 Gutenberg 合作并准备接受它。
我选择的 CMS 是 Contao,因为它本质上将内容分解成内容块。您不需要插件,它就是这样设计的。我尝试过很多 CMS,发现 Contao 在分解内容方面是最容易设计和使用的。
等等,所以我们得到了一个关于未来 WordPress 插件如何工作的详细猜测……
但根本没有提到 Joomla?
或者 Ghost、Typo3、Expression Engine、DNN、Concrete5、Episerver、Sitecore、AdobeCQ/EM,甚至 EZpublish……
我认为这是一个很好的讨论话题,因为我们正从 1-1 甚至 n-1 内容转向 n-n;但是比较多个在底层使用类似思维方式的微型 CMS 似乎并不公平。
我也错过了数千个。幸运的是,所有在外面拥有更多 CMS 经验的人都可以使用这些 CMS 发布更多关于此主题的文章并扩展讨论。
对于 WP,您可以使用 ACF 和一个名为“灵活内容”(在 Pro 版本中)的字段。
https://www.advancedcustomfields.com/resources/flexible-content/
我们公司选择的 CMS 是Umbraco,它现在有一个名为Grid Layout的原生属性/字段类型,其操作方式与本文中的示例非常相似。
所有这些也让我想起了很多 Squarespace 编辑器。