如何创建灵活的CMS详情页面

如何创建灵活的CMS详情页面

在本指南中,我们将介绍如何在 Framer 中使用条件语句来创建灵活的 CMS 详情页面,从而实现可根据内容动态调整的布局。

使用条件逻辑控制可见性 “已设置”

控制可见性的最简单方法是使用 “已设置” 条件。此条件用于检查某个元素(例如图像)是否已添加到页面中。

  • 如果已添加图像,则显示该图像。

  • 如果没有添加,则保持隐藏状态。

这种方法无需额外的 CMS 字段,非常适合简单的使用场景。

在“设置变量”下拉菜单中显示“已设置”选项。

其他条件选项

条件逻辑还支持基于文本的判断标准,例如:

  1. 等于

  2. 不等于

  3. 以...开头

  4. 不以...开头

  5. 以...结尾

  6. 不以...结尾

  7. 包含

  8. 不包含

这些条件允许你通过特定文本匹配来控制元素的可见性。

使用选项字段控制可见性

设置选项字段

要在你的 CMS 集合中添加选项字段,请执行以下操作:

  1. 进入 CMS 视图

  2. 点击 编辑字段

  3. 点击 加号 图标以添加新字段。

  4. 从下拉菜单中选择 选项

创建如“显示1张图像”或“显示3张图像”之类的选项列表,以便为每个集合项自定义可见性。

将选项字段逻辑应用于设计

  1. 选择你想要控制其可见性的元素。

  2. 点击 可见性 旁边的 加号 图标。

  3. 选择 设置变量,然后选择 选项 条件。

关键选项包括:

  • 等于:当元素与所选选项匹配时显示该元素。

  • 不等于:当元素与选项不匹配时隐藏该元素。

  • 转换:支持多个选项的控制,并为未匹配的情况提供回退行为。

显示“转换”条件转换模态框。

示例:使用组件变体实现动态布局

如果你有一个包含两个变体的组件——一个显示三张图像,另一个显示一张图像——你可以使用 转换 选项,在下拉菜单中为每个选项选择要显示的布局。

使用切换字段实现简单逻辑

对于基本的是/否条件,可以使用 切换字段 来控制元素的可见性,例如显示或隐藏图像。

利用条件和转换

条件和转换让你能够对 CMS 详情页进行高级控制。你可以对任何带有 加号 图标的元素应用条件,从而创建根据内容动态调整的布局。如需了解更多高级技巧,请观看此 指南


如果仍然遇到问题,请通过我们的 联系页面 与我们联系以获得进一步帮助。

Create a free website with Framer, the website builder loved by startups, designers and agencies.