核心元件 AMP 支援 amp-support
截至核心元件 2.11.0 版,AMP 加速行動頁面已完全支援。
本文件概述 AMP 的支援方式以及如何為您的網站啟用。 不過,如需完整的技術詳細資訊,請參閱GitHub 開發人員文件。
什麼是 AMP? what-is-amp
加速行動頁面或 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 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 開發人員文件。