6.用扩展组件扩大内容
6.用扩展组件扩大内容
现在，您有一个基本的AMP文档，其中包含文字，图像甚至嵌入在页面上的广告 - 所有关键内容都是讲述故事并从中获取内容。然而，现代网站通常包括比图片和文字更多的功能。
因此，让我们将AMP文档提升到一个新的层次，并探讨前面提到的核心组件中可用的组件。
在本章中，我们将尝试添加新闻文章中常见的更高级的Web功能：
YouTube影片
推文
文章引用
嵌入YouTube视频
让我们尝试嵌入YouTube视频到文档中。下面的代码将嵌入视频，添加到您的网页：
刷新页面，看看网页。你应该看到这段文字，而不是一个视频：“该视频无法加载。”
即使你的浏览器可以显示YouTube视频没有问题，你仍然会收到此错误。为什么？视频实际上并没有加载失败，而组件本身失败。
请记住，不是所有的组件都包含在核心AMPJavaScript库文件中。我们需要包括特定的YouTube组件，一个额外的JavaScript请求。除了核心的所有组件之外，其他组件都需要这些额外的JavaScript引用。
添加如下要求的<head>标签：
刷新页面，你应该可以看到YouTube视频：
再次，我们已经指定了视频的宽度和高度，以便AMP布局系统计算宽高比。此外，布局类型已设置为响应意义，该视频将填充其父元素的宽度。
详细了解YouTube component。
注意：除了YouTube组件，AMP还包括一个通用的HTML5视频组件，适合命名为amp-video，AMP专门用于Brightcove Video Cloud或Perform player，名为amp-brightcove的组件。查看“AMP By Example”，了解更多视频播放示例，包括Facebook视频，Instagram，Vine，Twitter和Dailymotion。
注意：在组件无法加载的情况下，备用属性对于提供信息很有用。如果用户的浏览器不支持特定的AMP组件怎么办？这是一个更好的用户体验，让用户知道为什么功能可能会丢失。
显示Tweet
从Twitter嵌入预格式化的推文是新闻文章的常见功能。 AMP Twitter组件可以轻松提供此功能。
首先向文档的<head>标签添加以下JavaScript请求：
现在在你的文章中添加这段代码来嵌入tweet本身：
data-tweetid属性是特定平台供应商需要的自定义属性的另一个示例。在这种情况下，Twitter会将data-tweetid属性识别为要嵌入页面的特定推文。
刷新浏览器并查看该页面。你应该看到这个推文出现：
[图片略]
了解有关Twitter组件的更多信息。
注意：AMP包括用于嵌入社交网络内容的更多组件。查看Instagram component和Vine component。
突出一篇文章的引用
新闻文章中的一个常见因素是强调文章中特别引人入胜的文字片段。例如，来自特定来源的引用或重要事实可能以更大的字体重复以引起读者的注意。
然而，由于不是所有的文本的引号或片段都必须与字符串字符的长度相同，因此可能很难将较大的字体大小与特定文本在页面上消耗的空间量进行平衡。
AMP包括专门针对这种称为放大适配文本的情况的另一个组件。它允许您定义固定宽度和固定高度元素和最大字体大小。该组件智能地缩放字体大小以适合报价的文本宽度和高度可用。
让我们尝试一下。首先，将组件的库添加到<head>标签中：
将以下内容添加到您的页面：
刷新页面并查看结果！ 现在进一步实验。如果引用价更短，会发生什么？
如果更长的引用呢？
作为最后一个具有放大适配文本的实验，请尝试创建一个较短的文本，例如#YOLO，具有更大的高度 - 例如，值为400 - 并将max-font-size属性值保持为42。结果页面是什么样的？文本中心是垂直放置还是amp-fit-text标签高度缩小以适应最大字体大小？知道你对AMP的布局系统的了解，在编辑文档之前尝试回答这个问题！
Last updated
