如何创建灵活的CMS详情页面
在本指南中,我们将介绍如何在 Framer 中使用条件语句来创建灵活的 CMS 详情页面,从而实现可根据内容动态调整的布局。
使用条件逻辑控制可见性 “已设置”
控制可见性的最简单方法是使用 “已设置” 条件。此条件用于检查某个元素(例如图像)是否已添加到页面中。
如果已添加图像,则显示该图像。
如果没有添加,则保持隐藏状态。
这种方法无需额外的 CMS 字段,非常适合简单的使用场景。

其他条件选项
条件逻辑还支持基于文本的判断标准,例如:
等于
不等于
以...开头
不以...开头
以...结尾
不以...结尾
包含
不包含
这些条件允许你通过特定文本匹配来控制元素的可见性。
使用选项字段控制可见性
设置选项字段
要在你的 CMS 集合中添加选项字段,请执行以下操作:
进入 CMS 视图。
点击 编辑字段。
点击 加号 图标以添加新字段。
从下拉菜单中选择 选项。
创建如“显示1张图像”或“显示3张图像”之类的选项列表,以便为每个集合项自定义可见性。
将选项字段逻辑应用于设计
选择你想要控制其可见性的元素。
点击 可见性 旁边的 加号 图标。
选择 设置变量,然后选择 选项 条件。
关键选项包括:
等于:当元素与所选选项匹配时显示该元素。
不等于:当元素与选项不匹配时隐藏该元素。
转换:支持多个选项的控制,并为未匹配的情况提供回退行为。

示例:使用组件变体实现动态布局
如果你有一个包含两个变体的组件——一个显示三张图像,另一个显示一张图像——你可以使用 转换 选项,在下拉菜单中为每个选项选择要显示的布局。
使用切换字段实现简单逻辑
对于基本的是/否条件,可以使用 切换字段 来控制元素的可见性,例如显示或隐藏图像。
利用条件和转换
条件和转换让你能够对 CMS 详情页进行高级控制。你可以对任何带有 加号 图标的元素应用条件,从而创建根据内容动态调整的布局。如需了解更多高级技巧,请观看此 指南。
如果仍然遇到问题,请通过我们的 联系页面 与我们联系以获得进一步帮助。