HTML 属性定义 HTML 元素的属性(即行为或外观)。例如, category
是一种 HTML 特性,它提供了一种对相似元素进行分类的方法,并与 CSS 一起使用,将样式添加到共享该 category 的元素中。 网址
是另一个指定链接目标 URL 的 HTML 特征。
您可以使用原生 Webflow 元素、样式和配置(例如链接、类别、ID 等)生成一些 HTML 属性。您可以使用 自定义属性,它们有多种用途——构建工具提示、使用 ARIA 特性提高网站的可访问性、使用 CMS 数据扩展自定义代码和页面样式功能等等。
通过本教程,您将了解:
- 如何制作自定义属性
- 如何在自定义属性中利用 CMS 数据
- 如何在自定义属性中利用组件特性
- 如何使用 category 属性设计组件和 CMS 数据
- 如何控制自定义属性
记住: 一些自定义属性是保留的,因为您已经能够使用原生 Webflow 元素、样式和配置生成它们。例如,您不能指定 网址
作为现有元素的自定义属性来模拟链接,但您可以使用链接设置在链接元素上定义链接目标 URL。
如何制作自定义属性
要制定新的自定义属性:
- 选择要创建自定义属性的元素
- 前往 元素设置面板 > 自定义属性
- 按 ”加“ 图标
- 输入 标题 您的自定义属性(例如,
工具提示
,aria 标签
等)及其 内容
专家提示: 您可以在 Mozilla HTML 属性参考.
如何在自定义属性中利用 CMS 数据
您可以将 CMS 数据链接到自定义属性,以在设计、代码和动态数据之间建立联系,从而增强设计的强度和灵活性。这样,您就可以管理利用 HTML 数据属性的集成或小部件(例如地图或社交小部件预览)、使用自定义 CSS 根据 CMS 字段的值调整页面样式、通过使用 CMS 数据填充 ARIA 属性来增强站点可访问性等等。
基本的: 您可以将 CMS 数据专门链接到收藏页面或收藏列表内的自定义属性。
要将您的 CMS 数据链接到自定义属性:
- 选择要为其制作自定义属性的元素
- 访问 元素设置面板 > 自定义属性
- 点击 ”加“ 图标
- 输入 标题 您的自定义属性(例如,
工具提示
,aria 标签
, ETC。) - 点击紫色“点”图标 内容 场地
- 选择您想要链接到自定义属性的集合字段
专家提示: 您还可以将 CMS 数据附加到 ID 属性,这些属性与 元素设置面板。这允许您设置唯一的 ID 来识别特定的 CMS 项目,您可以使用这些 ID 用自定义代码来定位这些项目。
如何在自定义属性中使用组件属性
您还可以将自定义属性与组件属性关联起来。例如,可以利用这些属性来简化和规范复杂的样式和 CMS 字段。了解有关组件属性的更多信息。
要将组件属性连接到自定义特性:
- 修改包含要为其制作自定义属性的元素的主要组件
- 选择要伪造自定义属性的元素
- 去 元素设置面板 > 自定义属性
- 点击 ”加“ 图标
- 输入 标题 您的自定义属性(例如,
工具提示
,aria 标签
, ETC。) - 点击紫色“点”图标 内容 场地
- (可选)建立新的组件属性
- 选择要链接到自定义属性的组件属性
如何使用 category
属性
您可以申请 category
属性可生成 CMS 数据和组件的样式变体,这些变体具有自定义代码类或您在 Webflow 中建立的类(即在样式面板中制作的类)。例如,您可以应用 category
属性在整个网站的卡片组件上采用明暗主题。
记住: 这 category
属性只能与基于文本的 CMS 数据和组件属性一起使用。
请注意,您在 Webflow 中设计的类都是小写且不包括空格。例如,如果您在样式面板中生成一个名为 我的优秀班级
,派生类是 我的精彩课程
— 因此引用它的风格 category
属性,您可以输入 我的精彩课程
.
此外,Webflow 为设计器中生成的单字母类添加了下划线(例如,名为 C
变成 _C
).
基本的: 这 样式选择器面板 无法识别 CMS 数据或组件属性上引用的任何类。在清除未使用的样式之前,请确保 样式选择器面板,它们未在您网站的任何自定义属性中使用。
内容管理系统数据
要使用 班级
属性:
- 选择要生成专门属性的元素
- 前往 元素设置面板 > 特殊属性
- 点击“添加“ 象征
- 插入
班级
进入 标识符 部分 - 点击紫色“点”符号 价值 部分
- 选择您想要链接到的收藏部分
班级
属性
提醒: 您只能将 CMS 数据与收藏页面或收藏列表内的自定义属性关联。
元素
要使用 班级
属性:
- 编辑包含要包含的元素的主要组件
班级
属性 - 选择要合并的元素
班级
属性 - 继续 元素设置面板 > 特殊属性
- 点击“添加“ 象征
- 插入
班级
进入 标识符 部分 - 点击紫色“点”符号 价值 部分
- (可选)形成组件的全新方面
- 选择要连接的组件的功能
班级
属性(例如“主题”)
之后,要在组件实例中将样式应用于此元素:
- 在画布上选择组件实例
- 访问 道具组
- 插入类标题(在 Webflow 或定制代码中指定的标题)作为附加到
班级
属性(例如,你可以插入黑暗的
作为“主题”组件功能的内容)
进一步探索组件方面。
处理定制属性的技术
修改自定义属性:
- 选择需要修改自定义属性的元素
- 前往 元素设置面板 > 特殊属性
- 点击您想要修改的自定义属性
- 续订 标识符 和/或 内容 自定义属性
要删除自定义属性:
- 选择要删除自定义属性的元素
- 访问 元素设置面板 > 特殊属性
- 点击“垃圾桶”符号位于您要删除的自定义属性旁边
- 包括或删除工作区位置和成员 - 2024 年 4 月 15 日
- 定心盒摘要 - 2024 年 4 月 15 日
- 存储网站以供将来参考 - 2024 年 4 月 15 日