AMP版本8.2

由 hrs, 28 七月, 2019
标签
drupal

AMP模块旨在将Drupal页面转换为符合AMP标准的页面。最初只转换节点页面。其他类型的页面将在以后启用。

安装AMP模块后，可以为任何节点类型启用AMP。此时，AMP内容在诸如或之类的URL上可用。还有用于文本，图像和视频字段的特殊AMP格式化程序。node/1?ampnode/article-title?amp

该AMP主题设计制作的AMP HTML标准要求非常具体的标记。针对?amp路径上传递的任何节点触发AMP主题。与任何Drupal主题一样，AMP主题可以使用子主题进行扩展，从而允许发布者尽可能灵活地自定义AMP页面的显示方式。这也可以使用Drupal的块系统在AMP页面上放置AMP广告块。

该AMP PHP库分析用户输入到富文本字段，并报告有关的问题，这可能使HTML不符合的AMP标准的HTML。尽可能对库进行更正，以使其更符合AMP HTML标准。它还自动转换图像，iframe，推文嵌入HTML，Instagram嵌入HTML和youtube嵌入HTML到他们的AMP HTML等价物。PHP库是CMS不可知的，旨在使Drupal模块的Drupal 8和Drupal 7版本以及非Drupal PHP项目都可以使用它。

要了解有关此模块的更多信息，请参阅官方AMP博客上的这篇文章：“ AMPing up Drupal ”。

要求

介绍

AMP模块旨在将Drupal页面转换为符合AMP标准的页面。此时，仅转换节点页面。

安装AMP模块后，可以为任何节点类型启用AMP。此时，AMP内容在诸如 或之类的  URL上可用  。还有用于输出适当AMP组件的文本，图像和视频字段的特殊格式化程序。node/1?amp=1node/article-title?amp=1

如何为Drupal安装AMP

您应该  使用Composer来管理Drupal站点依赖项。

使用Composer，将AMP工具添加到站点项目就像使用Composer添加其他模块或主题一样：

在命令行上，在项目根目录中输入以下命令：

  • 下载AMP模块及其依赖项，包括AMP库  。composer require drupal/amp
  • 下载AMP主题  。composer require drupal/amptheme

AMP主题提供AMP Base主题和ExAMPle子主题。您可以使用附带的ExAMPle子主题或创建基于AMP Base主题的自定义子主题。如果要创建自定义AMP子主题，请将该子主题添加到/ themes目录。

如何启用AMP

  • 安装至少一个AMP子主题，可以是amptheme中包含的ExAMPle子主题或您创建的自定义AMP主题。AMP子主题应将AMP Base设置为其基本主题; 因此，您无需手动启用AMP Base。
    • 要通过用户界面安装AMP子主题，请转至/ admin / appearance。
    • 要通过Drush的命令行安装AMP子主题，请输入命令  drush en ampsubtheme_example 或  。drush en YOUR_SUBTHEME_NAME
    • 不要将任何AMP主题作为默认主题。AMP主题仅用于AMP页面。
    • 转到主题设置页面  。取消选中此框以使用主题的默认徽标并上传AMP子主题的徽标，然后保存该更改。/admin/appearance/settings/{AMP-SUBTHEME-NAME}
  • 启用AMP模块。请注意，这应该在安装AMP主题后完成。

提供初始AMP配置

  • 转到   并选择AMP配置选项：/admin/config/content/amp

主题

  • 选择AMP页面的主题。不要选择AMP Base主题。您在上一步中安装的子主题应作为选项显示，这是您应该选择的选项。
  • 选择并保存选项。

内容类型

  • 在“AMP配置”页面顶部找到您的内容类型列表。
  • 单击“在自定义显示设置中启用AMP”链接。
  • 打开“自定义显示设置”字段集，选中AMP，单击“保存”按钮（这会返回AMP配置表单）。
  • 单击“配置AMP视图模式”。
  • 在AMP视图模式下，您可以控制每个内容类型在AMP页面上显示的字段。您可能只需要标题，图像和正文。
  • 文本，图像和iframe字段有特殊的格式化程序，以便输出AMP组件，因此请务必在AMP视图模式下使用它们。确保将AMP Text格式化程序用于正文字段。
  • 单击“保存”按钮（这会返回AMP配置表单）。
  • 要稍后更改这些内容，请转到  并设置每种内容类型的AMP版本的字段。/admin/structure/types/manage/{CONTENT-TYPE}/display/amp

分析（可选）

  • 输入您的Google Analytics网络媒体资源ID，然后点击保存。
  • 这将自动添加到您的网页的AMP版本中。

Adsense（可选）

  • 输入您的Google AdSense发布商ID，然后点击保存。
  • 访问   以添加和配置Adsense块到您的布局。/admin/structure/block
  • 每个块都需要宽度，高度和数据槽。

DoubleClick（可选）

  • 输入您的Google DoubleClick for Publishers网络ID，然后点击保存。
  • 访问   以添加和配置将DoubleClick块添加到您的布局。/admin/structure/block
  • 每个块都需要宽度，高度和数据槽。

AMP Pixel（可选）

  • 选中“启用放大器像素”复选框。
  • 填写域名和查询路径框。
  • 点击保存。

设置AMP页面的块

  • 转到  并设置AMP页面的块。 /admin/structure/block/list/{AMP-SUBTHEME-NAME}
    • AMP页面是一个简单的页面，包含标题，内容区域和页脚。您应该从此主题中删除大多数块。我们建议只在页面上显示品牌，标题和内容。如果需要，可以稍后开始并添加更多元素。
    • 如果您希望AMP页面上有广告，请根据需要添加AMP Ad块。广告将使用您的AMP配置中提供的ID。

如何为AMP配置结构化数据

模块架构概述

该  AMP主题  设计制作的AMP标准要求非常具体的标记。针对 路径上传递的任何节点触发AMP主题  。与任何Drupal主题一样，AMP主题可以使用子主题进行扩展，从而允许发布者尽可能灵活地自定义AMP页面的显示方式。这也可以使用Drupal的块系统在AMP页面上放置AMP广告块。?amp=1

AMP Base主题负责将页面的一些较大部分转换为AMP。恰当命名的ExAMPle主题演示了如何使用自定义样式自定义AMP页面的外观。您可能希望使用自己的样式创建自己的自定义AMP子主题。

该  AMP PHP库  分析用户输入到富文本字段，并报告有关的问题，这可能使HTML不符合的AMP标准的HTML。该库尽可能地对HTML进行更正，并自动将图像和iframe转换为AMP等效项。将来可能会提供更多自动转换功能。PHP库是CMS不可知的，旨在使Drupal模块的Drupal 8和Drupal 7版本以及非Drupal PHP项目都可以使用它。添加AMP模块时，Composer安装将负责添加此库。

该模块负责提供Drupal页面的AMP版本的基本功能，包括以下任务：

  • 创建AMP视图模式，以便用户可以决定哪些字段应在页面的AMP版本上以哪种顺序显示。
  • 创建一个AMP路径，它将在AMP路径上显示AMP视图模式（即  ）。node/1?amp=1
  • 为常用字段创建格式化程序，例如可在AMP视图模式下使用的文本，图像，视频和iframe，以显示这些字段的AMP组件。
  • 创建可由主题放置的AMP广告块。
  • 主题可以根据配置选项在适当的位置将AMP像素项放置在页面标记中。
  • 创建一个AMP配置页面，用户可以在其中识别要使用的广告和分析系统，并确定哪个主题是AMP主题。
  • 为用户创建一种方法来识别哪些内容类型应该提供AMP页面，以及一种覆盖单个节点以防止它们显示为AMP页面的方法（用于不能正确转换的奇数页面）。
  • 创建AMP元数据配置页面，用户可以在其中提供AMP页面在Google Top Stories轮播中显示所需的结构化数据。
  • 确保不应用作AMP页面的路径生成404而不是损坏的页面。
  • 确保别名路径正常工作，因此如果  别名为别名  ，   则别名为  。node/1my-pagenode/1?amp=1my-page?amp=1
  • 创建一个系统，以便用户可以预览AMP页面。

body字段存在一个特殊问题，因为它可能包含大量无效标记，尤其是嵌入的图像，视频，推文和iframe。没有简单的方法可以将带有无效标记的blob文本转换为AMP标记。与此同时，这是其他项目将遇到的常见问题。我们的解决方案是一个独立的，独立的  AMP PHP库  ，可以尽可能地将标记从不兼容的HTML转换为AMP。正文的AMP文本字段格式化程序将使用该库在AMP视图模式下呈现正文。

我们已尽最大努力使此解决方案尽可能成为交钥匙，但未来可以在此模块中添加更多解决方案。此时，只有节点页面可以转换为AMP。初始模块支持AMP标记，如  ，  ，  ，  ，  ，和  。将来可能会添加对其他扩展组件的支持。目前，该模块支持Google Analytics，AdSense和DoubleClick for Publisher广告网络。可以在路上添加额外的网络支持。amp-adamp-pixelamp-imgamp-videoamp-analyticsamp-iframe

支持的AMP组件

 可以在路上添加对其他扩展组件的支持  。

如何禁用AMP

如果您选择在网站上为一种或所有内容类型禁用AMP，则可以通过AMP配置页面执行此操作  。/admin/config/content/amp

  • 查看启用AMP的内容类型列表。
  • 对于您要禁用的每种启用AMP的内容类型，请单击“在自定义显示设置中禁用AMP”链接。
  • 打开“自定义显示设置”字段集，取消选中AMP，然后单击“保存”按钮（这会返回AMP配置表单）。

禁用AMP视图模式后，当该内容类型 附加到该内容的URL 时，该内容类型将不再显示AMP格式的页面  。?amp=1

如何在AMP转换时修改UI格式

回顾一下，当 在URL的末尾查看页面时  （或者当   添加到现有查询字符串时），并且该页面具有启用了AMP查看模式的内容类型时，将显示该页面的AMP版本。?amp=1&amp=1

页面AMP版本的总体格式由为站点选择的AMP子主题确定。子主题区域的布局以及为这些区域选择的块决定了AMP页面的整体结构。

通过在AMP视图模式中为该内容类型选择的字段来控制单个AMP页面的内容。这些字段的AMP特定格式化程序提供了自定义AMP元素标记的选项。

特别是，具有大量文本的字段（包括正文字段）可以使用AMP文本格式化程序来利用AMP PHP库。这样可以自动将标记转换为AMP友好标记，这对于视频和图像等嵌入式内容尤为重要。

最终结果应该是有效的AMP标记，可以通过AMP配置页面提供的AMP验证工具进行验证。

评论

相关文章