頁面元件(v2) page-component

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

使用狀況 usage

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

使用 設計對話方塊,您可以為頁面定義自訂使用者端程式庫。 有別於可從元件直接存取編輯對話方塊的其他元件,頁面元件是頁面本身, 編輯對話方塊 頁面元件的「頁面屬性」視窗。

版本和相容性 version-and-compatibility

本檔案說明頁面元件v2,此版本隨2018年1月的核心元件發行版本2.0.0的發佈引入。

CAUTION
本檔案說明頁面元件v2。
如需目前版本的頁面元件詳細資訊,請參閱 頁面元件 檔案。

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

核心元件2.15.0版推出對AEMas 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等Web資源的使用者端資料庫類別。

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

頁面元件設計對話方塊

程式庫可同時針對以下兩項進行設定: 使用者端資料庫使用者端資料庫JavaScript頁首 欄位如下所示:

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

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

CAUTION
核心元件2.2.0版匯入了個別定義頁面標題使用者端程式庫的功能。

樣式索引標籤 styles-tab

頁面元件支援AEM 樣式系統.

Adobe使用者端資料層 data-layer

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

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