Drupal：探索 Canvas（第2部分）
Source: Dev.to
请提供您希望翻译的具体文本内容，我将按照要求将其译成简体中文并保留原始的格式、Markdown 语法以及技术术语。谢谢！
Source: …
探索组件
在我之前的文章中，我已经熟悉了新模块，并且取得了一个有希望的开端。
在本篇文章中，我将探索 组件。
什么是组件？
这个术语故意保持模糊，因为组件可以是 前端‑基于 的，也可以是 后端‑基于 的。
在实践中，组件仅仅是一段原子 HTML 加上其定义。
前端示例（React）
const Component = () => {
return (
<div>
Test
</div>
);
};
export default Component;前端开发者会立刻认出这是一个 React 组件。
后端示例（Drupal 单目录组件）
# test.component.yml
'$schema': 'https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json'
name: test{# test.twig #}
<div>
Test
</div>对于编辑者来说，两种类型在视觉上没有区别。
Props
硬编码文本或图片对编辑者没有用处，因此组件可以暴露 props，这些属性在选中组件时会显示为输入字段。
带 Props 的前端组件
const Component = ({ name }) => {
return (
<div>
Test {name}
</div>
);
};
export default Component;
带 Props 的后端组件
# text.component.yml
'$schema': 'https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json'
name: test
props:
type: object
properties:
name:
type: string
title: Name{# text.twig #}
<div>
Test {{ name }}
</div>Slots
Slots 让编辑者 嵌套组件，从而创建更复杂的页面布局。
- 在前端组件中，slot 变量的处理方式与 prop 变量相同；只需记得使用 camelCase。
- 在后端组件中，YAML 文件中定义的键既可以作为 prop，也可以在 Twig 模板中作为 slot 变量使用。
空 Slot 组件（视觉提示）
当你添加一个包含 slot 的组件时，slot 会显示为紫色占位符（而普通组件使用的是蓝色占位符）。
包含组件的 Slot
注意： 截图中展示的是未加样式的组件；加样式后的组件会更整洁，但视觉提示（占位符）仍会相互叠加。
操作页面上的组件
添加组件
- 点击左侧 Canvas 工具栏上的 加号 (+) 图标。
- 将出现所有可用组件的列表。
Content 方块是一个可以拖拽组件的占位符，但当前 UI 只能通过以下方式添加组件：
- 点击组件上的三点菜单。
- 选择 Insert。
即使组件已经有插槽，Insert 链接也会将新组件添加到主 Content 区域，而不是插槽内部。
编辑 / 删除组件
-
右键单击 组件以打开包含操作选项的上下文菜单。
-
或点击左侧工具栏上的 Layers 图标，以查看页面上所有组件的层级视图。
Summary
- Components 可以是前端（React、Vue 等）也可以是后端（Drupal 单目录）。
- Props 为编辑者公开可编辑的字段。
- Slots 允许嵌套组件，以构建复杂布局。
- Canvas UI 提供工具栏图标，用于添加、插入和管理组件，并可通过右键点击和图层视图进行进一步操作。
掌握这些基础后，你就可以在新模块的编辑器中开始构建和排列组件。祝编码愉快！
可以拖拽组件。当你点击组件名称旁边的三个点时，会看到与在页面上右键点击相同的菜单。
在我的示例中，已经定义了一个 块布局，页面上有页眉和页脚。
你不需要默认的块配置——这时 patterns（模式） 就派上用场了。
- Patterns（模式） 是组件设置的快照（例如页眉或页脚）。
- 对于重新设计，需要添加新模式，然后在所有页面上进行更改。
- 可以在组件菜单中通过 Add pattern（添加模式） 链接来添加模式。
创建前端组件
后端组件的创建与 Canvas 模块分离，对我而言，这些就是不希望编辑器随意更改的组件。
拥有 Administer code components 权限的编辑者可以创建前端组件。
点击 Manage library 图标后，会看到一个类似于点击 Add 图标时显示的列表。
最大的变化是新增了 New 下拉菜单和 Code 区域。
- 我不太明白他们为什么把 New 做成下拉菜单，因为只能添加前端组件。
- 在 Code 区域可以看到已经创建但尚未链接到组件列表的组件。
在 New 下拉菜单中点击 Code component 链接后，会弹出一个窗口要求输入组件名称。关闭弹窗后，组件的编辑界面会显示出来。
- 在右上角可以看到 Review changes 按钮，用于保存组件。
- 稍微左下方可以看到 Add to components 按钮——该按钮用于将组件添加到页面中。
在反复创建和修改组件的过程中，我注意到保存时经常会出现错误，但第二次保存时错误就不会再出现。
临时结论
虽然这些组件已经提供了很多功能，但使用一段时间后，左侧工具栏会让人感到困惑。
拥有两个相似的工具栏区域，甚至相似的弹出菜单，使我更容易点击错误的图标。我认为在导航器旁边添加一个 Manage components（管理组件）按钮并弹出相应的窗口会更清晰。
不过，这些只是初期的使用问题。