自訂屬性

使用自訂屬性來定義 HTML 元素的特徵。

HTML 屬性定義 HTML 元素的屬性(即行為或外觀)。例如, 類別 是一種 HTML 特徵,它提供了一種對相似元素進行分類的方法,並與 CSS 一起使用以將樣式包含到共享該 category 的元素中。 網址 是另一個 HTML 特徵,用於指定連結的目標 URL。

您可以使用本機 Webflow 元素、樣式和設定(例如連結、類別、id 等)來產生一些 HTML 屬性。您可以使用以下方式開發其他人 自訂屬性,這對於多種目的都有好處 - 建立工具提示、利用 ARIA 特性提高網站的可存取性、利用 CMS 資料擴展自訂程式碼和頁面樣式功能等等。

透過本教程,您將了解:

  1. 如何製作自訂屬性
  2. 如何在自訂屬性中利用 CMS 數據
  3. 如何在自訂屬性中利用元件功能
  4. 如何使用 category 屬性設計元件和 CMS 數據
  5. 如何控制自訂屬性
記住: 保留了一些自訂屬性,因為您已經能夠使用本機 Webflow 元素、樣式和配置來產生它們。例如,您不能指定 網址 作為現有元素的自訂屬性來模擬鏈接,但您可以使用連結設定在連結元素上定義連結目標 URL。

如何製作自訂屬性

要製定新的自訂屬性:

  1. 選擇您要為其建立自訂屬性的元素
  2. 前往 元素設定面板 > 自訂屬性
  3. 按 ”" 圖示
  4. 輸入 標題 您的自訂屬性(例如, 工具提示, 詠嘆調標籤等)及其 內容
專家提示: 您可以在下列位置存取 HTML 屬性的完整清單: Mozilla HTML 屬性參考.
在元素設定面板的自訂屬性部分中建立新的自訂屬性。其標題是“標識符”,內容是“我是工具提示”。

如何在自訂屬性中利用 CMS 數據

您可以將 CMS 資料連結到自訂屬性,以在設計、程式碼和動態資料之間形成連接,並增強設計的強度和靈活性。這使您能夠管理利用 HTML 資料屬性(例如地圖或社交小工具預覽)的整合或小部件,使用自訂 CSS 根據 CMS 欄位的值調整頁面樣式,透過使用 CMS 資料填充 ARIA 屬性來增強網站可存取性, 和更多。

基本的: 您可以將 CMS 資料專門連結到集合頁面或集合清單中的自訂屬性。

要將 CMS 資料連結到自訂屬性:

  1. 選擇要為其製作自訂屬性的元素
  2. 訪問 元素設定面板 > 自訂屬性
  3. 點擊 ”" 圖示
  4. 輸入 標題 您的自訂屬性(例如, 工具提示, 詠嘆調標籤, ETC。
  5. 點擊紫色“” 中的圖標 內容 場地
  6. 選擇您想要連結到自訂屬性的集合字段
專家提示: 您也可以將 CMS 資料附加到 ID 屬性,這些屬性與自訂屬性分開處理 元素設定面板。這允許您設定唯一的 ID 來識別特定的 CMS 項目,您可以利用它來透過自訂程式碼定位這些項目。
新的自訂屬性與名為「部落格文章」的集合中的「名稱」集合欄位相關。

如何在自訂屬性中利用元件屬性

您也可以將自訂屬性與元件屬性相關聯。例如,它們可用於促進和管理複雜的樣式和 CMS 欄位。了解有關組件屬性的更多資訊。

若要將組件屬性連接到自訂屬性:

  1. 修改包含要為其製作自訂屬性的元素的主要元件
  2. 選擇要為其偽造自訂屬性的元素
  3. 元素設定面板 > 自訂屬性
  4. 點擊 ”" 圖示
  5. 輸入 標題 您的自訂屬性(例如, 工具提示, 詠嘆調標籤, ETC。
  6. 點擊紫色“” 中的圖標 內容 場地
  7. (可選)建立新的元件屬性
  8. 選擇要連結到自訂屬性的元件屬性

如何使用 CMS 資料和組件進行設計 類別 屬性

您可以應用 類別 屬性來使用自訂程式碼類別或您在 Webflow 中建立的類別(即在樣式面板中製作)在 CMS 資料和元件上產生樣式變體。例如,您可以套用 類別 屬性可在整個網站的卡片組件上使用淺色和深色主題。

記住: 類別 屬性只能與基於文字的 CMS 資料和組件屬性一起使用。

請注意,您在 Webflow 中設計的類別是小寫的並且不包括空格。例如,如果您在「樣式」面板中產生一個名為 我很棒的課,衍生類別是 我很棒的班級 - 因此在 類別 屬性,您將輸入 我很棒的班級.

此外,Webflow 會在設計器中產生的單字母類別中新增下劃線(例如,名為 C 變成 _C).

基本的: 風格選擇器面板 無法識別 CMS 資料或組件屬性上引用的任何類別。在清除未使用的樣式之前,請先將某些未使用的類別列在 風格選擇器面板,它們不會在您網站上的任何自訂屬性中使用。

內容管理系統數據

使用以下命令自訂 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 的最新帖子 (看全部)