核心元件的AMP支援

自核心元件的發行版本2.11.0起，已完全支援AMP - Accelerated Mobile Pages -。

本檔案概述如何支援AMP，以及如何為您的網站啟用AMP。 但如需完整的技術詳細資訊，請參閱GitHub開發人員檔案。

什麼是AMP?

Accelerated Mobile Pages或AMP是開放原始碼架構，原本由Google設計，用來最佳化行動瀏覽頁面。 AMP頁面的載入速度通常比標準網頁快得多，可提供更好的行動體驗。

核心元件中的AMP

核心元件中對AMP的支援可完全配置。 AMP版頁面只能連同標準HTML版本一併提供，或完全不提供。

核心元件使用amp作為Sling選擇器來轉譯AMP頁面。 例如， example.html會呈現一般頁面，而example.amp.html會是AMP版本。

個別專案可決定是否使用AMP。 事實上，由於AMP和標準HTML頁面可同時傳送，專案只能在專案的特定頁面上選擇使用AMP。

專案中的AMP支援快速入門

雖然AMP支援提供極大的彈性，但若要快速上手，只需幾個簡單的步驟：

  1. 視需要安裝AMP支援擴充功能。
    • 若為AEM as aCloud Service專案，核心元件會自動提供擴充功能，且不需要安裝。
    • 針對內部部署和AMS專案，安裝核心元件時必須明確安裝擴充功能。
  2. 安裝AMP擴充功能後，元件作者必須將元件超類型指向擴充功能中的超類型。
  3. 在範本 層級或您的個別頁面上啟用AMP支援。
  4. 視需要部 署內建的CSS。

啟用頁面的AMP

若要為頁面啟用AMP，必須在頁面政策中選取​AMP模式。

AMP頁策略選項

  • 無AMP — 頁面僅以標準HTML傳送。
  • 配對AMP — 頁面會以AMP及HTML傳送。
  • 僅限AMP — 頁面僅以AMP傳送。

頁面的AMP設定也可以在個別頁面的頁面屬性中覆寫。

AMP頁面屬性

  • 從頁面範本繼承 — 此為預設值，可從頁面範本的原則取用設定。
  • 無AMP — 頁面僅以標準HTML傳送。
  • 配對AMP — 頁面會以AMP及HTML傳送。
  • 僅限AMP — 頁面僅以AMP傳送。

CSS需求

將AMP與核心元件搭配使用時，主要差異在於AMP需要所有CSS內嵌於<head>元素中並最佳化。

為了支援此功能，我們使用自訂的頁面元件，只會為頁面上顯示的元件載入AMP專用的CSS。

注意

由於AMP設計限制，Adobe不支援搭配您頁面的AMP版本使用回應式格線。

如需進一步需求和技術詳細資訊，請參閱GitHub開發人員檔案。

本頁內容