添加 AMP 扩展组件

您所在的位置:网站首页 amp转换 添加 AMP 扩展组件

添加 AMP 扩展组件

2024-07-14 08:59| 来源: 网络整理| 查看: 265

下文中的这两个 amp-ad 很好地例证了 amp-ad 组件为支持广告平台功能而提供的灵活性。在本例中,我们(使用 DoubleClick 信息中心)将两个 DoubleClick 测试广告配置为仅在某些国家/地区展示——第一个广告仅在英国展示,第二个广告仅在美国展示。请尝试在 AMP 文档中添加这两项地理位置定位广告配置(将其放在您先前添加的广告下方):

No ad appeared because you're not browsing from the UK! No ad appeared because you're not browsing from the US!

刷新一下网页,看看效果吧。以下屏幕截图是在加拿大截取的,因此没有加载上述任一广告:

测试广告

注:您可能会注意到,这些 amp-ad 标记中有包含 fallback 属性的额外 div 标记。您能猜出 fallback 属性是何用意吗?它会指示 AMP 的加载系统仅在父元素未能成功加载时显示该元素的内容。有关详情,请参阅占位符和后备。

延伸阅读:要想查看最新的受支持广告联盟,请参阅 amp-ad 组件的参考文档。

注:AMP 文档中不得运行任何由广告联盟提供的 JavaScript。不过,AMP 运行时会(通过 iframe 沙盒)将来自另一来源的 iframe 加载为 AMP 文档,并在该 iframe 沙盒内执行相应广告联盟的 JS。

现在,我们的 AMP 文档已包括一些文字、一张图片和一则内嵌于网页中的广告,这些都是讲述故事以及通过内容获利的关键要素。不过,新型网站往往包括更多功能,而不仅仅是图片和文字。

为了进一步优化此文档,我们将向它添加一些常见于新闻报道中的更高级网络功能,例如:

YouTube 视频 推文 报道中的精彩语段 嵌入 YouTube 视频

我们来试着在此文档中嵌入一个 YouTube 视频。请在您的 AMP 文档中添加以下代码(使其紧跟在 后面,即您刚才添加的 amp-ad 上方):

The video could not be loaded.

刷新网页。您看到的不会是视频,而是以下文字:无法加载该视频。

即使您的浏览器可以完全正常地显示 YouTube 视频,您仍会遇到此错误。这是为什么呢?事实上,并非是视频加载失败了,而是组件本身加载失败了。

请注意,并非所有组件都位于 AMP 库的核心 JavaScript 文件中。我们需要为 YouTube 组件添加一项额外的 JavaScript 请求。

注:如果您的开发者控制台仍处于打开状态且您的网址中仍包含 #development=1,此时您会看到一条 AMP 验证工具错误消息(该消息会提醒您添加 amp-youtube JavaScript)以及一个指向相关文档(该文档会告知您应添加哪个 script 标记)的链接。

将以下脚本添加到 标记中:

刷新网页后,您应该会看到以下 YouTube 视频:

嵌入式 Youtube 视频

与网页上的其他元素一样,我们也为该视频指定了 width 和 height,以便 AMP 布局系统计算宽高比。此外,我们还将 layout 设为 responsive,以便该视频填满其父元素的宽度。

要想详细了解如何嵌入 YouTube 视频,请参阅 amp-youtube 组件文档。有关更多视频和媒体组件,请查看 AMP 媒体组件列表。

提示:如果某个组件无法正常加载或在浏览器中不受支持,请使用 fallback 属性通知用户。

显示推文

嵌入已预先设定格式的推文是新闻报道中的一项常见功能。amp-twitter 组件可轻松地提供此功能。

首先,将以下 JavaScript 请求添加到文档的 标记中:

现在,在您的报道中添加下述代码以嵌入推文:

data-tweetid 属性是特定平台所需的自定义属性的另一个示例。在本例中,Twitter 将 data-tweetid 属性的值与某条特定推文关联起来。

刷新您的浏览器,然后再查看此网页。您应该会看到网页上已显示了这条推文:

嵌入式推文

要想详细了解如何嵌入 Twitter 推文,请参阅 amp-twitter 组件文档。

提示:AMP 还提供了更多用于嵌入社交网络内容的组件。请参阅最新的 AMP 社交组件。

突出显示报道中的精彩语段

新闻报道的一项常见功能是:突出显示报道中极具吸引力的文字片段。例如,一段引自特定来源的内容或一桩重大事件可能会以较大字体重复出现,以吸引读者注意。

但是,并非所有文字片段都具有相同的字符长度,这可能会导致难以在较大字体与相应文字所占用的网页空间量之间取得平衡。

AMP 提供了另一个组件来专门应对这种情况,即 amp-fit-text 组件。借助 amp-fit-text 组件,您可以指定一个具有固定宽度和高度的元素以及一个最大的字号。该组件会智能地调整字体大小,使其适合指定的宽度和高度。

我们来试一试。首先,将该组件的库添加到 标记中:

将以下内容添加到网页中:

Big, bold article quote goes here.

刷新网页,看看结果!

现在,我们再进一步尝试一下。如果引用的内容很短,会出现什么情况?

Hello!

如果引用的内容很长呢?

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 的最后一次试用,请尝试创建一小段文字,例如很高(假设高度值为 400)的“Hello”,并将 max-font-size 属性值保留为 42。最终网页会是什么样子?文字会垂直居中吗?或者,amp-fit-text 标记的高度会缩小以适应最大字号吗?根据您已了解的 AMP 布局系统相关知识,请先试着回答上述问题,然后再试用代码!

要想详细了解 amp-fit-text,请参阅 AMP 示例在线演示。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3