核心元件的AMP支援 amp-support
自核心元件發行版本2.11.0起,AMP - Accelerated Mobile Pages — 已完全支援。
本檔案概述AMP的支援方式以及如何為您的網站啟用。 不過,如需完整的技術詳細資訊,請參閱GitHub開發人員檔案。
什麼是AMP? what-is-amp
Accelerated Mobile Pages或AMP是開放原始碼架構,最初由Google設計,用於最佳化頁面以進行行動瀏覽。 AMP頁面的載入速度通常比標準網頁快得多,可提供更出色的行動體驗。
核心元件中的AMP amp-in-core-components
核心元件中的AMP支援可完全設定。 AMP版本的頁面可單獨提供、與標準HTML版本一起提供,或完全不提供。
核心元件使用amp
作為Sling選擇器來轉譯AMP頁面。 例如,example.html
會轉譯一般頁面,example.amp.html
會是AMP版本。
個別專案可決定是否利用AMP。 事實上,由於AMP和標準HTML頁面可以並行傳送,因此專案可以只選擇在專案的某些頁面上使用AMP。
開始使用專案中的AMP支援 getting-started
雖然AMP支援提供極大的彈性,但只要幾個簡單的步驟,就能快速開始使用:
-
安裝AMP支援擴充功能(如有需要)。
- 若為AEM as a Cloud Service專案,擴充功能會自動與核心元件搭配使用,無需安裝。
- 對於內部部署和AMS專案,安裝核心元件時必須明確安裝擴充功能。
-
安裝AMP擴充功能後,元件作者必須將元件超型別指向擴充功能中的超型別。
-
在範本層級或個別頁面上啟用AMP支援。
為頁面啟用AMP enabling-amp
若要啟用頁面的AMP,必須在頁面原則中選取 AMP模式。
- 無AMP — 僅以標準HTML傳送頁面。
- 配對的AMP — 頁面會以AMP及HTML形式傳送。
- 僅AMP — 僅以AMP傳送頁面。
個別頁面的頁面屬性也可以覆寫頁面的AMP設定。
- 從頁面範本繼承 — 這是預設值,允許從頁面範本的原則中取得設定。
- 無AMP — 僅以標準HTML傳送頁面。
- 配對的AMP — 頁面會以AMP及HTML形式傳送。
- 僅AMP — 僅以AMP傳送頁面。
CSS需求 css-requirements
搭配核心元件使用AMP時,主要差異在於AMP要求在<head>
元素中將所有CSS內嵌並進行最佳化。
為了支援此功能,使用自訂頁面元件,針對頁面上顯示的元件載入特定於AMP的CSS。
如需進一步需求和技術詳細資訊,請參閱GitHub開發人員檔案。