AMP
EN
Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

添加扩展 AMP 组件

AMP 的组件系统允许您以最小的努力快速构建高效且响应迅速的功能到您的文章中。AMP HTML 库对 AMP 组件有三种分类：

  • 内置：这些是包含在基本 AMP JavaScript 库（在 <head> 标签中指定）中的组件，例如 amp-img 和 amp-pixel。这些组件可以在 AMP 文档中立即使用。

  • 扩展：这些是对基本库的扩展，必须作为自定义元素显式包含在文档中。自定义元素需要添加到 <head> 部分的特定脚本（例如，<script async custom-element="amp-video...）。

  • 实验性：这些是已发布但尚未准备好广泛使用的组件。开发人员可以选择在这些功能完全发布之前选择使用它们。在实验性功能中了解更多信息。

我们的示例已经使用了一个内置组件 amp-img，我们在“将您的 HTML 转换为 AMP”教程中探讨了该组件如何与 AMP 布局系统相关。现在，让我们在新闻文章中添加一些常用的扩展 AMP 组件。

通过广告获利

AMP 中的广告是使用 amp-ad 组件构建的。amp-ad 组件允许您以多种方式配置广告，例如宽度、高度和布局模式。但是，许多广告平台需要额外的配置，例如广告网络的帐户 ID、应投放的广告或定位广告的选项。这些选项可以通过使用 HTML 属性轻松地在 amp-ad 组件中指定。

看看这个 DoubleClick 广告的示例：

<amp-ad
  width="300"
  height="250"
  type="doubleclick"
  data-slot="/35096353/amptesting/image/static">
</amp-ad>

正如您所看到的，这是一个非常简单的配置。请注意 type 属性，它会通知 amp-ad 组件我们要使用的广告平台。在本例中，我们要使用 DoubleClick 平台，因此我们将 doubleclick 指定为值。

data-slot 属性更独特。在 amp-ad 中，任何以 data- 开头的属性都是特定于供应商的属性。这意味着并非所有供应商都一定需要此特定属性，如果提供了该属性，他们也未必会做出反应。例如，将上面的 DoubleClick 示例与以下来自 A9 平台的测试广告进行比较：

<amp-ad
  width="300"
  height="250"
  type="a9"
  data-aax_size="300x250"
  data-aax_pubname="test123"
  data-aax_src="302">
</amp-ad>

尝试在您的文章中 <header> 标签之后添加以上两个示例。

请记住，并非所有组件都包含在核心 AMP 库 JavaScript 文件中。我们需要为广告组件包含额外的 JavaScript 请求。

将以下脚本添加到 <head> 标签：

<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

刷新页面，您应该会看到两个测试广告。

测试广告

重要 – 您的开发者控制台中可能会有一些错误，例如 Mixed Content 或 XMLHttpRequest cannot load。前一个错误可能与 A9 广告有关，因为它加载的并非所有内容都是安全的。这是在 AMP 上投放的所有广告的显著要求。

以下两个 amp-ad 提供了一个示例，说明 amp-ad 在支持广告平台功能方面具有灵活性。在这种情况下，我们（使用 DoubleClick 的仪表板）配置了两个 DoubleClick 测试广告，使其仅在特定国家/地区显示——第一个将仅在英国显示，第二个将仅在美国显示。尝试在您之前添加的广告下方的 AMP 文档中添加这两个地理定位广告配置：

<amp-ad
  width="300"
  height="250"
  type="doubleclick"
  data-slot="/35096353/amptesting/geo/uk">
  <div fallback>No ad appeared because you're not browsing from the UK!</div>
</amp-ad>

<amp-ad
  width="300"
  height="250"
  type="doubleclick"
  data-slot="/35096353/amptesting/geo/us">
  <div fallback>No ad appeared because you're not browsing from the US!</div>
</amp-ad>

刷新页面并查看。以下屏幕截图是从加拿大捕获的，因此没有加载任何广告：

测试广告

注意 – 您可能会注意到，在这些 amp-ad 标签内部，有其他带有名为 fallback 的属性的 div 标签。您能猜到 fallback 属性表示什么吗？它会通知 AMP 的加载系统，仅当父元素未能成功加载时才显示该元素的内容。在占位符和后备中了解更多信息。

继续阅读 – 要查看最新的受支持广告网络，请阅读 amp-ad 组件的参考文档。

注意 – 不允许在 AMP 文档中运行任何广告网络提供的 JavaScript。相反，AMP 运行时会从与 AMP 文档不同的来源（通过 iframe 沙箱）加载 iframe，并在该 iframe 沙箱内执行广告网络的 JS。

我们的 AMP 文档现在包含文本、图像和嵌入在页面上的广告，这些都是讲述故事和通过内容获利的关键要素。但是，现代网站通常包含比简单的图片和文本更多的功能。

让我们将我们的 AMP 文档提升到新的水平，并添加新闻文章中常见的更高级的网络功能，例如：

  • YouTube 视频
  • 推文
  • 文章引述

嵌入 YouTube 视频

让我们尝试将 YouTube 视频嵌入到文档中。在您的 AMP 文档中 <header> 之后（在您刚刚添加的 amp-ad 之前）添加以下代码：

<amp-youtube
  data-videoid="npum8JsITQE"
  layout="responsive"
  width="480"
  height="270">
  <div fallback>
    <p>The video could not be loaded.</p>
  </div>
</amp-youtube>

刷新页面。您将看到以下文本，而不是视频：“无法加载视频。”

即使您的浏览器可以毫无问题地显示 YouTube 视频，您仍然会收到此错误。为什么？该视频实际上并非未能加载，而是组件本身失败了。

请记住，并非所有组件都包含在核心 AMP 库 JavaScript 文件中。我们需要为 YouTube 组件包含额外的 JavaScript 请求。

注意 – 如果您仍然打开了开发者控制台，并且 URL 中有 #development=1，那么您会在此处看到 AMP 验证器错误，提醒您添加 amp-youtube JavaScript 以及一个指向文档的链接，该文档会告诉您要添加的 script 标签。

将以下脚本添加到 <head> 标签：

<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

刷新页面，您应该会看到 YouTube 视频。

嵌入式 YouTube 视频

与页面上的其他元素一样，我们指定了视频的 width 和 height，以便 AMP 布局系统可以计算宽高比。此外，我们将 layout 设置为 responsive，因此视频会填充其父元素的宽度。

要了解有关嵌入 YouTube 视频的更多信息，请阅读 amp-youtube 组件文档。要获得更多视频和媒体组件，请查看媒体 AMP 组件列表。

提示 – 使用 fallback 属性来告知用户组件加载失败或浏览器不支持该组件。

显示一条推文

嵌入来自 Twitter 的预格式化推文是新闻文章中的常见功能。amp-twitter 组件可以轻松提供此功能。

首先，将以下 JavaScript 请求添加到文档的 <head> 标签：

<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>

现在，在您的文章中添加此代码以嵌入推文：

<amp-twitter
  width="486"
  height="657"
  layout="responsive"
  data-tweetid="638793490521001985">
</amp-twitter>

data-tweetid 属性是特定平台所需的自定义属性的另一个示例。在本例中，Twitter 将 data-tweetid 属性的值与特定推文相关联。

刷新 你的浏览器并查看页面。你应该看到推文出现了

嵌入的推文

要了解更多关于嵌入 Twitter 推文的信息，请阅读 amp-twitter 组件的文档。

提示 – AMP 提供了更多用于嵌入社交网络内容的组件。请查看最新的 社交 AMP 组件。

突出显示文章引述

新闻文章中一个常见的功能是突出显示文章中特别引人注目的文本片段。例如，可以重复使用较大的字体来吸引读者注意特定来源的引文或重要事实。

然而，并非所有的文本片段都具有相同的字符长度，这使得很难在较大的字体大小和文本在页面上占用的空间之间取得平衡。

AMP 提供了另一个专门为这种情况设计的组件，它被称为 amp-fit-text 组件。 amp-fit-text 组件允许您定义固定的宽度和高度元素，以及最大字体大小。该组件会智能地缩放字体大小，以使文本适合在可用的宽度和高度内。

让我们试一试。首先，将组件的库添加到 <head> 标签中

<script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>

将以下内容添加到您的页面

<amp-fit-text width="400" height="75" layout="responsive" max-font-size="42">
  Big, bold article quote goes here.
</amp-fit-text>

刷新 页面并查看结果！

现在，进一步实验。如果引文短得多会发生什么？

<amp-fit-text width="400" height="75" layout="responsive" max-font-size="42">
  Hello!
</amp-fit-text>

或者，如果引文更长会发生什么？

<amp-fit-text width="400" height="75" layout="responsive" max-font-size="42">
   And the Raven, never flitting, still is sitting, still is sitting. On the pallid bust of Pallas just above my chamber door; And his eyes have all the seeming of a demon’s that is dreaming, And the lamp-light o’er him streaming throws his shadow on the floor; And my soul from out that shadow that lies floating on the floor. Shall be lifted—nevermore!
</amp-fit-text>

作为 amp-fit-text 的最后一次实验，请尝试创建一个简短的文本，例如“Hello”，并使用更大的高度（例如，值为 400），并保持 max-font-size 属性值为 42。生成的页面会是什么样子？文本是否垂直居中？或者，amp-fit-text 标签的高度是否会缩小以适合最大字体大小？根据您已经了解的关于 AMP 布局系统的知识，在操作代码之前尝试回答这个问题！

您可以从 AMP 示例的实时演示 中了解更多关于 amp-fit-text 的信息。

上一章 下一章