Teaser 元件 teaser-component

「核心元件 Teaser 元件」可顯示影像、標題、RTF 文字,並可選擇性連結至更多內容。

TIP
您是否考慮過適用於 AEM 的 Edge Delivery Services?
現有的專案可以繼續使用本文件中所述的方法。然而,針對新專案,Adobe 建議採用 Edge Delivery Services。

用途 usage

「Teaser 元件」可讓內容作者使用影像、標題或 RTF 文字輕鬆建立更多內容的 Teaser,並連結至更多內容或其他動作。

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

版本和相容性 version-and-compatibility

「Teaser 元件」的目前版本為 v2,此版本於 2022 年 2 月隨著「核心元件」2.18.0 版發行導入,詳情請參閱本文件。

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

元件版本
AEM 6.4
AEM 6.5
AEM 6.5 LTS
AEM as a Cloud Service
v2
-
相容
相容
相容
v1
相容
相容
-
相容

遠端資產支援 remote-assets

Teaser 元件 (截至 2.23.2 版) 支援遠端資產。設定後,您就可以從 Teaser 元件的遠端服務選取資產。

範例元件輸出 sample-component-output

若要體驗「Teaser 元件」,並檢視其設定選項及 HTML 和 JSON 輸出的範例,請造訪元件庫

技術詳細資訊 technical-details

在 GitHub 上可找到有關「Teaser 元件」的最新技術文件。

如需開發「核心元件」的進一步詳細資訊,請參閱核心元件開發人員文件

設定對話框 configure-dialog

內容作者可以使用設定對話框定義個別 Teaser 的屬性。若已選取 Teaser 影像,同樣可透過編輯對話框修改。

Teaser 元件的編輯對話框連結索引標籤

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

  • 連結 - 此檔案連結至內容頁面、外部 URL 或頁面錨點。
  • 在新索引標籤中開啟連結 - 若已啟用,該連結將在新的瀏覽器索引標籤中開啟。
  • 行動號召 - 此選項允許連結至多個目標。
    • 繼承 Teaser 標題、說明或影像時,將使用第一個行動號召中所連結的頁面。

文字索引標籤 text-tab

Teaser 元件的編輯對話框文字索引標籤

  • 前置標題 - 前置標題將顯示在 Teaser 標題之前。

  • 標題 - 定義要顯示為 Teaser 標題的標題。

    • 從連結的頁面取得標題 - 勾選後,標題將填入連結頁面的標題。
  • 說明 - 定義要顯示為 Teaser 副標題的說明。

    • 從連結頁面取得說明 - 勾選後,說明將填入連結頁面的說明。
  • ID - 此選項可讓您控制 HTML 和資料層中元件的唯一識別碼。

    • 如果留空,則會自動產生唯一識別碼,您可以透過檢查得出的頁面找到該 ID。
    • 若已指定 ID,則作者應確保其為唯一識別碼。
    • 變更該 ID 會對 CSS、JS 和「資料層」追蹤造成影響。

資產索引標籤 asset-tab

Teaser 元件的編輯對話框影像索引標籤

  • 從頁面繼承精選影像 - 使用連結頁面的頁面屬性中定義的影像,如果沒有找到,則會使用當前的頁面。

  • 影像資產 - 從資產瀏覽器拖曳資產,或點選​ 瀏覽 ​選項,以從本機檔案系統上傳。

    • 點選或按一下​ 「清除」,取消選取目前選取的影像。

    • 點選或按一下​ 挑選,開啟資產瀏覽器來選取影像。

      • 若啟用遠端資產支援,您就可從多個選項中挑選資產:

        • 本機,從本機 AEM 資產庫中選取。
        • 遠端,從 AEM 執行個體之外的「Dynamic Media」資料庫中選取。
    • 點選或按一下​ 編輯,以在 Asset Editor 中管理資產的轉譯

  • 協助工具替代文字 - 此欄位可讓您為視障使用者定義影像的說明。

    • 從頁面繼承替代文字 - 此選項會使用 DAM 中 dc:description 後設資料所連結資產值的替代說明,若未連結任何資產,則會使用目前頁面的替代說明。
  • 不提供替代文字 - 此選項會標記該影像被螢幕助讀程式等輔助技術忽略,適用於影像僅用於裝飾或不向頁面傳達額外資訊的情況。

樣式索引標籤 styles-tab-edit

Teaser 清單元件編輯對話框的樣式索引標籤

「Teaser 元件」支援 AEM 樣式系統

使用下拉式清單,選取想要套用至元件的樣式。在編輯對話框中所做的選取,與從元件工具列中選擇具有相同效果。

元件樣式必須在設計對話框中設定,才能使用該下拉式選單。

編輯對話框 edit-dialog

Teaser 元件將影像轉譯委派給影像元件。因此,內容作者可使用影像元件的[編輯對話框] (https://experienceleague.adobe.com/docs/experience-manager-core-components/using/wcm-components/image.html?lang=zh-Hant#edit-dialog) 來調整 Teaser 影像。

設計對話框 design-dialog

透過設計對話框,範本作者可定義內容作者在使用此元件時具備的 Teaser 選項。

Teaser 索引標籤 teaser-tab

Teaser 元件的設計對話框

  • 行動號召

    • 停用行動號召 - 對內容作者隱藏​ 行動號召 ​選項
  • 元素

    • 隱藏前置標題 - 對內容作者隱藏​ 前置標題 ​選項
    • 隱藏標題 - 對內容作者隱藏​ 標題 ​選項
      • 選取後,標題類型 ​會隱藏
    • 隱藏說明 - 對內容作者隱藏​ 說明 ​選項
  • 預設標題類型 - 定義 Teaser 標題所使用的 H 標記。

  • 影像委派 - 資訊性顯示,指示 Teaser 要委派影像處理的元件。

樣式索引標籤 styles-tab

「Teaser 元件」支援 AEM 樣式系統

Adobe Client Data Layer data-layer

「Teaser 元件」支援 Adobe Client Data Layer。

recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c