Drupal:探索 Canvas(第1部分)
Source: Dev.to
介绍
不久前,Canvas 的第一个版本已发布。对于 Drupal 社区之外的用户来说,Canvas 是一个全新的可视化页面创建模块。
大多数 CMS 用户习惯于基于表单的页面构建界面,这往往需要额外的培训,因为添加的内容与页面之间没有直观的视觉关联。历史上,预览按钮一直被用来缓解这一问题。
Drupal 之前的可视化页面创建工具是布局构建器 (Layout Builder)。它的主要局限在于仍需要使用表单来编辑页面元数据。将表单与可视化布局结合的界面代表了提升用户体验的下一步。
Quick Edit 模块 也提供了可视化编辑功能,但它侧重于行内、局部的编辑,而不是完整的页面构建。
安装与第一印象
发布文章底部提供了一个演示仓库,但我更倾向于使用干净的环境。我创建了一个全新的 Drupal 11.20 项目,并仅安装了 Canvas 模块。

该模块在 外观 (Appearance) 下新增了一个 组件 (Components) 选项卡。我觉得这个位置有些奇怪,因为我原本期待它位于 结构 (Structure),与其他页面构建选项放在一起。
管理员顶部菜单也新增了 Drupal Canvas 链接,且在 内容 (Content) 部分出现了 页面 (Pages) 选项卡。

出于好奇,我检查了数据库,发现了 Canvas 专用的表,这表明 Canvas 是与传统节点系统并行运行的,而不是作为其之上的可视化层。
注意: 由于 Canvas 不依赖节点表,它提供了更大的灵活性,但也引发了它如何与经过充分测试的节点架构共存的问题。对于仅使用 Canvas 页面的网站,节点可能会成为不必要的负担。
使用 Canvas
在小屏幕上访问 Drupal Canvas 链接时,会出现警告,提示浏览器窗口太窄,意味着目前不支持在智能手机上进行页面构建。

在桌面端,初始的 Canvas 视图如下所示:

- 左侧图标返回管理员界面。
- 顶部工具栏遵循 Drupal 的设计语言(使用 Gin 管理主题)。
- 中央的下拉框称为 导航器 (navigator),提供页面级别的控制。
- 最右侧的按钮用于保存页面。
导航器与页面创建
点击导航器即可看到它的功能。创建新页面时,界面会更新:

- 导航器文字发生变化,并出现 草稿 (Draft) 标记。
- 内容区域左上角提供页面尺寸调整选项。
- 内容区域映射了 结构 (Structure) 中的 区块布局 (Block layout),进一步说明组件选项卡更适合放在结构而非外观下。
- 一个方形占位符邀请你拖放内容块。
- 右侧出现 页面数据 (Page data) 工具栏。

这个集成的页面数据工具栏是核心布局构建器所缺乏的功能。
保存 Canvas 页面
为了验证 Canvas 并未修改节点表,我编辑了页面标题并保存了页面。
