文档AEM核心组件指南

核心组件的 AMP 支持 amp-support

Last update: Fri Jul 12 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

创建对象：

  • 开发人员
  • 管理员

自核心组件的版本 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 只需执行几个简单步骤：

  1. 安装 AMP 支持扩展（如果需要）。

    • 对于 AEM as a Cloud Service 项目，扩展自动随核心组件提供，而无需安装。
    • 对于内部部署和 AMS 项目，安装核心组件时必须显式安装扩展。

  2. 安装 AMP 扩展后，组件作者必须将组件超类型指向扩展中的超类型。

  3. 在模板级别或单个页面上启用 AMP 支持。

  4. 根据需要部署内联 CSS。

为页面启用 AMP enabling-amp

要为页面启用 AMP，必须在页面策略中选择​ “AMP 模式”。

AMP 页面策略选项

  • 无 AMP - 仅以标准 HTML 形式提供页面。
  • 成对 AMP - 以 AMP 和 HTML 形式提供页面。
  • 仅 AMP - 仅以 AMP 形式提供页面。

也可在单个页面的页面属性中覆盖页面的 AMP 设置。

AMP 页面属性

  • 从页面模板继承 - 这是默认值，允许从页面模板的策略中获取设置。
  • 无 AMP - 仅以标准 HTML 形式提供页面。
  • 成对 AMP - 以 AMP 和 HTML 形式提供页面。
  • 仅 AMP - 仅以 AMP 形式提供页面。

CSS 要求 css-requirements

在将 AMP 与核心组件结合使用时，主要区别在于 AMP 要求在 <head> 元素中将所有 CSS 内联 并进行优化。

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

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

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

recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c