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 文档提升到一个新的水平，并添加更多在新闻文章中常见的、更高级的 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 的更多信息。

上一章 下一章