HTML 屬性定義 HTML 元素的屬性(即行為或外觀)。例如, 類別
是一種 HTML 特徵,它提供了一種對相似元素進行分類的方法,並與 CSS 一起使用以將樣式包含到共享該 category 的元素中。 網址
是另一個 HTML 特徵,用於指定連結的目標 URL。
您可以使用本機 Webflow 元素、樣式和設定(例如連結、類別、id 等)來產生一些 HTML 屬性。您可以使用以下方式開發其他人 自訂屬性,這對於多種目的都有好處 - 建立工具提示、利用 ARIA 特性提高網站的可存取性、利用 CMS 資料擴展自訂程式碼和頁面樣式功能等等。
透過本教程,您將了解:
- 如何製作自訂屬性
- 如何在自訂屬性中利用 CMS 數據
- 如何在自訂屬性中利用元件功能
- 如何使用 category 屬性設計元件和 CMS 數據
- 如何控制自訂屬性
記住: 保留了一些自訂屬性,因為您已經能夠使用本機 Webflow 元素、樣式和配置來產生它們。例如,您不能指定 網址
作為現有元素的自訂屬性來模擬鏈接,但您可以使用連結設定在連結元素上定義連結目標 URL。
如何製作自訂屬性
要製定新的自訂屬性:
- 選擇您要為其建立自訂屬性的元素
- 前往 元素設定面板 > 自訂屬性
- 按 ”加" 圖示
- 輸入 標題 您的自訂屬性(例如,
工具提示
,詠嘆調標籤
等)及其 內容
專家提示: 您可以在下列位置存取 HTML 屬性的完整清單: Mozilla HTML 屬性參考.
如何在自訂屬性中利用 CMS 數據
您可以將 CMS 資料連結到自訂屬性,以在設計、程式碼和動態資料之間形成連接,並增強設計的強度和靈活性。這使您能夠管理利用 HTML 資料屬性(例如地圖或社交小工具預覽)的整合或小部件,使用自訂 CSS 根據 CMS 欄位的值調整頁面樣式,透過使用 CMS 資料填充 ARIA 屬性來增強網站可存取性, 和更多。
基本的: 您可以將 CMS 資料專門連結到集合頁面或集合清單中的自訂屬性。
要將 CMS 資料連結到自訂屬性:
- 選擇要為其製作自訂屬性的元素
- 訪問 元素設定面板 > 自訂屬性
- 點擊 ”加" 圖示
- 輸入 標題 您的自訂屬性(例如,
工具提示
,詠嘆調標籤
, ETC。 - 點擊紫色“點” 中的圖標 內容 場地
- 選擇您想要連結到自訂屬性的集合字段
專家提示: 您也可以將 CMS 資料附加到 ID 屬性,這些屬性與自訂屬性分開處理 元素設定面板。這允許您設定唯一的 ID 來識別特定的 CMS 項目,您可以利用它來透過自訂程式碼定位這些項目。
如何在自訂屬性中利用元件屬性
您也可以將自訂屬性與元件屬性相關聯。例如,它們可用於促進和管理複雜的樣式和 CMS 欄位。了解有關組件屬性的更多資訊。
若要將組件屬性連接到自訂屬性:
- 修改包含要為其製作自訂屬性的元素的主要元件
- 選擇要為其偽造自訂屬性的元素
- 去 元素設定面板 > 自訂屬性
- 點擊 ”加" 圖示
- 輸入 標題 您的自訂屬性(例如,
工具提示
,詠嘆調標籤
, ETC。 - 點擊紫色“點” 中的圖標 內容 場地
- (可選)建立新的元件屬性
- 選擇要連結到自訂屬性的元件屬性
如何使用 CMS 資料和組件進行設計 類別
屬性
您可以應用 類別
屬性來使用自訂程式碼類別或您在 Webflow 中建立的類別(即在樣式面板中製作)在 CMS 資料和元件上產生樣式變體。例如,您可以套用 類別
屬性可在整個網站的卡片組件上使用淺色和深色主題。
記住: 這 類別
屬性只能與基於文字的 CMS 資料和組件屬性一起使用。
請注意,您在 Webflow 中設計的類別是小寫的並且不包括空格。例如,如果您在「樣式」面板中產生一個名為 我很棒的課
,衍生類別是 我很棒的班級
- 因此在 類別
屬性,您將輸入 我很棒的班級
.
此外,Webflow 會在設計器中產生的單字母類別中新增下劃線(例如,名為 C
變成 _C
).
基本的: 這 風格選擇器面板 無法識別 CMS 資料或組件屬性上引用的任何類別。在清除未使用的樣式之前,請先將某些未使用的類別列在 風格選擇器面板,它們不會在您網站上的任何自訂屬性中使用。
內容管理系統數據
使用以下命令自訂 CMS 數據 班級
屬性:
- 選擇您想要為其產生專用屬性的元素
- 前往 元素設定面板 > 特殊屬性
- 點選“添加“ 象徵
- 插入
班級
進入 識別符 部分 - 點選紫色“點” 內的符號 價值 部分
- 選擇您想要連結到的集合部分
班級
屬性
提醒: 您只能將 CMS 資料與集合頁面或集合清單內的自訂屬性相關聯。
元素
自訂元件 班級
屬性:
- 編輯包含要在其中包含的元素的主要元件
班級
屬性 - 選擇您想要合併的元素
班級
屬性 - 繼續 元素設定面板 > 特殊屬性
- 點選“添加“ 象徵
- 插入
班級
進入 識別符 部分 - 點選紫色“點” 中的符號 價值 部分
- (可選)形成組件的新鮮方面
- 選擇您想要連接的組件的功能
班級
屬性(例如“主題”)
之後,要將樣式套用至元件實例中的該元素:
- 選擇畫布上的元件實例
- 訪問 道具面板
- 插入類別標題(您在 Webflow 或定製程式碼中指定的標題)作為附加到
班級
屬性(例如,您可以插入黑暗的
作為“主題”組件功能的內容)
進一步探索組件方面。
處理客製化屬性的技術
修改自訂屬性:
- 選擇需要修改自訂屬性的元素
- 前往 元素設定面板 > 特殊屬性
- 點選您要修改的自訂屬性
- 續訂 識別符 和/或 內容 自訂屬性的
若要刪除自訂屬性:
- 選擇您要刪除自訂屬性的元素
- 訪問 元素設定面板 > 特殊屬性
- 點選“垃圾桶” 符號位於您要刪除的自訂屬性旁邊
- 包含或消除工作區點和成員 - 2024 年 4 月 15 日
- 定心框總結 - 2024 年 4 月 15 日
- 儲存站點以供日後參考 - 2024 年 4 月 15 日