Teaser元件

核心元件Teaser元件可顯示影像、標題、RTF文字，並可選擇連結至其他內容。

使用狀況

Teaser元件可讓內容作者輕鬆建立Teaser，以使用影像、標題或RTF文字進一步擴充內容，並連結至進一步內容或其他動作。

範本作者可以使用 設計對話方塊 定義是否有建立行動號召和新增連結的選項可用，以及停用各種顯示選項。 內容作者可以使用 設定對話方塊 若要設定影像、定義CTA、設定標題和說明，以及設定個別Teaser的連結。 此 編輯對話方塊 的 影像元件 可存取以修改Teaser影像。

版本和相容性

Teaser元件的目前版本是v2，此版本隨2022年2月的核心元件2.18.0版的發佈引入，具體說明見本文。

下表詳細說明元件的所有支援版本、與元件版本相容的AEM版本，以及舊版檔案的連結。

範例元件輸出

若要體驗Teaser元件並檢視其設定選項範例以及HTML和JSON輸出，請造訪 元件資料庫.

技術細節

有關Teaser元件的最新技術檔案 可在GitHub上找到.

有關開發核心元件的進一步詳細資訊，請參閱 核心元件開發人員檔案.

設定對話方塊

內容作者可以使用設定對話方塊來定義個別Teaser的屬性。 此外， 編輯對話方塊 修改Teaser影像（如果已選取）。

連結標籤

Teaser 標題、說明和影像可以從所連結的頁面繼承，也可以從第一個行動號召中所連結的頁面繼承。如果連結或行動號召都未指定，則會從當前的頁面繼承標題、說明和影像。

• 連結 — 此檔案會連結至內容頁面、外部URL或頁面錨點。
• 在新標籤中開啟連結 — 如果已啟用，連結將在新的瀏覽器分頁中開啟。
• 行動號召 — 此選項可連結至多個目的地。
  • 繼承Teaser標題、說明或影像時，將使用第一個號召性用語中連結的頁面。

文字索引標籤

• 前置標題 — 前置標題顯示在Teaser的標題之前。
• 標題 — 定義顯示為Teaser大標題的標題。
  • 從連結的頁面取得標題 — 選取後，標題會填入連結頁面的標題。
• 說明 — 定義顯示為Teaser子標題的說明。
  • 從連結的頁面取得說明 — 選取後，系統會使用連結頁面的說明來填入說明。
• ID — 此選項可讓您控制HTML和中的元件唯一識別碼 資料層.
  • 如果保留為空白，系統會自動為您產生唯一ID，並可透過檢查結果頁面找到該ID。
  • 若指定ID，作者應負責確認該ID是唯一的。
  • 變更ID會對CSS、JS和資料層追蹤造成影響。

資產標籤

• 從頁面繼承精選影像 — 使用連結頁面的頁面屬性中定義的影像，如果沒有找到，則使用目前頁面。
• 影像資產 — 從拖放資產 資產瀏覽器 或點選 瀏覽 從本機檔案系統上傳的選項。
  • 點選或按一下 清除 以取消選取目前選取的影像。
  • 點選或按一下 編輯 至 管理資產的轉譯 在資產編輯器中。
• 協助工具的替代文字 — 此欄位可讓您為視障使用者定義影像說明。
  • 從頁面繼承替代文字 — 此選項使用連結資產值的替代說明， dc:description DAM中的中繼資料，或目前頁面的中繼資料（若未連結資產）。
• 不提供替代文字 — 此選項會針對影像純粹起裝飾作用或不向頁面傳達額外資訊的情況，將影像標籤為被熒幕閱讀器等輔助技術忽略。

樣式索引標籤

Teaser元件支援AEM 樣式系統。.

使用下拉式清單，選取要套用至元件的樣式。 在「編輯」對話方塊中所做的選取與從元件工具列中選擇的效果相同。

必須在以下位置為此元件設定樣式： 設計對話方塊 讓下拉式功能表可供使用。

編輯對話方塊

Teaser元件會將影像演算委派給 影像元件. 因此， [編輯對話方塊] (內容作者可以使用影像元件的image.md#edit-dialog來操作Teaser影像。

設計對話方塊

「設計」對話方塊可讓範本作者定義內容作者在使用此元件時的Teaser選項。

Teaser索引標籤

• 呼叫動作
  • 停用呼叫動作 — 隱藏 行動號召 內容作者的選項
• 元素
  • 隱藏前置標題 — 隱藏 前置標題 內容作者的選項
  • 隱藏標題 — 隱藏 標題 內容作者的選項
    • 選取時 標題型別 隱藏
  • 隱藏說明 — 隱藏 說明 內容作者的選項
• 預設標題型別 — 定義Teaser標題使用的H標籤。
• 影像委派 — 資訊性顯示，指出Teaser將影像處理委派給哪個元件。

樣式索引標籤

Teaser元件支援AEM 樣式系統.

Adobe使用者端資料層

Teaser元件支援 Adobe使用者端資料層。

Business.Adobe.com 資源