核心组件的 AMP 支持

自核心组件的版本 2.11.0 起,完全支持 AMP - 移动页面加速

本文档概述了 AMP 的支持方式以及如何为您的站点启用它。有关完整技术详细信息,请参阅 GitHub 开发人员文档。

什么是 AMP?

移动页面加速 (AMP) 是一个开源框架,最初由 Google 设计,用于优化页面以便于移动浏览。AMP 页面的加载速度通常比标准网页快得多,这将提供更出色的移动体验。

核心组件中的 AMP

对核心组件中的 AMP 的支持是安全可配置的。 AMP 版本的页面可单独提供、与标准 HTML 版本一起提供,或根本不提供。

核心组件使用 amp 作为 Sling 选择器来渲染 AMP 页面。例如,example.html 将渲染一般页面,example.amp.html 将为 AMP 版本。

各个项目均可决定是否利用 AMP。实际上,由于 AMP 和标准 HTML 页面可以并行交付,因此项目可以选择仅在其某些页面上使用 AMP。

项目中的 AMP 支持快速入门

AMP 支持提供了很大的灵活性,快速开始使用 AMP 只需执行几个简单步骤:

  1. 安装 AMP 支持扩展(如果需要)。
    • 对于 AEM as a Cloud 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 要求在 <head> 元素中将所有 CSS 内联 并进行优化。

为了满足此要求,可使用自定义页面组件,它只为页面上显示的组件加载特定于 AMP 的 CSS。

注意

由于 AMP 设计限制,Adobe 不支持将响应式网格用于页面的 AMP 版本。

有关其他要求和技术详细信息,请参阅 GitHub 开发人员文档。

在此页面上