Aumframe 使用指南

Aumframe 是 WordPress 的可视化设计器，不依赖特定主题，也不要求安装其他插件。

1. Aumframe 的工作方式

大多数页面构建器是把一套版式挂在一篇文章上。 Aumframe 是把一份设计挂在一条规则上,由规则决定它接管前台的哪些地址。

这种路由方式有两个直接结果：

• 一份设计可以应用于所有文章、所有分类归档页、404 页，或规则所匹配的其他地址。
• 当设计接管某个地址时，它会替代主题原本为该地址生成的前台内容。下面的示例中因此不会显示主题页头和页脚。

设置对话框对这一规则的说明是：「规则决定这份设计接管前台的哪些地址。」

2. 安装

无需额外配置。安装并启用插件即可。

1. Aumframe 已启用，并且是该测试站点唯一安装的插件。
2. Aumframe 添加一个顶级菜单。其下的表单、询盘、内容模型和翻译版面将在后续章节说明。

3. Aumframe 后台

1. 新建空白设计稿 —— 创建一份仅包含根框架的设计，并直接打开设计器。用于从空白开始创建设计。
2. 已保存的模板 —— 显示全部已保存设计及其类型、规则和优先级。新站点中该列表为空。
3. 导入场景 —— 粘贴场景 JSON。浏览器会先将其编译成 HTML 和 CSS 再提交； PHP 不负责节点树编译，因此产品只维护一套渲染实现。本节流程不需要使用场景导入。

4. 创建设计

按新建空白设计稿,设计器打开。

1. 插入 —— 十一种原语。点一下插到页面末尾,或者拖到画布上。下面的图层是节点树; 空白设计一开始只有一个 Page 节点,排列方式是纵向堆叠。
2. 中间是画布。虚线框是根框架。
3. 右边是检查器 —— 没选中东西时是空的。
4. 保存。旁边是预览和▶ 实况。
5. 桌面 / 平板 / 手机 —— 选择画布当前显示的断点。针对不同断点设置具体值时， 使用检查器中的断点控件；见 §5。

4.1 加一个标题

在插入面板点标题。它出现在画布上并被选中。检查器默认停在样式页, 切到内容页才能改字:

1. 内容 —— 文字本身。
2. 标签 —— h1 到 h6。这是它在文档大纲里的层级,和它看起来多大无关。 先选对层级,再去样式页调大小。

4.2 加一段正文

点文字,切到内容页,打一句话。然后看检查器:

1. 内容 / 样式 / 动效 / 数据 —— 选中元素的四个标签页。
2. 默认 / 悬停 / 按下 / 聚焦 / 展开 / 已滚动… —— 当前编辑值所属的状态。 「默认」表示正常状态。
3. 桌面 / 平板 / 手机 —— 这些值属于哪个断点。

每一个设置值都属于一个明确的状态 × 断点组合。修改未按预期显示时，先检查当前选中的状态和断点。

它们下面,样式分成布局(可见性)、尺寸(宽高,各有 固定 · % · 填满 · 收紧 和上下限)、 定位(在流中 · 绝对 · 粘性 · 固定)、间距等。

4.3 配置设计路由

没有路由的设计不会出现在站上任何地方。打开 ⋯ → 模板设置:

1. 名称 —— 只在后台显示,访客看不到。
2. 类型 —— 七种,它决定这份设计能接管哪些地址:

选单个页面,再选具体页面:

1. 页面 —— 「必须选一个。留空的话,这份设计不会出现在任何地址上。」

按保存设置,再按顶栏的保存。

4.4 检查前台结果

打开已绑定的页面：

主题的页头和页脚都不见了。设计就是整份文档。

需要在多份设计之间共用页头和页脚时，使用站点外壳，无需在每份设计中重复添加。见 §7。

5. 构建页面布局

Aumframe 使用嵌套容器构建页面布局。每个容器负责定义子元素的排列方向、间距和尺寸。

本节将创建一个文字与图片并排的双栏区块，并在手机断点将其改为纵向堆叠。

5.1 创建区块容器

插入一个容器。选中它,打开样式:

1. 排列方式 —— 堆叠 · 网格 · 自由 · 并入父级。堆叠用于将子元素沿单一方向排列，适合多数线性布局。
2. 方向 —— 横向 · 纵向(以及反向)。用于设置子元素的排列方向。
3. 间距 —— 子元素之间的距离。兄弟元素之间的间隔由父容器统一控制，无需分别设置外边距。
4. 内边距 —— 容器内部、内容四周的留白。⛓ 开关用于联动四边；联动开启时， 为「上」输入一个值会同时应用到四个方向。

设成方向:横向、间距 48、内边距 56。

5.2 嵌套元素

插入面板会根据当前选中的元素，显示下一个元素的插入位置：

要将元素插入某个容器内部，先选中该容器。无需定位额外的拖放区域。

保持区块容器选中，再插入一个容器。新容器会添加到区块内部，作为文字列。 将其设置为宽度:填满、方向:纵向、间距 16，然后插入一个标题和一段文字：

左侧的图层树显示当前节点层级。本例的结构为： Page → 容器 → 容器 → 标题、文字。

5.3 填满、收紧与固定尺寸

每个元素的宽度和高度使用四种模式之一。面板会显示当前所选模式的说明：

宽度·上下限(最小/最大)用于限制最终尺寸。图片设置为填满并指定最大 480后， 可以随布局扩展，但不会超过 480px。

5.3b 其他排列方式

排列方式共有四种。堆叠用于线性布局，其余三种分别用于网格、自由定位和并入父级的场景。 将鼠标停在选项上时，编辑器会显示对应说明：

「并入父级」不会生成容器自身的盒子。面板说明：「背景、边框、内边距、圆角全部失效 —— 已经没有盒子可画了。」 当子元素需要直接参与祖父级布局时使用该模式。

5.4 添加第二列

再次选中外层区块容器。通过图层中的对应节点进行选择，以便与内部文字列区分：

如果当前仍选中文字列，下一个元素会被插入列内部，而不是作为并列元素添加。 插入第二列之前，可在图层中确认当前选中的节点。

现在插入一张图片。它落在区块里、文字列后面 —— 第二列。把它的宽度设成填满:

最终结构由一个横向区块容器、区块内部的纵向列容器，以及列内的内容元素组成。

5.5 配置手机断点

把顶栏切到手机,选中区块容器,把方向设成纵向:

1. 方向,只改了手机这一档。桌面保持横向。

断点设置属于属性覆盖，而不是另一套独立布局。本例只为手机断点覆盖方向； 没有设置手机覆盖值的属性继续沿用桌面值。

编译后的样式如下：

.af-n_1 { display: flex; flex-direction: row; }
@media (max-width: 640px) { .af-n_1 { flex-direction: column; } }

5.6 保存、绑定并检查结果

⋯ → 模板设置,起个名字,类型:单个页面,选页面,保存设置,再保存。

实际前台页面的测量结果如下：

5.7 两份设计,同一个地址

如果两份设计匹配同一个地址，前台只会渲染其中一份。优先级相同时，仅从前台结果不一定能判断具体使用了哪一份设计。 已保存的模板会显示每份设计的规则和优先级，可用于排查路由冲突。

5.8 构建完整模块

前面的示例使用了最少的样式，以便清楚展示布局机制。下面的首屏模块使用相同的控件完成， 并且直接在设计器中搭建，没有导入场景：

用到的东西都在前面几节里:一个横向容器(深色背景、96 内边距、间距 64), 里面一个纵向文字列(眉题 13px 字距拉开全大写、标题 58px 字重 700 行高 1.04、 正文 19px 行高 1.62),旁边一张图片(填满、最大 560、圆角 18)。

新插入的文本会继承前一个兄弟节点的排版设置。 在上面的示例中，正文继承了眉题的 「全大写 + 字距 2.4 + 字重 600」。插入后应明确重置不需要继承的属性 (字母大小写:不变、字距 0、字重:常规)。标题使用不同预设，不受这一行为影响。

6. 将设计绑定到内容

直接输入设计中的文字属于静态内容。通过绑定，节点可以读取当前内容对象的字段， 从而让同一份设计用于多篇文章或其他内容。

6.1 数据标签页

选中任何一个文本节点,打开数据:

1. 内容 —— 文字从哪里来。不绑定就是「用我打的字」。否则挑一个字段:

| | | |---|---| | post.title | 文章标题 | | post.excerpt | 摘要 | | post.content | 正文(富文本) | | post.date | 日期 | | post.url · post.author.name · post.author.url | | | post.thumbnail.url · .alt · .hasImage | 特色图 | | site.title · site.description · site.url · site.logo … | 站点级的值 |

1. 链接地址 —— 单独绑定这个元素去哪里,和它说什么分开。 标题绑 post.title、链接绑 post.url,这两条合起来就是一张完整的「文章卡片」。
2. 按字段决定显示与否 —— 条件显示。绑到 post.thumbnail.hasImage 上, 没有特色图的文章上这个元素就消失,而不是留一个洞。

添加绑定后会出现第四项：取不到时显示。当绑定结果为空时，前台显示该字段中的备用内容。 如果该字段留空，则这个节点不会输出备用内容。

做三个:标题、日期、正文:

画布仍显示节点自身的占位内容，因为画布没有对应某一篇具体文章。绑定会在前台解析。

6.2 将设计应用到内容类型

要将绑定后的设计应用到某一内容类型，打开 ⋯ → 模板设置 → 类型:内容模板：

• 「每一篇文章,或者某一个内容类型的全部。」
• 内容类型 —— 文章填 post,页面填 page,自定义类型填它的别名。
• 「一条规则接管该类型的每一篇内容。不指定具体 ID 就是全站生效。」

该设置生成的规则为 {"kind":"singular","post_type":"post"}。

6.3 检查内容模板效果

两篇不同的文章,同一份设计,没有再写任何东西:

设计负责定义展示结构，WordPress 提供绑定内容。新增符合规则的文章后，无需再次修改设计。

6.4 列表 —— 一条查询加一个循环

绑定节点显示当前内容对象的某个字段。要显示列表，例如博客索引、「相关作品」或三个精选项目，需要两部分：

1. 一条数据查询,说明取哪些内容;
2. 一个循环,指向那条查询。它的第一个子元素是「一行」的模板,循环会按结果重复它。

插入一个循环。检查器将其标记为 Repeater，插入面板显示「排列方式:3 列网格」。 循环本身是一个容器，并且默认使用网格排列。

它的数据标签页有一节循环的来源,一开始没得可选: 「这个循环还没有可重复的内容。」

创建查询

数据 → 数据查询 → ＋ 新建。

1. 数据源 —— 内容 · 分类项 · 本页自己的查询 · 本内容的某个字段 · 面包屑。 内容会独立获取内容。本页自己的查询则复用 WordPress 已经为当前地址解析的结果： 「搜索结果页必须用它,归档页要靠它分页。」
2. 内容类型 —— 文章 · post、页面 · page,或站上任何自定义类型。
3. 取几条。
4. 排序依据 —— 发布日期 · 标题 · 手动排序 · 随机 · 评论数 · 自定义字段,另有方向。

下面还有:按分类法筛选、排除当前文章(做「相关文章」时要打开它, 否则读者正在读的那篇会出现在它自己的列表里)、只要某个字段满足…、跟随当前分类项。

设成按发布日期取 3 篇:

将循环连接到查询

重新选中循环,把重复哪一条查询设成那条查询:

• 重复哪一条查询 —— 未设置时，循环不会在前台输出内容。如果列表没有显示，先确认这里是否已选择正确的查询。
• 一行叫什么 —— 默认 post。子元素绑定使用这个名称；完成绑定后再修改名称，需要同步更新相关绑定。

构建单行模板

在循环中插入一个容器，再放入一个绑定 post.title 的标题和一个绑定 post.excerpt 的文字， 绑定方式与 §6.1 相同。第一个子元素定义单行模板，循环会按查询结果重复该模板。

保存设计并将其绑定到页面后，前台结果如下：

对应的存储数据为：

queries:  { "q1": { "postType": "post", "limit": 3, "orderby": "date", "order": "DESC" } }
循环:      { "as": "post", "queryId": "q1" }
子元素:    post.title · post.excerpt

1.21.0 之前的已知问题。 在那之前,选中循环再点数据标签页会让设计器崩溃 —— 「循环的来源」那一节不存在,所以循环的查询只能靠导入场景 JSON 来设。 版本更老的话,先升级再看这一节。

6.5 归档与当前页面查询

§6.4 使用自定义查询获取内容。归档的处理方式不同：WordPress 已经为当前地址解析了需要显示的文章， 例如分类页、标签页或文章列表页。设计只负责渲染这组既有结果。 如果另外创建一条独立查询，会丢失当前归档上下文并影响分页。

所以查询的数据源要设成本页自己的查询:

「使用本页自己的查询结果。搜索结果页必须用它,归档页要靠它分页。」

然后 ⋯ → 模板设置 → 类型:归档模板:

1. 分类法 —— category、post_tag,或自定义的。*「留空就是文章列表页。」*
2. 内容类型 —— 留空就是任意。

两个都留空,这份设计覆盖站上所有归档页;填一个,就只覆盖那一类。

分页

一个只显示四十篇中十篇的归档页,需要通往另外三十篇的链接。 插入一个表单/短代码原语,填 [aum_pagination]:

在一个有四篇文章、「博客页面至多显示 2 篇」的分类上量出来:

进入第 2 页后，循环显示另一组文章，而设计本身保持不变。这说明循环使用的是当前页面查询。

文章数量未超过单页容量时，WordPress 不生成分页链接，短代码也不会输出内容。

站点根地址不是归档页。 「设置 → 阅读」选了「最新文章」时, / 报的是首页而不是归档页,归档模板不会接管它。 给根地址单独做一份设计,类型选「首页」 (1.24.0 加的 —— 在那之前这个选项不在清单里,尽管引擎一直支持这条规则)。

7. 站点外壳：共用页头和页脚

当设计接管某个地址时，主题的页头和页脚不会继续渲染。站点外壳用于为这些设计提供共用的外围结构。

外壳本身不匹配任何地址，页面设计会渲染在外壳内部。设置页对其行为说明如下： 「外壳不参与任何地址匹配。放一个「插槽」原语进去, 内容模板的输出就填进那里。它在任何主题下都成立 —— 页头和页脚来自这里,不来自主题。」

7.1 创建站点外壳

新建设计 → ⋯ → 模板设置 → 类型:站点外壳 → 保存设置。

然后按页面从上到下的顺序搭:

1. 一个容器当页头 —— 设成方向:横向,给点内边距,里面放一个标题;
2. 一个内容插槽(原语,左下角);
3. 一个容器当页脚。

外壳的图层结构如下：

Page
  容器         ← 页头
    标题
  内容插槽      ← 每个页面自己的设计落在这里
  容器         ← 页脚
    文字

按保存。不需要设置路由:外壳没有路由。

7.2 检查站点外壳效果

§5 和 §6 中的设计无需修改。保存外壳后，这些设计都会渲染在外壳内部：

三份完全不同的设计 —— 内容模板渲染的文章、用循环搭的索引页、一次性的页面 —— 上面是同一个页头,下面是同一个页脚。当前主题仍然是 Twenty Twenty-Five,它一点都没参与。

7.3 站点外壳的必要条件

没有内容插槽时，外壳无法渲染页面设计。 外壳保存后会立即全站生效，因此应在发布前添加内容插槽。

每个外壳使用一个插槽。 插槽有自己的名称(默认 content)，页面输出会进入对应名称的插槽。

需要 1.22.0 或更新。 在那之前,内容插槽这个原语不存在 —— 设置面板会要求添加当时界面无法插入的内容插槽，而且按下保存设置后， 下一次保存会失败并提示「这份设计在你打开之后被别处改过」。 版本更老的话先升级,这两个都修好了。

8. 复用：组合件、组件和实例

插入面板提供三种不同的复用机制，其行为并不相同。

8.1 组合：预先搭好的节点树

站点页头、按钮、区块、行都是预先排好的节点树。插入之后，这些节点与原组合之间不再保持关联； 修改某个已插入的组合不会影响其他副本。

8.2 组件：一个母版，多个实例

组件标签页包含两组：随站附带的共享库(空心图标)和用户创建的组件(实心图标)。 尚未保存自定义组件时，只显示共享库：

要做自己的,先按普通容器搭一次,在图层树里选中那个容器,按存为组件:

界面会要求输入组件名称：

组件名称应描述其用途或内容，而不是当前所在页面。例如，联系条在联系页、页脚或落地页中都仍然适用。

保存后，该组件会进入组件库并标记为用户创建，栅格下方的说明变为 「实例跟着组件走。改一次,每一处都变。」

8.3 组件实例

再放一次,选中它。检查器显示的类型不再是 Frame,而是`实例`:

• `联系条 · 用在 2 处` —— 这个计数是活的,而且统计的是整个站,不只是当前设计。
• 组件内容 —— 每个实例可以单独覆盖各部件的文字，这里是标题和文字。 「留空则跟随组件默认。」 因此结构和样式保持共享，而不同实例可以使用不同内容。
• 编辑组件打开母版。「在那里改的结构和样式会到达每一个实例。」

保存组件后，更改会应用到这个站中所有使用该组件实例的模板。修改组件时应按站点级复用范围进行检查。

9. 动效

动效标签页包含四个可独立启用的驱动，以及一组预设文字特效。同一个元素可以同时启用多个驱动。

9.1 画布中的动画状态

一份满是进场动画的设计,在画布上会是一堆看不见的元素。所以画布把每个动画显示成已经播完的样子, 旁边那个▶ Play once 才是用来看效果的:「否则元素是透明的,根本点不中。」

因此，画布显示的是动画最终状态，而不是初始状态。

9.2 配置进场动效

• 进场方式 —— 从下方等等。
• 弹性 —— 「左边干脆,右边松软弹跳。」
• 触发点 —— 「元素露出多少才开始。」 0.2 就是露出五分之一。

9.3 在指定视口宽度以下禁用动效

驱动上方的只在这个宽度以上 → 最小视口宽度用于设置禁用动效的视口范围：

「低于这个宽度,元素完全没有动效,直接显示最终状态 —— 这是把墙面动效或倾斜效果从手机上摘掉的办法,不用为手机再做一份。」

这样可以在较小视口禁用动效，而不需要创建第二份设计。

9.4 特效

选一个:无、逐字、液态文字。「参数已经调好了,留给你的只有强度。」 这些是针对整个元素的处理,不是属性动画,所以它们和那四个驱动是分开的。

9.5 滚动驱动

启用滚动驱动后会出现一个效果控件，提供视差上升、滚动淡入、滚动缩小、滚动旋转 四个预设，默认值为视差上升。

该驱动会持续根据页面滚动位置计算效果。折叠状态中的说明为： 「每一帧都跟着滚动位置插值 —— 不是「到某个点触发一次」。」 因此，页面向下滚动时元素会按滚动进度进入效果，向上滚动时则按相反方向返回。 这与只在满足触发条件后播放一次的进场动效不同。

下拉框还可能显示自定义。当已保存的参数无法匹配任何当前预设时会出现该状态， 例如设计来自 kit 或旧版本。自定义用于表示现有参数状态，不是可以直接选择的预设。

9.6 指针跟踪

1. 效果 —— 3D 倾斜、磁吸、水平位移。
2. 参照 —— 自身、父级、窗口。「光标位置是相对这个元素量,还是相对整个窗口量。」 选择自身时，效果根据元素范围内的指针位置计算；选择窗口时，页面任意位置的指针移动都可以参与计算。
3. 弹性 —— 「左边干脆,右边松软弹跳。」 该滑块用于统一调整弹簧响应，不单独暴露刚度和阻尼参数。

启用3D 倾斜时，Aumframe 可能会向所选元素的父节点添加透视值。面板说明为： 「需要父级有透视,面板替你加上。」 如果父节点原本没有透视值，系统会添加 perspective: 900。rotateX 和 rotateY 需要该透视值才能产生可见的 3D 效果。

9.7 持续运动

1. 效果 —— 上下浮动、呼吸缩放、明暗脉动、左右漂移、缓慢旋转。
2. 一个周期 —— 「单位秒。越长越安静。」 内置预设的周期分别包括：脉动 2.4 秒、 浮动 4 秒、漂移 7 秒、缓慢旋转 24 秒。

持续运动没有触发条件：「页面一加载就开始动。」 页面处于活动状态时，所选动效会持续运行。

9.8 在同一元素上组合多个驱动

进场、滚动、指针和持续运动是四个相互独立的驱动。只要它们控制不同属性，就可以同时启用。 例如，滚动驱动可以控制纵向偏移，持续运动同时控制缩放；引擎会分别处理 transform 的不同分量。

当两个驱动写入同一个属性时会发生冲突。此时后绑定的驱动提供实际生效的值， 较早绑定的值仍会保存在数据中。绑定顺序为滚动 → 循环 → 指针， 因此同一属性发生重叠时，顺序靠后的驱动优先。

编辑器会针对这类冲突显示警告：

例如，滚动驱动默认的视差上升和持续运动默认的上下浮动都会写入纵向偏移。 同时启用后会出现警告，并提供操作用于从被覆盖的驱动中移除重复属性。

另外三类冲突使用相同的警告机制：

这些冲突不会产生渲染错误。被覆盖的设置仍会显示在面板中，但对应效果不会应用。 可根据面板警告定位并移除发生重叠的属性。

10. 内容模型：无需代码的内容类型

站点通常还需要「文章」和「页面」以外的结构化内容，例如自行车、案例、招聘或常见问题。 Aumframe → 内容模型用于定义这些内容类型及其字段，无需编写代码，也不需要额外插件。

「定义存在数据库里,不在代码里 —— 所以可以导出成模型包,下一个同行业的站直接导入。」

10.1 创建内容类型

• 单数名 / 复数名，以及一个标识符。标识符不能在不创建新类型的情况下修改： 「改了它就是另一个类型,已有内容会变成孤儿。」 创建内容前应确定一个简短、全小写的标识符。
• URL 前缀和菜单图标。
• 在前台可见(有自己的地址) 和 有列表页(归档) —— 「列表页就是 Aumframe 归档模板可以接管的那个地址。只用来存数据的类型 (常见问题、下载)不需要它。」 只在别的页面里被引用的东西,把列表页关掉。
• 内置区域 —— 标题、正文、摘要、特色图、排序、评论。这个类型没有的就关掉, 编辑界面上也就不再出现。
• 把这个类型当商品目录用 —— 「让版式通过电商站和询价站共用的那套路径 绑定价格和行动按钮,于是同一张商品卡在任何站型上都成立。」 这正是同一张卡既能服务商店、又能服务询价站的原因。

10.2 字段

+ 添加字段给这个类型它自己的数据。十七种:

这些字段类型都可以在设计器的数据标签页中绑定(§6.1)。例如，自行车内容中的车架尺寸字段 可以直接绑定到文字节点显示。

删字段不会删内容:「已有内容不会被删除,但前台再也读不到它。」

10.3 分类法

+ 添加分类法用于定义内容分组方式。层级式设置决定其行为： 「勾上「层级式」像分类目录(一辆车属于一个系列)。不勾像标签(一件东西可以有很多个)。」

10.4 模型包

导出把整个模型 —— 类型、字段、分类法 —— 写成 JSON。下一个同行业的站粘进导入。

• 导入默认只增加:已经存在的类型保持它现在的定义。
• 全部替换也可使用，并明确标记为危险:会覆盖当前定义。仅在确实需要替换现有定义时使用。

11. 表单和询价

Aumframe → 表单是表单生成器;询价是提交落地的地方。

11.1 创建表单

Aumframe → 表单列出已有的表单,每个旁边带提交数:

新建打开生成器:

起个标题,加字段,再设定提交之后发生什么:

11.2 将表单添加到页面

侧栏会提供短代码 [aum_form id="12"]，并说明其适用位置：

「在区块编辑器、经典编辑器和小工具里都行。用 Aumframe 搭的页面上,改放一个「表单」节点。」

在 Aumframe 设计中使用表单 / 短代码原语并选择对应表单；在区块编辑器、经典编辑器或小工具中使用短代码。

11.3 询价

每次提交都会在发送邮件通知的同时存入 Aumframe，并可按表单筛选和统计。 即使通知邮件被退回或进入垃圾邮件，后台仍保留对应的提交记录。

12. 翻译版式

空状态会说明 Aumframe 与多语言插件之间的职责分工：

「没有可用的语言。请先安装并配置一个多语言插件 —— 这个页面翻译的是版式, 那个插件翻译的是你的内容。」

Aumframe 不负责翻译文章内容。它会提取设计中输入的文字，例如标题、按钮文字和嵌入块的同意提示， 并将这些文字交给已配置的多语言插件处理。翻译后的页面因此可以继续使用相同的 Aumframe 版式。

12.1 语言列表的来源

语言列表通过 aumframe/translatable_languages 过滤器提供，而不是通过扫描已安装插件生成。 如果没有任何组件向该过滤器提供语言，它会返回空数组，页面保持上面的空状态。

站点需要配置一种默认语言以及至少一种其他语言，语言才会出现在这里。 是否已经完成翻译不影响语言列表；该页面列出的是可用语言，而不是翻译完成度。

语言识别与版式文字翻译

识别站点语言和翻译版式中的文字是两项独立能力。在使用 WPML 或 Polylang 的站点上， 这两项能力可以由不同插件提供：

因此，在 WPML 或 Polylang 环境中，该页面可以正常列出已配置语言，即使当前没有组件能够翻译版式文字本身。 页面顶部会明确提示这种状态。WPML 和 Polylang 负责翻译文章和页面内容；直接保存在设计中的文字不属于文章内容。

如果一次翻译请求没有返回任何译文，Aumframe 会停止该次操作，而不会保存一份未翻译的副本并将其标记为最新。 系统会区分“当前没有可用的版式翻译器”和“存在翻译器但本次返回为空”两种情况；后者可能由密钥过期或配额耗尽导致。 如果只返回部分译文，已返回的内容会正常保存，缺失部分继续使用源语言。

12.2 翻译版式页面

存在可选语言后，页面会按当前选择的语言列出站内设计：

1. 语言 —— 选择当前表格所对应的语言。
2. 翻译所有过期的 —— 对当前语言下所有已过期的设计执行批量翻译。

每一行代表一份设计，并显示其 slug 和以下状态信息：

翻译所有过期的可一次更新多份已过期版式，适用于一轮设计修改后同时出现多份过期译文的情况。

13. 其他原语

前文仅提到以下六个原语，本节分别说明其用途和配置项。文中引号内容均保留面板中的原始说明。

13.1 图标

1. 挑一个 —— 提供 29 个内置图标，面板说明为「内置 29 个,颜色都跟着文字走。」 图标使用 currentColor 的内嵌 SVG，因此会继承所在文字上下文的颜色，不需要单独配置颜色。
2. 自定义 SVG —— 用于输入自定义 SVG 内容。「只写 `<svg>` 里面的内容,按 24×24 的格子画。 填了这里,上面挑的图标就被忽略;清空就回去。」

自定义路径应按照 24×24 坐标系绘制。填写自定义 SVG 后，它会覆盖已选择的内置图标； 清空该字段后会恢复此前选择的内置图标。

13.2 形状

形状原语提供三个用于自定义 SVG 的字段：

1. viewBox —— 「定义内部坐标系 —— 它决定 SVG 里那些数字怎么换算。」 例如，0 0 300 70 表示 SVG 内容使用 300×70 的内部坐标空间，与元素最终渲染尺寸相互独立。
2. 缩放方式 —— 拉伸填满、保持比例 · 居中、保持比例 · 左上。 面板说明为：「『拉伸填满』适合可以变形的东西,比如折线图;『保持比例』适合图形。」
3. SVG 内容 —— 「只写 `<svg>` 里面的内容。用 currentColor 跟随文字颜色。」

与固定使用 24×24 坐标系的图标不同，形状可以自定义 viewBox，因此适合宽幅折线图、分隔线等图形。

13.3 画布

画布没有原语专属的内容字段，只保留所有元素共有的设置。前台输出为一个空的 <canvas> 元素。

该原语用于为组件行为或自定义脚本提供绘图区域，同时参与 Aumframe 的常规尺寸规则； 画布本身不会自动绘制内容。

新插入的画布默认高度为 260px，宽度为填满。由于 canvas 没有由内容产生的固有高度， 如果高度使用收紧，计算结果可能为 0。

动效面板中的两个 WebGL 效果(光标涟漪、液态扭曲)不能用于画布， 仅对图片、视频和容器开放。

13.4 音频

1. 音源 —— 从媒体库选择文件。面板提示：「在循环里改成绑一个音频字段 —— 一行一段。」 在循环中绑定音频字段后，每条结果可以显示各自的播放器(§6.4)。
2. 地址 —— 同一音源的文本地址，可用于外部托管文件。
3. 控件 —— 原生或无。「某个行为(音频列表)自带播放按钮时关掉它。」
4. 预加载 —— 不预载、仅元数据、自动，默认值为不预载。 页面存在多个播放器时，该默认设置可以避免在播放前同时请求大量音频文件。

13.5 嵌入

1. 地址 —— 用于地图、视频、预约日历等第三方内容。「地图、视频、预约日历。人家给你的是一整段 `<iframe>` 就整段粘进来 —— 地址会从里面取出来。」
2. 形状 —— 16:9、4:3、3:2、1:1、21:9，或填满容器。
3. 加载前先问一下 —— 默认开启。「开着:访客点一下的占位。第三方 iframe 一加载就会联系那个第三方, 还可能写 cookie,所以这既是对隐私安全的默认,也是更快的默认。」
4. 启用同意闸后，会出现按钮文字和小字说明两个字段，默认值分别为 「加载这段内容」和「加载它会联系第三方,并可能写入 cookie。」。

下方的原始 HTML(高级)用于无法通过 URL 表达的嵌入内容，面板说明为「只在上面没填地址时才用」。 如果上方已经填写地址，原始 HTML 不参与渲染。

13.6 表单 / 短代码

该原语只有一个字段，默认填入 [aum_form id="1"]。站点已有表单时，可以直接从下拉列表选择； 如果还没有表单，面板会显示：「还没有表单。去「AumCreate → 表单」建一个,或者直接在这里打别的短代码。」

该字段同样支持其他 WordPress 插件提供的短代码，因此任何能够通过短代码输出的内容都可以放入 Aumframe 设计中。

13.7 所有元素共有的设置

以下三个设置区会出现在所有元素的检查器中：

站点页头之外还提供三个组合件：按钮(「容器 + 文字 + 一个悬停状态」)、 区块(「一条通栏,里面是跟随主题内容宽度的居中内容列」)、 行(「横向容器,里面两个等宽格子」)。

14. 由 WordPress 管理的页面数据

设计替换的是前台渲染结果。页面本身仍然是 WordPress 页面，以下数据继续由 WordPress 管理：

• 文章标题和固定链接,
• SEO 描述和 og:description —— 它们仍然来自这篇文章自己的正文, 哪怕那段正文已经不再显示了,
• 以及挂在这篇文章上的其他一切 —— 作者、日期、修订版本、评论设置。

在上面的示例中，页面可见正文全部来自设计，而 <meta name="description"> 仍包含 WordPress 页面原有文案。

不要因为 Aumframe 已接管前台渲染就清空 WordPress 页面的正文。 在当前验证环境中， 该正文虽然不再显示，但仍用于生成描述信息。

15. 故障排查

「发现刚才未保存的改动 —— 上一次很可能是意外结束的。[恢复] [丢弃]」 Aumframe 会在编辑设计时保留本地草稿。如果标签页关闭、浏览器异常退出，或在保存前离开页面， 下次打开该设计时会提供草稿恢复选项。恢复加载未保存的草稿；丢弃删除草稿并保留数据库中的版本。 丢弃无法撤销。 如果不能确定草稿内容，应先恢复并检查，再决定是否丢弃。

修改未按预期生效。 看检查器里的状态行和断点行(§4.2)。设在悬停 × 手机上的值, 在默认 × 桌面组合下不会显示。

设计未在前台显示。 打开 ⋯ → 模板设置检查路由。没有绑定页面或没有匹配规则的设计不会在前台渲染。

16. 可选集成

本节中的集成全部为可选项。本指南的全部流程均在仅安装 Aumframe、使用 WordPress 自带主题的环境中完成验证。

AumCreate 主题

一份设计覆盖的是它的规则匹配到的那些地址。其余的 —— 404、购物车、账户页、 作者页 —— 还是主题的。在这个站上实测,同样两个地址、两个主题:

AumCreate 主题不会改变已经由 Aumframe 接管的地址。对于没有设计匹配的页面， 它通过自身的 header.php / footer.php 渲染外壳，使站点外围结构保持一致。

AumKit

一个 kit 包含 Aumframe 设计、内容模型和媒体。安装前，AumKit 会检查 kit 声明的依赖， 并逐项报告 缺少 · 没启用 · 版本太旧 · 可以。

AumNexCart 与 AumReserva

两个插件都可以独立运行，并且没有直接引用 Aumframe(验证版本中两个插件均有 0 个文件提及它)。 集成通过 §10 的「把这个类型当商品目录用」完成。内容类型启用该选项后， 卡片设计可以通过统一路径绑定价格和行动按钮，而不依赖具体由哪个插件提供数据。

一个多语言插件

见 §12。Aumframe 负责提供设计中的文字，多语言插件负责翻译文章内容，两者职责分离。

17. 预览、Live 与隐藏分支

顶栏提供三个用于不同预览和编辑场景的控件。

使用 Live 检查动效和交互，使用预览打开已保存的真实前台结果，使用 ◌ 显示画布中被条件隐藏的分支。