內嵌元件

核心元件內嵌元件可將外部內容內嵌至AEM內容頁面。

使用狀況

核心元件內嵌元件可讓內容作者定義要內嵌於AEM內容頁面中的選取外部內容。 此外，也有可定義要內嵌的自由格式HTML的選項。

版本與相容性

目前的內嵌元件版本為v1，已於2019年9月隨核心元件2.7.0版推出，本檔案將加以說明。

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

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

如需核心元件版本和版本的詳細資訊，請參閱檔案核心元件版本。

範例元件輸出

若要體驗內嵌元件以及查看其設定選項的範例以及HTML和JSON輸出，請造訪元件程式庫。

技術詳細資訊

如需內嵌元件的最新技術檔案，請參閱GitHub。

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

配置對話框

設定對話方塊可讓內容作者定義要內嵌在頁面上的外部資源。 首先，選擇應嵌入的資源類型：

對於每種類型的可內嵌，您可以定義廣告​ID。 此選項可控制HTML和資料層中元件的唯一標識符。

  • 若保留為空白，系統會自動為您產生唯一ID，並且可透過檢查產生的頁面來找到。
  • 若已指定ID，則作者應負責確認其唯一。
  • 變更ID可能會影響CSS、JS和資料層追蹤。

URL

最簡單的內嵌方式是URL。 只需將您要內嵌的資源的URL貼到​URL​欄位中即可。 該元件將嘗試訪問該資源，如果該資源可由其中一個處理器呈現，它將在​URL​欄位下顯示確認消息。 否則，欄位會標示為錯誤。

嵌入元件隨處理器一起提供以下資源類型：

  • 符合oEmbed standard的資源，包括Facebook Post、Instagram、SoundCloud、Twitter和YouTube
  • Pinterest

開發人員可在內嵌元件的開發人員檔案後面，依照新增其他URL處理器。

URL的內嵌元件編輯對話方塊

內嵌項目

嵌入式資源允許對嵌入式資源進行更多定制，這些資源可以參數化並包含附加資訊。 作者可從預先設定的受信任內嵌項目中選取，而元件隨YouTube內嵌即可使用。

Embeddable​欄位定義您要使用的處理器類型。 若是YouTube內嵌項目，您可以定義：

  • 影片ID — 您要內嵌之資源之YouTube的唯一影片ID
  • 寬度 — 內嵌視訊的寬度
  • 高度 — 內嵌視訊的高度
  • 啟用靜音 — 此參數會指定視訊是否預設會播放靜音。若啟用此功能，Autoplay在現代瀏覽器中運作的機會就會增加。
  • 啟用自動播放 — 此參數會指定當播放器載入時，初始視訊是否會自動開始播放。這隻對發佈例項有效，或在製作例項上使用​以已發佈的形式檢視選項時有效。
  • 啟用回圈 — 若是單一視訊，此參數會指定播放器是否應重複播放初始視訊。若是播放清單，播放器會播放整個播放清單，然後在第一個視訊重新開始。
  • 啟用內嵌播放(iOS) — 此參數可控制iOS上HTML5播放器中的內嵌（開啟）或全螢幕（關閉）播放視訊。
  • 非限制相關影片 — 如果此選項已停用，則相關影片將來自與剛播放的影片相同的頻道，否則將來自任何頻道。

請注意，必須透過設計對話方塊啟動「啟用」選項，並可設為預設值。

其他內嵌項目會提供類似欄位，且可由開發人員在內嵌元件的開發人員檔案後面定義。

內嵌元件的編輯對話方塊

注意

必須透過Design Dialog在範本層級啟用Embeddables，才能供頁面作者使用。

HTML

您可以使用內嵌元件將自由格式的HTML新增至頁面。

HTML的內嵌元件編輯對話方塊

注意

系統會從輸入的HTML中篩選任何不安全的標籤（例如指令碼），且不會在產生的頁面上轉譯。

安全性

為了安全起見，系統會篩選作者可輸入的HTML標籤，以避免跨網站指令碼攻擊，例如允許作者取得管理權限。

一般而言， 所有指令 style 碼和元素，以及 on* 所有 style 和屬性都將從輸出中移除。

但是，這些規則更複雜，因為「內嵌元件」遵循AEM全域HTML AntiSamy衛生框架篩選規則集，可在/libs/cq/xssprotection/config.xml找到。 如有需要，開發人員可重疊以進行專案專屬設定。

如需內部部署安裝🔗以及AEM as a Cloud Service安裝，請參閱AEM開發人員檔案，了解其他安全資訊。

注意

雖然AntiSamy衛生框架規則可以通過覆蓋/libs/cq/xssprotection/config.xml來配置，但這些更改會影響所有HTL和JSP行為，而不僅影響內嵌核心元件。

設計對話方塊

設計對話方塊可讓範本作者定義內容作者可使用的選項，內容作者使用內嵌元件，並在放置內嵌元件時設定預設值。

可嵌入類型頁簽

內嵌元件的設計對話方塊

  • 停用URL — 在選取時停 ​​用內容作者的URL選項
  • 禁用Embeddables — 選擇該 ​​內容作者時禁用Embedable選項，而不管允許哪些可嵌入處理器。
  • 停用HTML — 選取時停 ​​用內容作者的HTML選項。
  • 允許的Embeddables — 多選，定義內容作者可使用哪些可嵌入的處理器，前提是Embeddable ​​選項處於活動狀態。

YouTube標籤

內嵌元件設計對話方塊的YouTube標籤

  • 允許設定靜音行為 — 選取YouTube內嵌類型時，允許 內 容作者在元件中設定「啟用靜音」選項
    • 靜音的預設值 — 選取YouTube 內嵌 類型時，自動設定啟用靜音選項
  • 允許設定自動播放行為 — 允許內容作者在選取YouTube 內嵌 類型時，在元件中設定「啟用自動播放」選項
    • autoplay的預設值 — 選取YouTube 內嵌 類型時，自動設定啟用自動播放選項
  • 允許設定回圈行為 — 允許內容作者在選取YouTube 內 嵌類型時，在元件中設定「啟用登入」
    • 循環的預設值 — 選取YouTube 內嵌 類型時，自動設定啟用選項
  • 允許設定內嵌播放(iOS) — 允許內容作者在選取YouTube內 嵌類型時，在元件中設定「啟用內嵌播放(iOS) 」選項
    • 預設值內嵌播放(iOS) — 選取YouTube 內嵌類型時，自動設定「啟用內嵌播放(iOS) 」選項
  • 允許設定內嵌影片 — 選取YouTube內嵌類型時，允許內 容作者 在元件中設定「不受限制的相關影片」選項
    • 非限制相關視訊的預設值 — 選取YouTube內 嵌類型時 自動設定非限制相關視訊選項

本頁內容