自定义属性

使用自定义属性来定义 HTML 元素的特征。

HTML 属性定义 HTML 元素的属性(即行为或外观)。例如, category 是一种 HTML 特性,它提供了一种对相似元素进行分类的方法,并与 CSS 一起使用,将样式添加到共享该 category 的元素中。 网址 是另一个指定链接目标 URL 的 HTML 特征。

您可以使用原生 Webflow 元素、样式和配置(例如链接、类别、ID 等)生成一些 HTML 属性。您可以使用 自定义属性,它们有多种用途——构建工具提示、使用 ARIA 特性提高网站的可访问性、使用 CMS 数据扩展自定义代码和页面样式功能等等。

通过本教程,您将了解:

  1. 如何制作自定义属性
  2. 如何在自定义属性中利用 CMS 数据
  3. 如何在自定义属性中利用组件特性
  4. 如何使用 category 属性设计组件和 CMS 数据
  5. 如何控制自定义属性
记住: 一些自定义属性是保留的,因为您已经能够使用原生 Webflow 元素、样式和配置生成它们。例如,您不能指定 网址 作为现有元素的自定义属性来模拟链接,但您可以使用链接设置在链接元素上定义链接目标 URL。

如何制作自定义属性

要制定新的自定义属性:

  1. 选择要创建自定义属性的元素
  2. 前往 元素设置面板 > 自定义属性
  3. 按 ”“ 图标
  4. 输入 标题 您的自定义属性(例如, 工具提示, aria 标签等)及其 内容
专家提示: 您可以在 Mozilla HTML 属性参考.
在元素设置面板的自定义属性部分中创建一个新的自定义属性。其标题为“标识符”,内容为“我是工具提示”。

如何在自定义属性中利用 CMS 数据

您可以将 CMS 数据链接到自定义属性,以在设计、代码和动态数据之间建立联系,从而增强设计的强度和灵活性。这样,您就可以管理利用 HTML 数据属性的集成或小部件(例如地图或社交小部件预览)、使用自定义 CSS 根据 CMS 字段的值调整页面样式、通过使用 CMS 数据填充 ARIA 属性来增强站点可访问性等等。

基本的: 您可以将 CMS 数据专门链接到收藏页面或收藏列表内的自定义属性。

要将您的 CMS 数据链接到自定义属性:

  1. 选择要为其制作自定义属性的元素
  2. 访问 元素设置面板 > 自定义属性
  3. 点击 ”“ 图标
  4. 输入 标题 您的自定义属性(例如, 工具提示, aria 标签, ETC。)
  5. 点击紫色“”图标 内容 场地
  6. 选择您想要链接到自定义属性的集合字段
专家提示: 您还可以将 CMS 数据附加到 ID 属性,这些属性与 元素设置面板。这允许您设置唯一的 ID 来识别特定的 CMS 项目,您可以使用这些 ID 用自定义代码来定位这些项目。
新的自定义属性与“博客文章”集合中的“名称”集合字段相关。

如何在自定义属性中使用组件属性

您还可以将自定义属性与组件属性关联起来。例如,可以利用这些属性来简化和规范复杂的样式和 CMS 字段。了解有关组件属性的更多信息。

要将组件属性连接到自定义特性:

  1. 修改包含要为其制作自定义属性的元素的主要组件
  2. 选择要伪造自定义属性的元素
  3. 元素设置面板 > 自定义属性
  4. 点击 ”“ 图标
  5. 输入 标题 您的自定义属性(例如, 工具提示, aria 标签, ETC。)
  6. 点击紫色“”图标 内容 场地
  7. (可选)建立新的组件属性
  8. 选择要链接到自定义属性的组件属性

如何使用 category 属性

您可以申请 category 属性可生成 CMS 数据和组件的样式变体,这些变体具有自定义代码类或您在 Webflow 中建立的类(即在样式面板中制作的类)。例如,您可以应用 category 属性在整个网站的卡片组件上采用明暗主题。

记住: category 属性只能与基于文本的 CMS 数据和组件属性一起使用。

请注意,您在 Webflow 中设计的类都是小写且不包括空格。例如,如果您在样式面板中生成一个名为 我的优秀班级,派生类是 我的精彩课程 — 因此引用它的风格 category 属性,您可以输入 我的精彩课程.

此外,Webflow 为设计器中生成的单字母类添加了下划线(例如,名为 C 变成 _C).

基本的: 样式选择器面板 无法识别 CMS 数据或组件属性上引用的任何类。在清除未使用的样式之前,请确保 样式选择器面板,它们未在您网站的任何自定义属性中使用。

内容管理系统数据

要使用 班级 属性:

  1. 选择要生成专门属性的元素
  2. 前往 元素设置面板 > 特殊属性
  3. 点击“添加“ 象征
  4. 插入 班级 进入 标识符 部分
  5. 点击紫色“”符号 价值 部分
  6. 选择您想要链接到的收藏部分 班级 属性
提醒: 您只能将 CMS 数据与收藏页面或收藏列表内的自定义属性关联。

元素

要使用 班级 属性:

  1. 编辑包含要包含的元素的主要组件 班级 属性
  2. 选择要合并的元素 班级 属性
  3. 继续 元素设置面板 > 特殊属性
  4. 点击“添加“ 象征
  5. 插入 班级 进入 标识符 部分
  6. 点击紫色“”符号 价值 部分
  7. (可选)形成组件的全新方面
  8. 选择要连接的组件的功能 班级 属性(例如“主题”)

之后,要在组件实例中将样式应用于此元素:  

  1. 在画布上选择组件实例
  2. 访问 道具组
  3. 插入类标题(在 Webflow 或定制代码中指定的标题)作为附加到 班级 属性(例如,你可以插入 黑暗的 作为“主题”组件功能的内容)

进一步探索组件方面。

处理定制属性的技术

修改自定义属性:

  1. 选择需要修改自定义属性的元素
  2. 前往 元素设置面板 > 特殊属性
  3. 点击您想要修改的自定义属性
  4. 续订 标识符 和/或 内容 自定义属性

要删除自定义属性:

  1. 选择要删除自定义属性的元素
  2. 访问 元素设置面板 > 特殊属性
  3. 点击“垃圾桶”符号位于您要删除的自定义属性旁边
麦宜云
Ewan Mak 的最新帖子 (查看全部)