画布与画板 · 文档

画布是一个可无限延伸、可缩放的工作面。每个页面并排显示为三个画板：桌面、平板和手机，每一个都是同一页面的实时渲染。在其中一个上编辑，其他画板会立即更新。

移动视图

每个画板都是一个沙箱化的框架，宽度等于其断点（1440、768 和 390 px）。媒体查询、position: fixed、滚动效果和字体的表现与线上站点完全一致。页面画板会随内容增高。

可以使用工具快捷键、插入菜单或上下文菜单。通过插入菜单或上下文菜单添加的新元素会放进选中的框架，或放到页面 body 中。使用工具时，你可以把元素画在想要的位置（见下文）。

Frame容纳其他元素的盒子。支持堆叠、网格或自由布局。快捷键 F。

Text标题、段落和标签。双击可直接编辑。快捷键 T。

Image来自资源库的资源，支持替代文本和懒加载。快捷键 I。

Button提交表单、运行工作流，或通过它的 Link 分区跳转到某个页面或 URL。

Link指向某个页面或 URL 的文本链接。

Link block可以容纳其他元素的链接，例如整张卡片。把内容拖进去即可。

Rich text渲染 CMS 富文本字段，并按标签应用你的类。

Collection list为查询或数组中的每个条目重复其第一个子元素。

Form包含输入框、文本域、下拉选择和复选框的表单。

Instance放置在页面上的组件副本，拥有自己的属性。

Frame F、Text T 和 Image I 工具通过按下、拖拽、松开来插入：在画板上按下，拖出一个框，然后松开。新元素会被选中，工具也会切回 Select。

元素落在哪里，取决于你画进了什么：

容器。 元素会放进按下位置下方最深的、未锁定的、且没有被所画框完全覆盖的容器。把整张卡片框起来时，元素会插在卡片旁边，而不是卡片内部。
堆叠和网格。 元素会插入到文档流中框所在的位置，放置指示线会标出位置。框决定元素的宽度和高度（文本只取宽度）。在纵向堆叠中横跨整个内容宽度的框会得到 width: 100%。
自由框架。 元素使用绝对定位，正好放在你画框的位置。
包裹已有元素。 围绕现有同级元素画出的框架会把它们包裹起来，只占一步撤销。在自由框架中，它们在屏幕上的位置保持不变。
单击而不拖拽，会以默认尺寸插入元素。

拖拽时，按住 ⇧ 绘制正方形，按住 ⌥ 从中心绘制，按住 ⌘ 关闭吸附。按 Esc 取消。Text 工具会立即进入编辑状态并选中占位文本，你可以直接输入覆盖它。

插入 Link 得到文本链接，插入 Link block 让一组元素可点击。要把现有元素变成链接，选中它们（只能是同级元素），右键选择 Wrap in link。在链接区块上，Remove link 会把它的子元素放回原处。

选中链接或按钮，打开检查器的 Link 分区：

字段	作用
Text	文本链接的标签。链接区块显示的是它自己的内容。
Bound URL	点击把 URL 绑定到表达式。在集合列表内或模板页面上，快捷选项包括 Item page（条目自己的模板页面）以及它的引用字段对应的页面，例如 Author page。参见链接列表条目。
Target	None、Page 或 URL。新链接默认为 None，在你选择目标之前不会跳转到任何地方。
Page	要打开的页面。重命名页面或修改路径后，链接会自动跟随。
URL	任意 `https://`、`mailto:` 或 `tel:` 地址。打开 New tab 可在新标签页中打开。

设置了目标的按钮会变成样式为按钮的链接。表单内的按钮总是提交表单，所以它的 Link 分区只会说明这一点：要从表单跳转到某个页面，请在表单外添加一个链接。

Layers 标签页与页面树一一对应。拖拽行可调整顺序或更换父级，按 ↵ 重命名，使用行按钮隐藏（ ⇧⌘H）或锁定（ ⇧⌘L）图层。锁定的图层无法在画布上被选中。

Pages 标签页列出站点的所有页面。每个页面都有标题和路径。CMS 集合的模板页面会为每个条目渲染一个页面；参见 CMS 模板页面。

⌘C、 ⌘X 和 ⌘V 可用于元素，也可在页面之间、站点之间使用。粘贴纯文本会创建一个文本元素；粘贴图片会先把它上传到你的资源中。 ⌘D 原地创建副本。

按 ⌘↵ 预览。交互会播放，绑定会用实时数据解析，客户端工作流会运行，这一切都直接发生在画板上。点击链接会跟随跳转：页面链接打开对应页面，指向 CMS 条目页面的链接（例如 /blog/hello）还会预览该条目，外部 URL 在新标签页中打开。设计时，点击链接只会选中它。