的 中继器场 1组控件变成用户需要的行数,你定义字段一次(一个名称、一个价格、一个描述),任何编辑elementor中的小部件的人都可以添加、复制、重新排序和从面板中删除项目,就像elementor自己的图标列表或推荐转盘小部件中的中继器一样,在主插件里面 小部件生成器中, 中继器是如何构建卡网格,菜单,功能列表,团队部分,以及项目计数取决于站点所有者而不是小部件作者的任何其他内容。
中继器与两个配套系统配对: 条件 在面板中显示或隐藏控件,以及 Twig-语法模板引擎 渲染其前端的行 {% for item in my_repeater %} 循环和虚线令牌类似 {{ item.title }}.指南都涵盖了设置和限制。
中继器与 HTML 中的模板循环一起工作: {% for %} block每行打印你的标记一次,三项渲染三张卡片;在面板中添加第四张,出现第四张卡片,不更改代码。
中继器字段的作用 #
Repeater 字段在您的小部件的选项面板中渲染 Elementor 的标准中继器控制, 当有人选择该小部件时, 他们会看到一堆可折叠的行, 其中有四个熟悉的操作:
- 添加项目: 行下方的按钮会使用您的默认值创建一个新项目。
- 重复: 复制图标克隆一行、设置等。
- 重新排序: 行拖放到一个新的顺序,页面更新匹配。
- 删除: 删除图标取出一行。
每行都会展开以显示您定义的子字段:文本、文本区域、选择、媒体、URL、图标和其他 Widget Builder 字段类型都可以驻留在 Repeater 内。这与单值字段不同 文本 以一种重要的方式:连接到 HTML 是一个循环,而不是一次性短代码。如果您是构建小部件的新手,请从 小部件生成器概述 首先。
在开始之前 #
- 文字出版社 与 元素 已安装并处于活动状态。
- Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
- Widget Builder编辑器中打开的自定义小部件,我们的示例是餐厅“签名菜”部分,它呈现出3列卡片网格,每行一卡。
如何添加中继器字段 #
在 Widget Builder 编辑器中,滚动左侧的字段面板,直到找到 中继器 字段,与其他结构字段一起列出。
将中继器拖入下面的部分 内容 tab,重复内容属于哪个地方,一旦它落地,字段的选项就会在左侧打开,而这才是真正的设置发生的地方:定义每行将携带的子字段。
中继器字段选项已解释 #
- 标签: elementor 中行上方显示的标题,例如 “Signature Dishes”。
- 名称: 整个中继器的唯一标识符,仅限字母、数字和下划线。例如,这是您的循环所指的名称
signature_dishes. - 场: 每行包含的子字段。在菜肴示例中添加每件每件内容一个—:菜名文本字段、价格文本字段、描述文本区域和标签样式选择。
- 标题字段: 哪个子字段标记折叠行,写为
{{{ dish_name }}}。默认第一个子字段,这通常是你想要的。 - 默认: widget 开头的行。发货两个或三个已填写的项目, 因此在第一次投放时, widget 看起来很活泼。
- 按钮文本: 添加按钮上的标签,例如 “添加 Dish” 而不是通用 “添加项目”。
- 防止空: 阻止用户删除最后剩余行。
- 最小/最大项目: 允许行数或行数的可选界限。
通过循环将中继器连接到您的 HTML #
以下是与每个单值字段不同的部分: 中继器没有普通的 {{shortcode}}。它的值是行列表,因此您的 HTML 将重复标记包裹在 a 中 {% for %} block。loop 内部, 每个子字段在循环变量上都是可用的:
<div class="dish-grid">
{% for dish in signature_dishes %}
<article class="dish-card">
<h3>{{ dish.dish_name }}</h3>
<span class="price">{{ dish.dish_price }}</span>
<p>{{ dish.dish_desc }}</p>
</article>
{% endfor %}
</div>signature_dishes是中继器的名字。dish是你当场发明的循环变量;称之为任何东西。{{ dish.dish_name }}prints 那行的菜名。每个子字段的工作方式都一样:{{ dish.<sub_field_name> }}.- 一切之间
{% for %}並{% endfor %}每行打印一次,按照面板中各行的顺序。
循环内的可选字段 #
将任何可选的东西包裹在 a 中 {% if %} block 所以空字段不留杂散标记 在菜式实例中, 每张卡片都有一个可选的标签徽章:
{% if dish.tag_text %}
<span class="tag tag--{{ dish.tag_style }}">{{ dish.tag_text }}</span>
{% endif %}带有空标签文本的行根本不显示徽章。 {% if %} block 也接受类似比较 {% if dish.tag_style == 'spicy' %} 当您需要按值进行标记时,标记会发生变化。
媒体和链接子字段 #
图像子字段直接打印其 URL,如 <img src="{{ dish.photo }}">(URL)子字段以相同的方式公开其地址,嵌套属性在您需要时可以使用点符号。
使用 Elementor 中的中继器 #
Elementor 中将自定义小部件添加到页面,或者如果页面已经打开,则重新加载编辑器。Repeater 显示为您设置的标签下的一堆行,每行都以其标题字段命名。
单击一行以扩展其子字段并对其进行编辑;预览实时更新。如果新行根本没有显示任何内容,请检查 HTML 中的循环名称是否与中继器的名称字段完全匹配—不匹配会默默失败,而不是丢失错误。单击 添加菜肴 (或您的按钮文本所说的任何内容), 并出现一个新的行, 带有您的默认值, 准备编辑。拖动任意行上的句柄重新排序, 页面上的卡片跟随。
因为循环打印每一行,所以布局随着内容而增长。在我们的 3 列碟形网格中,前三张卡片填充一行;第四个碟形网格在下面启动第二行,自动,因为这就是小部件的 CSS 网格包装的方式。
常见用例 #
- 卡网格 —服务、功能、定价层、菜肴或团队成员,每张卡一排。
- 菜单和价目表 —每周更换物品的餐厅、沙龙和健身房。
- Logo墙和客户端列表 —每行一个图像子字段。
- 常见问题解答和手风琴部分 —每行一个问题文本字段和一个答案文本区域。
- 时间表和流程步骤 —用户可以按顺序拖动的有序行。
使用中继器字段的技巧 #
- 循环就是连接。 没有
{{repeater_name}}短代码自行打印;中继器仅在内部有意义{% for %}…{% endfor %}. - 船舶真实默认值。 两到三行填充的行使小部件在丢弃时就变得可呈现,并且它们加倍作为每个字段期望的示例。
- 设置标题字段。 标记为"“Margherita del Forno”的折叠行比全部标记为"“的三行更容易管理。
- 保护可选字段
{% if %}. 空跨度和空包装纸是看不见的,直到它们打破你的间距。 - 让 CSS 处理行计数。 一个网格与
repeat(3, 1fr)单独将额外的项目包装到新行;循环只是打印卡片。 - 清楚地命名子字段。
{{ dish.dish_price }}在模板中读取效果比{{ dish.field_2 }}、为了你和继承小部件的人。
常见问题 #
Master Addons Widget Builder 中的中继器字段是什么?
Repeater 字段将 Elementor 的可重复行控件添加到自定义小部件中,您定义了一组子字段一次,用户从 Elementor 面板中添加、复制、重新排序和删除行,您的 HTML 通过 for 循环打印每一行,因此布局会随着内容而增长。
如何在我的小部件 HTML 中显示中继器项目?
将重复标记循环包装: {% for item in my_repeater %} … {% endfor %},在哪里 my_repeater 是中继器的名称,在循环内部,打印子字段与 {{ item.sub_field_name }}。块每行渲染一次,按面板顺序。
哪些字段类型可以进入中继器内部?
Widget Builder 常见的字段类型工作为子字段:文本、文本区域、选择、选择、媒体、URL、图标、滑块以及其中的维度,每行都带有自己为你定义的每个子字段所设定的值。
我可以限制用户可以添加多少项吗?
是。Min Items 和 Max Items 绑定行数,并且防止空行阻止最后一行被删除。将它们未设置,列表是无限的。
第一行满后多余的卡片如何流动?
That is the widget CSS 的作业,而不是 Repeater 的作业,一个网格容器,比如说,三列,自动将第四项包裹到一个新行,循环每行只输出一个标记块,布局从那里获取。
为什么我的崩溃行说的是“Item”而不是它的名字?
Title字段是未设置的或者指向一个空子字段,像这样设置为三括号模板 {{{ dish_name }}}的,使用你的第一个子字段的名称,并且每个折叠的行显示其自己的值。
包裹起来 #
Widget Builder 中继器字段将固定布局转变为动态布局:定义子字段,将它们打印在 a 中 {% for %} loop,而之后的每一个内容决策都发生在elementor面板中:添加一张卡片,拖动到位,下个赛季删除它。与。 版式字段 对于编辑器控制的字体和 边境领域 为卡片造型,而单个小部件覆盖了页面的一整部分探索其余部分 主插件小部件和扩展,并看到 定价页面 对于每个计划包含的内容。
