Teaser 元件 (v1) teaser-component
「核心元件 Teaser 元件」可顯示影像、標題、RTF 文字，並可選擇性連結至更多內容。
用途 usage
「Teaser 元件」可讓內容作者使用影像、標題或 RTF 文字輕鬆建立更多內容的 Teaser，並連結至更多內容或其他動作。
範本作者可使用設計對話框，定義建立行動號召和新增連結的選項是否可用，以及停用各種顯示選項。內容作者可使用設定對話框設定影像、定義 CTA、設定標題與說明，並設定個別 Teaser 的連結。透過存取影像元件的編輯對話框，即可修改 Teaser 影像。
版本和相容性 version-and-compatibility
本文件說明 Teaser 元件 v1，最初於 2018 年 7 月隨著核心元件 2.1.0 版發行導入。
範例元件輸出 sample-component-output
若要體驗「Teaser 元件」，並檢視其設定選項及 HTML 和 JSON 輸出的範例，請造訪「元件庫」。
技術詳細資訊 technical-details
在 GitHub 上可找到有關 Teaser 元件的最新技術文件。
如需開發「核心元件」的進一步詳細資訊，請參閱核心元件開發人員文件。
設定對話框 configure-dialog
內容作者可以使用設定對話框定義個別 Teaser 的屬性。若已選取 Teaser 影像，同樣可透過編輯對話框修改。
影像 image
文字 text
-
前置標題 - 前置標題將顯示在 Teaser 標題之前。
-
標題 - 定義要顯示為 Teaser 標題的標題。
- 從連結的頁面取得標題 - 勾選後，標題將填入連結頁面的標題。
-
說明 - 定義要顯示為 Teaser 副標題的說明。
- 從連結頁面取得說明 - 勾選後，說明將填入連結頁面的說明。
-
ID - 此選項可讓您控制 HTML 和資料層中元件的唯一識別碼。
- 如果留空，則會自動產生唯一識別碼，您可以透過檢查得出的頁面找到該 ID。
- 若已指定 ID，則作者應確保其為唯一識別碼。
- 變更該 ID 會對 CSS、JS 和「資料層」追蹤造成影響。
連結與動作 links-actions
- 連結 - 已套用至 Teaser 的連結。使用路徑瀏覽器來選取連結目標。
- 啟用行動號召 - 勾選後，會啟用行動號召的定義。清單中的第一個行動號召連結會用作其他 Teaser 元素的連結。
編輯對話框 edit-dialog
Teaser 元件將影像轉譯委派給影像元件。因此，內容作者可使用影像元件的編輯對話框來調整 Teaser 影像。
設計對話框 design-dialog
透過設計對話框，範本作者可定義內容作者在使用此元件時具備的 Teaser 選項。
Teaser 索引標籤 teaser-tab
-
行動號召
- 停用行動號召 - 對內容作者隱藏 行動號召 選項
-
元素
- 隱藏前置標題 - 對內容作者隱藏「前置標題」選項
- 隱藏標題 - 對內容作者隱藏「標題」選項
- 選取後，標題類型 會隱藏
- 隱藏說明 - 對內容作者隱藏「說明」選項
-
標題類型 - 定義 Teaser 標題所使用的 H 標記。
-
連結
- 不要連結影像 - 選取後，不會連結 Teaser 影像
- 不要連結標題 - 選取後，不會連結 Teaser 標題
-
影像委派 - 資訊性顯示，指示 Teaser 要委派影像處理的元件。
樣式索引標籤 styles-tab
Teaser 元件支援 AEM 樣式系統。
Adobe Client Data Layer data-layer
「Teaser 元件」支援 Adobe Client Data Layer。