頁面元件 page-component

頁面元件是可擴充的頁面元件,設計用於範本編輯器,並允許使用範本編輯器來組裝頁首/頁尾和結構元件。

使用情況 usage

頁面元件構成了使用核心元件以及可編輯範本設計的所有頁面的基礎。 使用頁面元件時,可以使用其他核心元件將頁首、頁尾和頁面結構定義為範本。

使用設計對話方塊,可以為頁面定義自訂使用者端資料庫。 不同於可從元件直接存取編輯對話方塊的其他元件,由於頁面元件是頁面本身,頁面元件的編輯對話方塊是頁面屬性視窗。

版本和相容性 version-and-compatibility

頁面元件的目前版本是v3,此版本隨2022年2月的核心元件發行版本2.18.0的發佈引入,具體說明見本文。

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

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

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

漸進式網頁應用程式支援 pwa-support

核心元件2.15.0版推出支援AEM as a Cloud Service的內建漸進式網頁應用程式(PWA)功能。透過網站層級的簡單設定,將您的AEM體驗轉換為PWA!

技術細節 technical-details

在GitHub🔗上可找到有關頁面元件的最新技術檔案。

核心元件開發人員檔案中可找到有關開發核心元件的進一步詳細資料。

編輯對話方塊 edit-dialog

由於元件代表整個頁面,通常在編輯對話方塊中的設定可在頁面屬性視窗中找到。

設計對話方塊 design-dialog

因為元件代表整個頁面,所以在編輯頁面範本時,設計對話方塊是透過​ 頁面資訊 — >頁面原則 ​來存取。

頁面原則

NOTE
在舊版AEM中,頁面原則 ​已呼叫​ 頁面設計

屬性標籤 properties-tab

使用「頁面設計」視窗,您可以定義要載入的使用者端程式庫,以及頁面的網頁資源程式庫。

  • 使用者端資料庫 — 這會定義要載入的使用者端資料庫類別。 JavaScript會新增至內文結尾,而CSS會新增至頁面標題。

  • 使用者端資料庫JavaScript頁面標題 — 這會定義要在頁面標題中載入的JavaScript使用者端資料庫類別。

    • 在此處定義且出現在​ 使用者端資料庫 ​欄位中的類別,將在頁面標題而非本文結尾載入JavaScript。
    • 除非類別也出現在​ 使用者端資料庫 ​欄位中,否則不會載入CSS。
  • Web資源使用者端資源庫 — 用於提供favicon等網站資源的使用者端資源庫類別。

  • 跳至主要內容元素選擇器 — 當作協助工具功能,可直接跳至頁面的主要內容

  • 轉譯替代語言連結 — 如果啟用,相同網站中頁面替代語言版本的連結將會新增到頁面的頁首。

頁面元件設計對話方塊

可以為​ 使用者端資料庫 ​和​ 使用者端資料庫JavaScript頁面標題 ​欄位設定資料庫,如下所示:

  • 若要新增欄位,請按一下或點選欄位下方的​ 新增 ​按鈕。
  • 若要移除欄位,請按一下或點選要移除欄位旁的垃圾桶圖示。
  • 若要重新排列載入順序,請按一下或點選並拖曳要移動欄位旁的控點。

如需有關使用使用者端資料庫的詳細資訊,請參閱使用使用者端資料庫

CAUTION
為頁面標頭個別定義使用者端程式庫的功能已在核心元件發行版本2.2.0中引入。

樣式索引標籤 styles-tab

頁面元件支援AEM 樣式系統

Adobe使用者端資料層 data-layer

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

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