更新于 2024 年 10 月 29 日。
这里整理了一些给从 Oxygen 切换到（或考虑切换到）Bricks Builder 的用户的小贴士和常见问题解答。
本指南使用的 Bricks 版本：1.9.5。
目录
- 有没有 Section 元素？
- 如何在根层级添加/粘贴元素
- Block 元素是什么？
- Repeater 元素去哪了？
- 全站设置在哪儿设置？
- 怎么用 CSS Grid？
- 怎么设置条件（Conditions）？
- Bricks 有模板继承吗？
- 代码块（Code Blocks）用法一样吗？
- 给元素添加自定义 CSS
- 为什么自定义字段没有预览？
- 怎么运行代码？
有没有 Section 元素？
有。
和 Oxygen 一样，Section 元素（HTML 标签为 section）默认通栏铺满屏幕宽度。
但与 Oxygen 不同的是，Section 内部的 Container 也出现在结构面板里（你已经能感受到 Bricks 的灵活了）。这个 Container 是内部的一个 div，有固定宽度。
默认情况下，容器的宽度是 1100px。想改的话：点击 Settings 齿轮图标，新建一个主题样式，命名比如「Global」，在 CONDITIONS 下设为应用到「Entire website（整个网站）」，然后在 GENERAL 下设置你想要的 Root container width（根容器宽度），比如 1280px。
如果你想按模板或按页面单独设置根容器宽度，也是可以的：在页面/模板内，进入 Settings → PAGE SETTINGS → GENERAL。
如何在根层级添加/粘贴元素
在 Oxygen 里添加或粘贴元素前，需要先点一下「body」。Bricks 没有 body 可点。
技巧来了：在结构面板的空白处点一下，然后按 Escape 键。之后再添加/粘贴，元素就会落在根层级（页面结构最顶层）。
Block 元素是什么？
除了 Sections 和 Divs，Bricks 里还可以添加 Containers 和 Blocks。常用布局元素一览：
| 元素 | HTML | 特性 |
|---|---|---|
| Section | section |
通栏铺满屏幕 |
| Div | div |
display: block，无固定宽度 |
| Container | div |
display: flex，宽度 1100px（可改） |
| Block | div |
display: flex，宽度 100% |
Repeater 元素去哪了？
Bricks 没有像 Oxygen 那样的独立 Repeater（重复器）组件。
但它有更好的东西：查询循环（Query Loop）。
选中一个 Container/Block/Div（Block 是最常用的选择），在上面启用查询循环——这个元素就变成了重复条目（文章）。点击循环图标可以修改查询参数。通常的做法是：把启用了查询循环的 Block 放进一个 Container 里。
全站设置在哪儿设置？
点击 Settings 齿轮图标，新建一个主题样式，命名比如「Global」（如果还没建），在 CONDITIONS 下设为应用到「Entire website」。
现在你就可以设置全站的排版、颜色以及多个 Bricks 元素的默认值了。
我们建议至少把 Section 元素的 padding 设为最小值。
更多细节见我们的《Bricks 建站指南》。
怎么用 CSS Grid？
选中元素，把 Display（显示）设为 grid。
填写你想要的 Gap（间距）、Grid template columns（网格模板列）等。
然后在里面添加子元素。
怎么设置条件（Conditions）？
选中元素，点击 Conditions（条件）图标，点击 +，继续配置即可。
Bricks 有模板继承吗？
没有。
刚从 Oxygen 过来时，我们一度觉得模板是 Bricks 的短板；但用了一段时间后发现：虽然不能继承模板，但 Bricks 用 Oxygen 在模板方面缺失的其他实用功能补了回来，整体体验相当不错。
在 Bricks 中需要记住的几点：
- 没有 Catch All Template（带 Inner Content、供其他模板继承的兜底模板）概念。
- 类型为「Header」的模板自动全站生效，无需设置条件。可以在某个页面/模板上单独设置，让这个页眉不显示。
- 类型为「Footer」的模板自动全站生效，无需设置条件。可以在某个页面/模板上单独设置，让这个页脚不显示。
- 模板内部可以设置条件（Conditions），指定它具体应用到哪里。
- 举个例子：你创建了「Page」模板并设为应用到所有页面，然后用 Bricks 编辑某个特定页面（比如「Sample Page」），你可能会以为这个页面会按你在编辑器里的设计显示——但实际上它会用 Page 模板渲染。你需要编辑 Page 模板，调整条件，加一条排除规则。
- 我们在《Bricks 建站指南》里介绍了另一种稍微不同的模板搭建方式。
另外也可以在 WP 编辑器的页面中应用 Bricks 模板。
代码块（Code Blocks）用法一样吗？
开箱即用状态下，代码执行即使是管理员也没启用。
去 Bricks → Settings → Builder Access，为 Administrator（管理员）角色启用 Code Execution（代码执行）。
Bricks 里没有像 Oxygen 那样区分 HTML & PHP、CSS、JS 的独立标签页。
Bricks 的 Code（代码）元素只有一个文本框：
- PHP：用
<?php和?>标签包裹。 - CSS：用
<style>和</style>标签包裹。 - JS：用
<script>和</script>标签包裹。
代码要真正运行，Code 元素的「Execute code（执行代码）」开关必须打开。
如果你在修改现有代码，保存页面/模板前，记得先按 CTRL / CMD + R 或点击刷新按钮，让修改生效。
给元素添加自定义 CSS
Bricks 里可以给元素加自定义 CSS，而且方式比 Oxygen 更好。
在 Oxygen 里，你已经被限定在当前元素的范围内：
在 Bricks 里，你可以用 %root% 关键字指代当前元素，不必被限定在元素内部。
%root% 指代当前的 ID 或 class，既可以单独作为选择器，也可以作为复杂选择器的一部分。
为什么自定义字段没有预览？
去 Bricks → Settings → Builder。
打开「Render dynamic data text on canvas（在画布上渲染动态数据文本）」开关。
怎么运行代码？
出于安全原因，Code 元素里的代码默认不运行。
做这两件事：
- 在 Bricks → Settings → Custom code 里，为管理员启用代码执行。
- 在 Code 元素里（靠近底部）启用「Execute code（执行代码）」。
—如果你对 Oxygen 功能在 Bricks 中的对应实现还有疑问，欢迎在评论区留言。