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、应该投放哪个广告，或者针对广告的目标受众的选项。这些选项很容易在amp-ad组件中使用 HTML 属性指定。

来看一下这个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 组件的参考文档。

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

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

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

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

嵌入 YouTube 视频

让我们尝试将 YouTube 视频嵌入文档中。添加以下代码，将其放在 AMP 文档中的 <header> 之后（在您刚刚添加的 amp-ads 上方）

<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 的更多信息。

上一章 下一章