核心组件的 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 只需执行几个简单步骤:
-
- 对于AEM as a Cloud Service项目,核心组件在默认情况下可用,无需额外安装。
- 对于内部部署和AMS项目,您可以从GitHub下载核心组件的最新内容包,并将其安装在AEM环境中。
- 如果您的内部部署或AMS项目使用的核心组件版本低于2.14.0,则还必须在GitHub上安装作为版本一部分的AMP扩展。
-
将组件
resourceSuperType指向core/wcm/extensions/amp/components/page/v1/page。- 如果您将AEM项目原型作为推荐的最佳实践用于您的项目并选择选项来启用AMP支持,这将自动为您完成。
-
在模板级别或单个页面上启用 AMP 支持。
-
根据需要部署内联 CSS。
为页面启用 AMP enabling-amp
要为页面启用 AMP,必须在页面策略中选择“AMP 模式”。
- 无 AMP - 仅以标准 HTML 形式提供页面。
- 成对 AMP - 以 AMP 和 HTML 形式提供页面。
- 仅 AMP - 仅以 AMP 形式提供页面。
也可在单个页面的页面属性中覆盖页面的 AMP 设置。
- 从页面模板继承 - 这是默认值,允许从页面模板的策略中获取设置。
- 无 AMP - 仅以标准 HTML 形式提供页面。
- 成对 AMP - 以 AMP 和 HTML 形式提供页面。
- 仅 AMP - 仅以 AMP 形式提供页面。
仅当resourceSuperType设置正确以支持AMP时,UI中才会显示这些选项。 默认的WKND示例内容未设置resourceSuperType,因此AMP的选项在UI中不可见。
CSS 要求 css-requirements
在将 AMP 与核心组件结合使用时,主要区别在于 AMP 要求在 <head> 元素中将所有 CSS 内联 并进行优化。
为了满足此要求,可使用自定义页面组件,它只为页面上显示的组件加载特定于 AMP 的 CSS。
有关其他要求和技术详细信息,请参阅 GitHub 开发人员文档。