中继器

的 中继器场 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 }}、为了你和继承小部件的人。

常见问题 #

包裹起来 #

Widget Builder 中继器字段将固定布局转变为动态布局:定义子字段,将它们打印在 a 中 {% for %} loop,而之后的每一个内容决策都发生在elementor面板中:添加一张卡片,拖动到位,下个赛季删除它。与。 版式字段 对于编辑器控制的字体和 边境领域 为卡片造型,而单个小部件覆盖了页面的一整部分探索其余部分 主插件小部件和扩展,并看到 定价页面 对于每个计划包含的内容。