AMP對核心元件的支援

從核心元件的版本2.11.0開始,完全支援AMP - Accelerated Mobile Pages -。

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

什麼是AMP?

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

核心元件中的AMP

核心元件中對AMP的支援是完全可配置的。🔗 AMP版的頁面可以與標準HTML版本一起獨享,或者完全不提供。

Core Components使用amp做為Sling選擇器來轉譯AMP頁面。 例如,example.html將呈現正常頁面,而example.amp.html將是AMP版本。

個別專案可決定是否運用AMP。 事實上,由於AMP和標準HTML頁面可以並行傳送,因此專案可以選擇在專案的特定頁面上使用AMP。

在您的項目中開始使用AMP支援

雖然AMP支援提供許多彈性,但快速上手只需幾個簡單步驟:

  1. 如有需要,請安裝AMP支援擴充功能。
    • 對於AEMCloud 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不支援將Responsive Grid與您頁面的AMP版本搭配使用。

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

本頁內容

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now