添加扩展 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>

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

测试广告

重要提示 – 你的开发人员控制台中可能有一些错误，例如 混合内容 或 XMLHttpRequest 无法加载。前一个错误可能与 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 组件的参考文档。

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

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

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

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 by Example 的实时演示中了解更多关于 amp-fit-text 的信息。