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 标签内有额外的 div 标签，并在其上带有一个名为 fallback 的属性。您能猜出 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 的最后一个实验，尝试创建一个短文本，例如“你好”，并使用更大的高度（例如，值为 400），并保持 max-font-size 属性值为 42。生成的页面会是什么样子？文本是否垂直居中？或者，amp-fit-text 标签的高度是否会缩小以适应最大字体大小？根据您已经了解的 AMP 布局系统，尝试在操作代码之前回答这个问题！

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

上一章 下一章