Google AMP - 快速指南
Google AMP - 概述
Google Accelerated Mobile Pages (Google-AMP) 是 Google 的新开源项目，专门用于使用 amp html 构建轻量级网页。该项目的主要目的是确保 amp 代码在所有可能的设备上(如智能手机、平板电脑等)都能正常工作并快速加载。
什么是 AMP?
Accerated Mobile Pages (AMP) 是 Google 的开源项目，专门用于使网页在任何浏览器中都能更快、更流畅、响应迅速地呈现内容，从而使其适合移动设备。
Google amp 的官方网站是 − https://www.ampproject.org/
为什么要使用 AMP?
任何用户都希望网站能够非常快速地加载内容。但是，当页面几乎充斥着图片、视频、动画、社交小部件时，情况可能并非如此，这会使页面变得非常沉重，从而增加其加载时间。这种情况可能会导致网站长期失去用户。
Google AMP 旨在解决此问题。 AMP 有一种特殊的方式来处理图像、iframe、javascript、广告、视频、动画、css、字体加载等。AMP 页面的内容缓存在 Google 端，因此每次用户点击搜索结果时，内容都会从缓存中提供。缓存版本也会及时更新，以便用户始终获得最新的更新页面。
为什么选择 AMP?
本节告诉您为什么必须为您的网站选择 AMP −
在 Google 搜索中优先考虑
今天，当您在 Google 上搜索某些内容时，您会发现顶部显示一个 Google 轮播，其中包含页面，后面是页面列表作为对您搜索的响应。显示的新闻轮播都是有效的 AMP 网站。这意味着 Google 会优先考虑 amp 页面，并根据新闻轮播中的排名显示它们。
此处给出了在 Google 中使用关键字"最新印度新闻"进行搜索的示例 −
如上图所示，所有排名靠前的 AMP 页面都会显示在 Google 轮播的开头。
当用户在 Google 搜索中搜索某些内容时，Google AMP 页面如下所示。请注意，AMP 页面上有 Google AMP 徽标。
加载时间更快
当您的页面经过 AMP 转换后，与非 amp 页面相比，加载时间会好得多。更快的加载时间也是 Google 搜索中页面排名的重要因素。
无弹出窗口
使用 Google AMP 可提供愉快的网页浏览体验，因为用户在使用 Google AMP 设计的页面上不会看到任何不必要的弹出窗口。
产生流量
当页面加载速度快时，它会自动增加浏览者数量，从而增加页面流量。
AMP 如何工作?
用于构建网站的最重要组件是 javascript、图像、视频、字体、css 等。AMP 页面设计是通过以独特的方式处理所有这些因素来完成的。在本节中，让我们简要讨论一下 AMP 究竟是如何让页面速度更快的。
异步 JavaScript
Javascript 在页面上扮演着重要的角色，因为它有助于以动画、DOM 更改等形式为页面添加交互性。它还会使页面速度变慢，并可能阻止其他内容在页面上呈现。
AMP 如何处理 JavaScript?
AMP 异步加载 JavaScript。AMP 页面内严格禁止自定义 JavaScript。请注意，AMP 添加了许多组件，其中一些是现有 html 标签的替代品;例如 amp-img、amp-iframe、amp-video、amp-lightbox、amp-animations 等。
对于每个组件，都有一个要加载的 JavaScript 文件，该文件的脚本标签中添加了 async 属性。页面上只允许使用与 amp-components 相关的 JavaScript 文件，不允许使用 AMP 页面或第三方 javascript 文件中的任何其他 JavaScript。由于 AMP 使用 Google AMP 缓存，因此文件会从缓存中预加载，从而加快加载速度。
HTML 标签的大小
必须为图像、iframe、视频标签提供大小，以便 amp 页面可以定位页面上的空间，而无需加载资源。 amp 页面会优先加载要加载的资源。内容的优先级高于要加载的资源。
社交小部件/广告
Amp 提供特殊组件，即 amp-facebook、amp-twitter、amp-ad、amp-sticky，用于处理要在页面上显示的社交小部件。AMP-ad 组件用于在页面上投放广告。AMP 会特别小心地处理组件，并根据要求优先加载内容。
CSS
AMP 页面中不允许使用外部 CSS。可以使用 amp-custom 属性在 style 标签内添加自定义 CSS(如果有)。内联 CSS 也是允许的。 AMP 以各种可能的方式减少 http 请求。
字体
amp 页面中允许使用字体，加载字体的优先级由 AMP 决定。
动画
AMP 支持 amp-animation 组件并允许现代浏览器支持的转换。
考虑到上面列出的所有要点，AMP 特别关注字体、图像、iframe、要投放的广告等的 HTTP 请求。首先呈现页面折叠上方可用的资源，然后优先呈现折叠下方可用的资源。
其他要点
Google AMP Cache 是另一个重要因素，它有助于更快地呈现内容，因为内容是从缓存中获取的。
发布商必须维护两个站点 amp 和非 amp 页面。例如，假设站点的地址为 − https://www.mypage.com。然后，非 amp 在桌面上内部提供的页面将是 https://www.mypage.com/news。对于设备或AMP，它将是:https://www.mypage/com/news/amp/
Google如何识别AMP和非AMP页面?
现在，让我们了解Google如何识别AMP和非AMP页面。
当Google搜索抓取页面时，如果它恰好在html或<html amp>中获取amp或 <html ⚡>，它知道这是一个 AMP 页面。
此外，如果 Google 遇到非 amp 页面，首先要了解 amp 页面，必须在 amp 和非 amp 页面的 html 页面头部添加以下链接标签。
非 amp 页面的页面网址
<link rel = "amphtml" href = "https://www.mypage.com/news/amp/myfirstnews_amp.html">
此处指定 rel = "amphtml"，用于非 amp 页面指向 amp 版本，以便 Google 根据平台显示正确的版本。
amp 页面的页面网址
<link rel = "canonical" href = "https://www.mypage.com/news/myfirstnews.html">
此处 rel = "canonical" 在 amp 页面中指定，以指向标准版本的 html，以便 Google 根据平台显示正确的版本。
如果您的网站只有一个 amp 页面，您仍然不要忘记添加 rel = "canonical"，它将指向自身 −
<link rel = "canonical" href = "https://www.mypage.com/news/amp/myfirstnews_amp.html">
下图显示了指向 amp 页面的 rel="amphtml" 和指向标准 html 页面的 rel = "canonical"。
Google AMP 的功能
在本节中，让我们讨论 Google AMP 提供的重要功能 −
Amp 缓存
Google Amp 缓存是添加到 amp 的核心功能之一。它提供了一个基于代理的内容传送网络来提供纯 amp 页面。默认情况下，所有有效的 amp 页面都可以使用 Amp 缓存。与非 amp 页面相比，它有助于更快地呈现页面。目前有 2 个 amp 缓存提供商 Google AMP Cache 和 Cloudflare AMP Cache。当用户点击并重定向到 amp 页面时，内容将从 google 缓存中提供。
Amp 组件
Amp 有一个为各种目的而设计的大量组件列表。其中一些列在下面 −
amp-img − 用于在 amp 页面上显示图像。
amp-iframe − 用于显示带有要在页面上显示的外部内容的 iframe。请注意，使用的 iframe 是沙盒化的，这意味着它需要权限才能在 amp 页面上显示数据。因此，必须为沙盒属性指定跨源详细信息。
amp-video − 在页面上显示视频。
amp-audio −在页面上显示音频。
amp-datepicker − 用于在页面上显示日期小部件。您不必使用任何第三方日期选择器，因为 amp 可以直接提供相同的选择器。
amp-story − 在页面上显示故事的媒介。
amp-selector − 是一个 amp 组件，它显示选项菜单，用户可以在选项之间进行选择。显示的选项可以是文本、图像或任何其他 amp 组件。
amp-list −是一个调用 CORS json 端点的 amp-component，json 文件中的数据显示在模板内。
广告
广告对于发布商来说非常重要，因为他们的收入完全取决于页面上投放的广告。Amp 不允许在页面上添加任何外部 javascript，但引入了一个名为 amp-ad 的特殊 amp 组件，负责在页面上投放广告。
发布商希望在其页面上投放的广告网络需要支持 amp-ad。例如，要在页面上投放双击广告，双击需要支持使用 amp-ad 组件投放广告。以下代码显示了 doubleclick 的 amp-ad 标签。
<amp-ad width = "300"
height = "200"
type = "doubleclick"
data-slot = "/4119129/ad-layout">
<div placeholder>
<b>Placeholder here!!!</b>
</div>
</amp-ad>
Amp 还支持 amphtmlads，它是从 AMP 组件和 html 开发的纯 ampad。Amp 还支持 amp-sticky-ads，这是一种显示在页面底部的页脚广告。amp 广告章节中讨论了 amp 中广告的详细信息。
社交小部件
Facebook、Twitter、Instagram 等社交小部件对于在发布商页面上显示非常重要，以便页面在社交媒体上共享。AMP 通过开发 AMP 组件(如 amp-facebook、amp-twitter、amp-instagram、amp-pinterest 等)，将其支持扩展到页面上使用的所有重要社交媒体小部件。
Amp 媒体
页面上的另一个重要组件是媒体，用于显示视频，并在视频之间投放广告作为中间广告。 AMP 提供了一种使用 amp-jwplayer、amp-youtube 等实现此目的的媒介。您无需加载任何额外的第三方文件即可在页面上显示 jwplayer、youtube。
Amp Analytics
Amp analytics 是一个 AMP 组件，用于跟踪给定页面上的数据。可以记录和保存页面上的所有用户交互，以分析数据，从而进一步改进或用于业务目的。
Amp Animations
Amp-animation 是一个 amp 组件，它定义了要在其他 amp 组件上使用的动画。它支持动画、过渡，可与现代浏览器很好地配合使用。您无需使用任何外部 CSS 库来执行动画，并且可以使用 amp-animation 组件。
Amp Layouts
AMP-Layout 是 google-amp 中的重要功能之一。 Amp Layout 确保页面加载时 amp 组件能够正确呈现，而不会导致任何闪烁或滚动问题。
Google AMP 确保在任何其他远程资源(如图像的 http 请求、数据调用)之前在页面上完成布局渲染。布局可用的属性包括所有 amp 组件的宽度/高度、具有响应、填充、固定等值的布局属性、当资源加载时间较长或出现任何错误时显示的占位符属性、当资源出现任何错误时显示的后备属性。
Amp 显示布局
Amp 支持许多用于在页面上显示内容的组件，而无需任何第三方库或无需在页面上制作任何繁重的 CSS。列表包括
Accordion − Amp-accordion 是一个用于以展开-折叠格式显示内容的 amp 组件。用户可以在移动设备上轻松查看，他们可以从手风琴面板中选择自己喜欢的部分。
轮播 − Amp-carousel 是一个 amp 组件，用于在屏幕上显示一组类似的内容，并使用箭头在内容之间切换。
灯箱 − Amp-lightbox 是一个 amp 组件，它将占据整个视口并像叠加层一样显示。
滑块 − Amp-image-slider 是一个 amp 组件，用于通过添加滑块将其垂直移动到图像上来比较 2 幅图像。
侧边栏 − Amp 侧边栏是一个 amp 组件，用于显示内容，点击按钮即可从窗口两侧滑动。
AMP 的优势
AMP 页面轻量且加载速度更快
Google 在 Google 搜索中优先考虑 AMP 页面。AMP 页面以轮播格式列在页面顶部。为了获得更高的排名，将页面放在 AMP 中是一个很大的优势。
AMP 页面适合移动设备，因为内容响应迅速，可以在所有浏览器中很好地调整，而无需任何额外的样式。
AMP 页面的用户满意度提高，因为与非 amp 页面相比，页面加载速度更快，从而节省了带宽和移动电池。
AMP 的缺点
Amp 具有以下缺点和缺点;
发布商必须为其页面维护两个版本:amp 和非 amp。
用户必须付出额外的努力将非 amp 页面转换为 amp。由于 amp 不支持自定义 javascript 或加载外部 javascript，因此必须使用 amp 提供的任何功能来实现相同的功能。
Google AMP - 简介
Google Accelerated Mobile Pages (Google-AMP) 是 Google 的新开源项目，专门用于使用 amp html 构建轻量级网页。该项目的主要目的是确保 AMP 代码在所有可能的设备上都能正常工作并快速加载，例如智能手机和平板电脑。
AMP 只是标准 HTML 的扩展。一些 HTML 标签已更改，AMP 对其使用增加了限制。在本章中，我们将列出已更改的 html 标签及其添加的限制。处理加载外部资源(例如图像、css、js、表单提交、视频、音频等)的标签已更改。
此外，amp 还添加了许多新功能，例如 amp-date-picker、amp-facebook、amp-ad、amp-analytics、amp-ad、amp-lightbox 等，可直接在 html 页面中使用。其余用于显示的内容按原样使用。
通过所有这些更改和新功能，AMP 承诺在实时环境中使用时提供更快的加载速度和更好的页面性能。
当您在移动设备上使用 Google 搜索进行任何搜索时，顶部 Google 轮播中显示的大多数是 amp 页面，如下所示 −
当您单击 AMP 页面时，您在地址栏中获取的 URL 如下 −
https://www.google.co.in/amp/s/m.timesofindia.com/sports/cricket/india-in-australia/to-hell-with-the-nets-boys-need-rest-ravi-shastri/amp_articleshow/67022458.cms
该 URL 并非直接来自发布商，但 Google 将其指向 Google 服务器上自己的副本，该副本是缓存版本，与非 amp 页面相比，有助于更快地呈现内容。这只会在设备上或 Google 模拟器模式下发生。
示例 Amp 页面
下面显示了 amp 页面的示例 −
<!doctype html>
<html amp>
<head>
<meta charset = "utf-8">
<title>Amp Sample Page</title>
<link rel = "canonical" href = "./regular-html-version.html">
<meta name = "viewport" content = "width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-custom>
h1 {color: red}
</style>
<script type = application/json>{
"vars": {
"uid": "23870",
"domain": "dummyurl.com",
"sections": "us",
"authors": "Hello World"
}
}
</script>
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
<script async src = "https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h1>Amp Sample Page</h1>
<p>
<amp-img src = "imgurl.jpg" width = "300" height = "300"
layout = "responsive"></amp-img>
</p>
<amp-ad width = "300" height = "250" type = "doubleclick"
data-slot = "/4119129/no-ad">
<div fallback>
<p style = "color:green;font-size:25px;">No ads to Serve!</p>
</div>
</amp-ad>
</body>
</html>
AMP 页面中的注意事项
让我们了解程序员在 AMP 页面中必须遵循的一些注意事项。
必需标签
amp 页面中必须包含一些必需标签，如下所示 −
我们必须确保在 html 标签中添加了 amp 或 ⚡，如下所示 −
<html amp> OR <html ⚡>
应将<head> 和 <body> 标签添加到 html 页面。
应在页面的 head 部分添加以下必需的元标记;否则将无法通过 amp 验证
<meta charset = "utf-8"> <meta name = "viewport" content = "width=device-width, minimum-scale = 1, initial-scale = 1">
rel = "canonical" 的链接应添加到 head 标签内
<link rel = "canonical" href = "./regular-html-version.html">
使用 amp-boilerplate 样式标签 −
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
带有 amp-boilerplate 的 Noscript 标签 −
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none
}
</style>
</noscript>
非常重要的 amp script 标签，其中添加了 async，如下所示 −
<script async src = "https://cdn.ampproject.org/v0.js"> </script>
如果您想要向页面添加自定义 CSS，请在此处注明我们无法在 amp 页面中调用外部样式表。要添加自定义 CSS，您的所有 CSS 都必须放在此处，如下所示 −
<style amp-custom>
//所有样式都在此处
</style>
style 标签应添加 amp-custom 属性。
AMP 组件的脚本
请注意，amp 页面中严格禁止使用 src 和 type = "text/javascript" 的脚本。只有异步且与 amp-components 相关的脚本标签才允许添加到 head 部分。
本节列出了用于 amp 组件的几个脚本，如下所示 −
amp-ad
<script async custom-element = "amp-ad" src = "https://cdn.ampproject.org/v0/amp-ad-0.1.js"> </script>
amp-iframe
<script async custom-element = "amp-iframe" src = "https://cdn.ampproject.org/v0/amp-iframe-0.1.js"> </script>
请注意，该脚本具有 async 和 custom-element 属性，其中包含要加载的 amp 组件的名称。Amp 根据 async 和 custom-element 属性验证脚本标签，并且不允许加载任何其他脚本。它确实需要我们在示例文件中添加的 type=application/json，如下所示
<type = application/json>
{
"vars": {
"uid": "23870",
"domain": "dummyurl.com",
"sections": "us",
"authors": "Hello World"
}
}
</script>
如有需要，上述脚本可与其他 amp-components 一起使用，例如用于 amp-analytics。
HTML 标签
到目前为止，我们已经了解了 amp 页面中必需的标签。现在，我们将讨论允许/不允许的 HTML 元素以及对它们的限制。
以下是允许/不允许的 HTML 标签列表 −
| Sr.No | HTML 标签和说明 |
|---|---|
| 1 | img 此标签已替换为 amp-img。 AMP 页面中不允许使用直接 img 标签 |
| 2 | video 已替换为 amp-video |
| 3 | audio 已替换为 amp-audio |
| 4 | iframe 已替换为 amp-iframe |
| 5 | object 不允许 |
| 6 | embed 不允许 |
| 7 | form 可用作 <form>。我们需要添加脚本才能在 AMP 页面中使用表单。 示例 − <script async custom-element = "amp-form" src = "https://cdn.ampproject.org/v0/amp-form-0.1.js"> </script> |
| 8 | Input 元素 Allowed.<input[type = image]>, <input[type = button]>, <input[type = password]>, <input[type = file]> 不允许 |
| 9 | <fieldset> 允许 |
| 10 | <label> 允许 |
| 11 | P, div, header,footer,section 允许 |
| 12 | button 允许 |
| 13 | a <a> 标签允许，但需满足以下条件，即 href 不能以 javascript 开头。如果存在，则目标属性值必须为 _blank。 |
| 14 | svg 不允许 |
| 15 | meta 允许 |
| 16 | Link 允许。但不允许加载外部样式表。 |
| 17 | style 允许。它需要具有 amp-boilerplate 或 amp-custom 属性。 |
| 18 | base 不允许 |
| 19 | noscript 允许 |
注释
不允许有条件的 html 注释。例如 −
<!--[if Chrome]> This browser is chrome (any version) <![endif]-->
HTML 事件
我们在 html 页面中使用的事件(如 onclick、onmouseover)在 AMP 页面中是不允许的。
我们可以按如下方式使用事件 −
on = "eventName:elementId[.methodName[(arg1 = value, arg2 = value)]]"
以下是在输入元素上使用事件的示例 −
<input id = "txtname" placeholder = "Type here"
on = "inputthrottled:
AMP.setState({name: event.value})">
使用的事件是输入控制的。
类
您不能在页面中使用带有 -amp- 或 i-amp- 等前缀的类。此外，您可以根据需要使用类名。
ID
您不能在 html 元素中使用带有 -amp 或 i-amp- 前缀的 ID。此外，您可以根据需要在 html 元素中使用 ID。
链接
amp 页面中不允许将 JavaScript 添加到 href。
示例
<a href = "javascript:callfunc();">click me</a>
样式表
AMP 页面不允许使用外部样式表。可以在页面内部添加页面所需的样式 −
<style amp-custom> //all your styles here </style>
style 标签应添加 amp-custom 属性。
@-rules
样式表中允许使用以下 @-rules −
@font-face、@keyframes、@media、@page、@supports.@import 不允许。未来将添加对相同内容的支持。
允许在 <style amp-custom> 内使用 @keyframes。如果 @keyframes 太多，最好创建 <style amp-keyframes> 标签并在 amp 文档末尾调用此标签。
类名、ID、标签名和属性不应以 -amp- 和 i-amp- 作为前缀，因为它们在 amp 代码中内部使用，如果在运行时也在页面上定义，可能会导致冲突。
!important 属性不允许在样式中使用，因为 amp 希望在需要时控制元素大小。
自定义字体
AMP 页面中允许使用自定义字体的样式表。
示例
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/css?family=Tangerine">
字体已从以下来源列入白名单，可在 AMP 页面内使用。
Fonts.com − https://fast.fonts.net
Google Fonts − https://fonts.googleapis.com
Font Awesome − https://maxcdn.bootstrapcdn.com
Typekit − https://use.typekit.net/kitId.css(相应替换 kitId)
注意 − @font-face 自定义字体在 amp 页面中是允许的。
示例
@font-face {
font-family: myFirstFont;
src: url(dummyfont.woff);
}
AMP Runtime
一旦加载 amp 核心文件，Amp 运行时环境就会确定 −
<script async src = "https://cdn.ampproject.org/v0.js"></script>
核心文件负责加载外部资源，决定何时加载它们的优先级，并在将 #development=1 添加到 amp URL 时帮助验证 amp 文档。
示例
http://localhost:8080/googleamp/amppage.html#development=1
在浏览器中执行上述 URL 时，如果 amp 验证失败，将列出错误，如果没有错误，则显示 amp 验证成功消息。
AMP 组件
Amp 添加了许多 amp 组件。它们主要用于以高效的方式处理资源的加载。它还包含用于处理动画、显示数据、显示广告、社交小部件等的组件。
AMP 中有 2 种类型的组件。
- 内置
- 外部
注意 − <amp-img> 是一个内置组件，如果添加了核心 amp js 文件，则可用。外部组件(如 <amp-ad>、<amp-facebook>、<amp-video> 等)需要添加与组件相关的相应 js 文件。
常见属性
几乎所有可用的 AMP 组件都具有宽度、高度、布局、占位符和后备等属性。这些属性对于任何 AMP 组件都非常重要，因为它决定了组件在 AMP 页面中的显示。
本教程后面的章节将详细讨论 AMP 的所有上述功能。
请注意，本教程中的所有示例都针对设备进行了测试，并使用了 Google Mobile Emulator 模式。现在让我们详细了解这一点。
Google Mobile Emulator
要使用 Google Mobile Emulator，请打开 Chrome 浏览器，右键单击并打开开发者控制台，如下所示 −
我们可以看到如上所示的 Chrome 开发者工具。点击您要在浏览器中测试的链接。观察页面是否以桌面模式显示。
要获取上述页面以测试设备，请点击切换设备工具栏，如下所示 −
您也可以使用快捷键 Ctrl+shift+M。这会将桌面模式更改为设备模式，如下所示 −
可以看到设备列表，如下所示 −
您可以选择要测试页面的设备。请注意，这些教程中的所有页面都是在 Google Mobile Emulator 上测试的，如上所示。Firefox 和最新的 Internet Explorer 浏览器也提供相同的功能。
Google AMP - 图片
Google AMP 页面中使用的图片与标准 html 页面中的使用方式类似，但唯一的区别在于标签名称的使用方式以及一些附加属性。本章将详细讨论这些内容。
请遵守下面显示的语法 −
标准 HTML
<img src = "example.jpg" width = "300" height = "250" alt = "Example" ></img>
在 AMP 页面中
<amp-img src = "example.jpg" alt = "Example" height = "300" width = "250" ><//amp-img>
请注意，标签从 img 更改为 amp-img。
为什么使用 amp-img 而不是 img?
将 img 更改为 amp-img 的原因是为了更好地控制页面布局和加载图像的网络请求。Amp 为图像资源添加了延迟加载，并根据页面上可用的其他资源优先加载。
示例
请观察以下代码以更好地理解 −
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Image</title>
<link rel = "canonical" href = "http://example.ampproject.org/articlemetadata.html">
<meta name = "viewport" content = "width = device-width,
minimum-scale = 1,initialscale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-msanimation:
- amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-ampstart{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-ampstart{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-ampstart{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-ampstart{from{visibility:hidden}to{visibility:visible}}@keyframes
amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-msanimation:none;
animation:none
}
</style>
</noscript>
</head>
<body>
<h1>Google AMP - Image Example</h1>
<amp-img alt = "Beautiful Flower" src = "images/flower.jpg"
width = "246"
height = "205">
</amp-img>
</body>
</html>
输出
执行上述代码后，您将看到如下所示的结果 −
您还可以通过向 amp-img 标签添加属性 layout = "responsive" 来使图像具有响应性，如下所示
示例
请观察以下代码以更好地理解 −
<amp-img alt = "Beautiful Flower" src = "images/flower.jpg" width = "246" height = "205" layout = "responsive"> </amp-img>
输出
执行上述代码后，您将看到如下所示的结果 −
Google AMP - 表单
本章介绍如何在 Google AMP 中使用表单。
请注意，表单标签与标准 HTML 中的相同。AMP 对表单的使用增加了特殊限制，因此我们需要添加 amp-form JavaScript 文件才能使用表单。
amp-form 脚本
<script async custom-element = "amp-form" src = "https://cdn.ampproject.org/v0/ampform-0.1.js"></script>
要在 AMP 页面中使用表单，我们需要在 .html 文件中包含上述脚本。amp-form JavaScript 文件支持 http 和 xmlhttprequest 表单提交。使用 HTTP 请求会重新加载页面，而使用 xmlhttprequest 则不会重新加载页面，其行为类似于 ajax 请求。
AMP 中的表单标签
For xmlhttprequest : <form method = "post" class = "p2" action-xhr = "submitform.php" target = "_top"> //Input fields here </form> For http : <form method = "post" class = "p2" action = "submitform.php" target = "_top"> //Input fields here </form>
Amp-form 提供特殊属性，即 submit-error 和 submit-success，用于处理表单提交时的错误和成功。
示例
下面显示了 amp-form 的示例 −
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Form</title>
<link rel = "canonical" href = "ampform.html">
<meta name = "viewport" conten t = "width = device-width,
minimum-scale = 1,initialscale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-msanimation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-ampstart{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-ampstart{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-ampstart{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-ampstart{from{visibility:hidden}to{visibility:visible}}@keyframes
-ampstart{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-msanimation:none;
animation:none
}
</style>
</noscript>
<script async custom-element = "amp-form"
src = "https://cdn.ampproject.org/v0/amp-form-0.1.js">
</script>
<script async custom-template = "amp-mustache"
src = "https://cdn.ampproject.org/v0/amp-mustache-0.2.js">
</script>
<style amp-custom>
form.amp-form-submit-success [submit-success],
form.amp-form-submit-error [submit-error]{
margin-top: 16px;
}
form.amp-form-submit-success [submit-success] {
color: white;
background-color:gray;
}
form.amp-form-submit-error [submit-error] {
color: red;
}
form.amp-form-submit-success.hide-inputs > input {
display: none;
}
</style>
</head>
<body>
<h3>Google AMP - Form</h3>
<form method = "post"
class = "p2"
action-xhr = "submitform.php"
target = "_top">
<p>AMP - Form Example</p>
<div>
<input type = "text" name = "name" placeholder = "Enter
Name" required><br/><br/>
<input type = "email" name = "email"
placeholder = "Enter Email" required>
<br/>
<br/>
</div>
<input type = "submit" value = "Submit">
<div submit-success>
<template type = "amp-mustache">
Form Submitted! Thanks {{name}}.
</template>
</div>
<div submit-error>
<template type = "amp-mustache">
Error! {{name}}, please try again.
</template>
</div>
</form>
</body>
</html>
输出
执行上述代码后，您将看到如下所示的结果 −
现在，输入详细信息并单击"提交"按钮。显示的输出屏幕如下 −
请注意，我们使用 amp-mustache 进行数据绑定。表单使用 action-xhr 即 xmlhttprequest 提交表单。我们使用 submitform.php 文件以 json 格式返回数据。
<form method = "post" class = "p2" action-xhr = "submitform.php" target = "_top"> </form>
submitform.php
<?php
if(!empty($_POST)){
$domain_url = (isset($_SERVER['HTTPS']) ? "https" : "http") . "://$_SERVER[HTTP_HOST]";
header("Content-type: application/json");
header("AMP-Access-Control-Allow-Source-Origin: " . $domain_url);
header("Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin");
$myJSON = json_encode($_POST);
echo $myJSON;
}
?>
为了让表单使用 xmlhttprequest 工作，我们需要根据 CORS 规范添加标头。添加到 submitform.php 的响应标头的详细信息如下所示 −
为了让表单工作，我们需要添加标头，例如值为 AMP-Access-Control-Allow-Source-Origin 的 access-control-expose-headers 和 amp-access-controlallow- source-origin −http://localhost:8080。
请注意，我们正在使用 php 文件和 apache 服务器。在 php 文件中，我们已添加所需的标头，如下所示 −
<?php
if(!empty($_POST)){
$domain_url = (isset($_SERVER['HTTPS']) ? "https" : "http") . "://$_SERVER[HTTP_HOST]";
header("Content-type: application/json");
header("AMP-Access-Control-Allow-Source-Origin: " . $domain_url);
header("Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin");
$myJSON = json_encode($_POST);
echo $myJSON;
}
?
?>
如果我们使用正常的 http 请求，页面将重新加载，如下所示 −
对于 http 请求，我们使用了以下表单 −
<form method = "GET" class = "p2" action = "submitform.php"
target = "_top">
</form>
示例
请观察以下代码以更好地理解 −
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Form</title>
<link rel = "canonical" href = "ampform.html">
<meta name = "viewport" content = "width = device-width,minimum-scale = 1,initialscale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-msanimation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-ampstart{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-ampstart{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-ampstart{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-ampstart{from{visibility:hidden}to{visibility:visible}}@keyframes
-ampstart{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body {
-webkit-animation:none;
-moz-animation:none;
-msanimation:none;
animation:none}
>/style>
</noscript>
<script async custom-element = "amp-form"
src = "https://cdn.ampproject.org/v0/amp-form-0.1.js">
</script>
<script async custom-template = "amp-mustache"
src = "https://cdn.ampproject.org/v0/amp-mustache-0.2.js">
</script>
<style amp-custom>
form.amp-form-submit-success [submit-success],
form.amp-form-submit-error [submit-error]{
margin-top: 16px;
}
form.amp-form-submit-success [submit-success] {
color: white;
background-color:gray;
}
form.amp-form-submit-error [submit-error] {
color: red;
}
form.amp-form-submit-success.hide-inputs >
input {
display: none;
}
</style>
</head>
<body>
<h3>Google AMP - Form</h3>
<form method = "GET" class = "p2" action = "submitform.php" target = "_top">
<p>AMP - Form Example</p>
<div>
<input type = "text" name = "name" placeholder = "Enter Name" required>
<br/>
<br/>
<input type = "email" name = "email" placeholder = "Enter Email" required>
<br/>
<br/>
<div>
<input type = "submit" value = "Submit">
<div submit-success>
<template type = "amp-mustache">
Form Submitted! Thanks {{name}}.
</template>
</div>
<div submit-error>
<template type = "amp-mustache">
Error! {{name}}, please try again.
</template>
</div>
</form>
</body>
</html>
输出
执行上述代码后，您将看到如下所示的结果 −
Google AMP - Iframes
Google amp-iframe 用于在页面上显示 iframes。有一些条件需要添加到 amp-iframe 中，因此我们不能在页面上使用普通的 iframes。本章将对此进行更多讨论。
iFrames 应遵循的条件
在 AMP 页面中使用 iframe 时要注意的条件如下 −
iframe 上使用的 url 必须是 https 请求或 data-URI 或使用 srcdoc 属性。
amp-iframe 默认会添加 sandbox 属性。sandbox 属性将设置为空。 sandbox 的空值表示 iframe 是最大程度的沙盒化(对 iframe 的额外限制)。我们可以向 sandbox 添加值，下面将通过示例进行讨论。
amp-iframe 不能显示在页面顶部，它应该距离顶部约 600px，或者在顶部滚动时位于视口的前 75% 内。如果您必须在开始时显示 iframe，则需要向 iframe 添加占位符，我们将在本教程后面的示例的帮助下进行讨论。
amp-iframe 不能与容器具有相同的来源。例如，如果您的主站点位于 www.xyz.com ，则不能将 iframe src 设置为 www.xyz.com/urlname。也可以使用其他格式，例如 .xyz.com、example.xyz.com 等。
要使用 iframe，我们需要添加以下脚本 −
<script async custom-element = "amp-iframe" src = "https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
Amp-iframe格式如下 −
<amp-iframe width = "600" title = "Google map" height = "400" layout = "responsive" sandbox = "allow-scripts allow-same-origin allow-popups" frameborder = "0" src = "https://maps.google.com/maps?q=telangana&t=&z=13&ie=UTF8&iwloc=&output=embed"> </amp-iframe>
让我们借助一个实际示例来理解这一点，该示例将使用 iframe 显示 Google 地图，如下所示。
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Amp Iframe</title>
<link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:-amp-start 8s steps(1,end) 0s
1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style><noscript>
<style amp-boilerplate>
body{-webkit-animation:none;-moz-animation:
none;-ms-animation:none;animation:none}
</style></noscript>
<script async custom-element = "amp-iframe"
src = "https://cdn.ampproject.org/v0/amp-iframe-0.1.js"
></script>
<style>
div {
height:850px;
text-align:center;
}
</style>
</head>
<body>
<h3>Google AMP - Amp Iframe</h3>
<div>
Google Maps in Iframe
</div>
<h3>Google AMP - Amp Iframe</h3>
<amp-iframe width = "600"
title = "Google map"
height = "400"
layout = "responsive"
sandbox = "allow-scripts allow-same-origin allow-popups"
frameborder = "0" src = "https://maps.google.com/maps?q=telangana&t=&z=13&ie=UTF8&iwloc=&output=embed">
</amp-iframe>
</body>
</html>
输出
请注意，我们已将 iframe 放置在距顶部 600px 以上的位置。它给出错误，如下所示 −
在上面的示例中，我们使用了 sandbox，其值如下所示 −
sandbox = "allow-scripts allow-same-origin allow-popups"
Sandbox 属性就像是允许在 iframe 内加载内容的权限。在这里，我们允许加载来自 Google 地图链接的所有脚本。如果我们没有提供沙盒属性，则会显示此错误，阻止在 iframe 中加载内容 −
请注意，我们必须向沙盒授予正确的权限。您可以在此处找到要授予沙盒的所有权限的详细信息 − https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-sandbox。
我们可以利用 amp-iframe 中的占位符属性来摆脱超过 600px 的情况。
下面给出了一个实际示例 −
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Amp Iframe</title>
<link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width, minimum-scale=1,initial-scale=1">
<style amp-boilerplate>
body{
-webkit-animation:-amp-start 8s steps(1,end) 0s
1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none
}
</style>
</noscript>
<script async custom-element = "amp-iframe"
src = "https://cdn.ampproject.org/v0/amp-iframe-0.1.js">
</script>
<style>
div {
height:850px;
text-align:center;
}
</style>
</head>
<body>
<h3>Google AMP - Amp Iframe</h3>
<amp-iframe width = "600"
title = "Google map"
height = "400"
layout = "responsive"
sandbox = "allow-scripts allow-same-origin allow-popups"
frameborder = "0"
src = "https://maps.google.com/maps?q=telangana&t=&z=13&ie=UTF8&iwloc=&output=embed">
<amp-img layout = "fill" src = "images/loading.jpg" placeholder></amp-img>
</amp-iframe>
</body>
</html>
我们使用 amp-img 作为占位符，如下所示 −
<amp-iframe width = "600" title = "Google map" height = "400" layout = "responsive" sandbox = "allow-scripts allow-same-origin allow-popups" frameborder = "0" src = "https://maps.google.com/maps?q=telangana&t=&z=13&ie = UTF8&iwloc = &output = embed"> <amp-img layout = "fill" src = "images/loading.jpg" placeholder></amp-img> </amp-iframe>
在这种情况下，不考虑 600px 和 75% 视口中的 amp-iframe 的限制。图像上显示的加载指示器(三个点)用作占位符，基本上用于 amp-iframe src。加载 iframe 内容后，将删除图像并显示 iframe 内容，如下所示的输出 −
输出
Google AMP - 视频
amp 中的 Amp-video 是用于播放直接视频嵌入的标准 html5 视频。在本章中，让我们了解如何使用 amp-video。
要使用 amp-video，我们需要添加以下脚本 −
<script async custom-element = "amp-video" src = "https://cdn.ampproject.org/v0/amp-video-0.1.js"> </script>
Amp-video 具有 src 属性，该属性包含要加载的视频资源，由 amp 在运行时延迟加载。此外，所有功能几乎与 html5 video 标签相同。
以下是要添加到 amp video 的节点 −
Source − 您可以使用此标签添加要播放的不同媒体文件。
Track − 此标签可让您为视频启用字幕。
Placeholder − 此占位符标签将在视频开始前显示内容。
Fallback − 当浏览器不支持 HTML5 video 时，将调用此标签。
amp-video 标签的格式
此处显示 amp-video 标签的格式 −
<amp-video controls width = "640" height = "360"
layout = "responsive" poster = "images/videoposter.png">
<source src = "video/bunny.webm" type = "video/webm" />
<source src = "video/samplevideo.mp4" type = "video/mp4" />
<div fallback>
<p>This browser does not support the video element.</p>
</div>
</amp-video>
让我们使用如下所示的工作示例来了解 amp-video −
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Amp Video</title>
<link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width, minimum-scale = 1,initial-scale=1">
<style amp-boilerplate>
body {
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body {
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none
}
</style>
</noscript>
<script async custom-element = "amp-video"
src = "https://cdn.ampproject.org/v0/amp-video-0.1.js">
</script>
</head>
<body>
<h3>Google AMP - Amp Video</h3>
<amp-video controls
width = "640"
height = "360"
layout = "responsive"
poster = "images/videoposter.png">
<source src = "video/bunny.webm" type = "video/webm" />
<source src = "video/samplevideo.mp4" type = "video/mp4" />
<div fallback>
<p>This browser does not support the video element.</p>
</div>
</amp-video>
</body>
</html>
输出
上述代码的输出如下所示 −
amp-video 可用的属性
amp-video 可用的属性列在此处的表格中 −
| Sr.No | 属性和说明 |
|---|---|
| 1 | src 如果 <source>节点不存在，则必须指定 src，并且它必须是 https:// url。 |
| 2 | poster 海报采用视频开始前显示的图像网址。 |
| 3 | autoplay 如果浏览器支持，在 amp-video 上使用此属性将自动播放视频。视频将以静音模式播放，用户必须点击视频才能取消静音。 |
| 4 | controls 在 amp-video 上使用此属性将在视频上显示类似于 html5 的控件视频。 |
| 5 | loop 如果 amp-video 上存在此属性，视频将在播放结束后再次播放。 |
| 6 | crossorigin 如果播放视频的资源位于不同的来源，则此属性会发挥作用。 |
| 7 | rotate-to-fullscreen 如果视频可见，则在用户将设备旋转到横向模式后，视频将全屏显示 |
自动播放 AMP 视频
我们可以使用autoplay 属性，以防我们需要自动播放视频。此功能将根据浏览器支持情况工作。请注意，自动播放时视频将处于静音状态。当用户点击视频时，它将取消静音。
让我们借助下面给出的工作示例来使用自动播放功能 −
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Amp Video</title>
<link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width=device-width,minimum-scale = 1, initial-scale = 1">
<style amp-boilerplate>
body {
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;
-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none
}
</style>
</noscript>
<script async custom-element = "amp-video" src = "
https://cdn.ampproject.org/v0/amp-video-0.1.js">
</script>
</head>
<body>
<h3>Google AMP - Amp Video Autoplay</h3>
<amp-video controls
width = "640"
height = "360"
layout = "responsive"
poster = "images/videoposter.png" autoplay>
<source src = "video/bunny.webm" type = "video/webm" />
<source src = "video/samplevideo.mp4" type = "video/mp4" />
<div fallback>
<p>This browser does not support the video element.</p>
</div>
</amp-video>
</body>
</html>
您可以通过添加控件属性来激活视频控件，如以下代码所示 −
<amp-video controls
width = "640"
height = "360"
layout = "responsive"
poster = "images/videoposter.png" autoplay>
<source src = "video/bunny.webm" type = "video/webm" />
<source src = "video/samplevideo.mp4" type = "video/mp4" />
<div fallback>
<p>This browser does not support the video element.</p>
</div>
</amp-video>
Google AMP - 按钮
按钮是 AMP 的另一个功能。请注意，AMP 中的按钮没有任何变化，它们的使用方式与标准 HTML 按钮标签相同。AMP 页面中的按钮的唯一区别在于其事件的工作方式。
在本章中，我们将看到一些示例来展示按钮的工作原理以及如何将其与 AMP 组件一起使用。
灯箱的示例代码
以下示例向我们展示了如何使用按钮显示/隐藏 amp-lightbox，如下所示 −
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Amp Lightbox</title>
<link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content ="width = device-width,minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;-moz-animation:none;-ms-an
imation:none;animation:none
}
</style>
</noscript>
<script async custom-element = "amp-lightbox"
src = "https://cdn.ampproject.org/v0/amp-lightbox-0.1.js">
</script>
<style amp-custom>
amp-img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}
button{
background-color:
#ACAD5C; color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: left;
}
.lightbox {
background: rgba(211,211,211,0.8);
width: 100%;
height: 100%;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<h3>Google AMP - Amp Lightbox</h3>
<button on = "tap:my-lightbox">
Show LightBox
</button>
<amp-lightbox id = "my-lightbox" layout = "nodisplay">
<div class = "lightbox" on = "tap:my-lightbox.close" tabindex = "0">
<amp-img alt = "Beautiful Flower"
src = "images/flower.jpg"
width = "246"
height = "205">
</amp-img>
</div>
</amp-lightbox>
</body>
</html>
输出
现在，您可以点击屏幕上的任意位置来关闭灯箱。
在上面的示例中，我们使用了一个按钮，其代码如下所示−
<button on = "tap:my-lightbox"> Show LightBox </button> Next, we have added action on the button using on attribute as shown: on = "tap:my-lightbox"
当您点击按钮时，操作将发生。请注意，灯箱的 ID 已提供给它。当用户点击按钮时，灯箱将被打开。同样，您可以将带有 on 操作的按钮与任何组件一起使用以与其进行交互。
Google AMP - Timeago
Timeago 将通过与过去(例如"x"小时前)进行比较来提供时间戳详细信息。在本章中，我们将详细讨论此功能。
要将此功能插入我们的工作中，我们需要将下面给出的脚本添加到 .html 页面 −
<script async custom-element = "amp-timeago" src = "https://cdn.ampproject.org/v0/amp-timeago-0.1.js"> </script>
amp-timeago 标签如下所示 −
<amp-timeago layout = "fixed" width = "160" height = "20" datetime = "2018-10-01T00:37:33.809Z" locale = "en">Monday 01 October 2018 00.37 </amp-timeago>
让我们借助下面所示的工作示例来理解这一点 −
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - TimeAgo</title>
<link rel = "canonical" href = " http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial- scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:-amp-start 8s steps(1,end)
0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;-moz-animation:none;-ms
-animation:none;animation:none
}
</style>
</noscript>
<script async custom-element="amp-timeago"
src = "https://cdn.ampproject.org/v0/amp-timeago-0.1.js">
</script>
</head>
<body>
<h1>Google AMP - TimeAgo Example</h1>
<amp-timeago
layout = "fixed"
width = "160"
height = "20"
datetime = "2018-10-01T00:37:33.809Z"
locale = "en">Monday 01 October 2018 00.37
</amp-timeago>
</body>
</html>
输出
默认情况下，语言环境设置为 en。我们可以根据需要更改语言环境并显示 timeago。下表列出了可以与 timeago 标签一起使用的语言环境。
| Sr.No | 语言环境和说明 |
|---|---|
| 1 | ar 阿拉伯语 |
| 2 | be 白俄罗斯语 |
| 3 | be 白俄罗斯语 |
| 4 | bg 保加利亚语 |
| 5 | ca 加泰罗尼亚语 |
| 6 | da 丹麦语 |
| 7 | de 德语 |
| 8 | el 希腊语 |
| 9 | en 英语 |
| 10 | enShort 英语 -短 |
| 11 | es 西班牙语 |
| 12 | eu 巴斯克语 |
| 13 | fi 芬兰语 |
| 14 | fr 法语 |
| 15 | he 希伯来语 |
| 16 | hu 匈牙利语 |
| 17 | inBG 孟加拉语 |
| 18 | inHI 印地语 |
| 19 | inID 马来语 |
| 20 | it 意大利语 |
| 21 | ja 日语 |
| 22 | ko 韩语 |
| 23 | ml 马拉雅拉姆语 |
| 24 | nbNO 挪威博克马尔语 |
| 25 | nl 荷兰语 |
| 26 | nnNO 挪威尼诺斯克语 |
| 27 | pl 波兰语 |
| 28 | ptBR 葡萄牙语 |
| 29 | ro 罗马尼亚语 |
| 30 | ru 俄语 |
| 31 | sv 瑞典语 |
| 32 | ta 泰米尔语 |
| 33 | th 泰语 |
| 34 | tr 土耳其语 |
| 35 | uk 乌克兰语 |
| 36 | vi 越南语 |
| 37 | zhCN 中文 |
让我们使用下面给出的工作示例讨论几个语言环境 −
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - TimeAgo Using Locale</title>
<link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,minimum-scale = 1, initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;-ms
-animation:none;
animation:none
}
</style>
</noscript>
<script async custom-element = "amp-timeago"
src = "https://cdn.ampproject.org/v0/amp-timeago-0.1.js">
</script>
</head>
<body>
<h1>Google AMP - TimeAgo Example Using Locale</h1>
<h3>Locale : Russian</h3>
<amp-timeago layout = "fixed"
width = "160" height = "20"
datetime = "2018-10-01T00:37:33.809Z"
locale = "ru">
Monday 01 October 2018 00.37
</amp-timeago>
<h3>Locale : Korean</h3>
<amp-timeago
layout = "fixed"
width = "160"
height = "20"
datetime = "2018-10-01T00:37:33.809Z"
locale = "ko">
Monday 01 October 2018 00.37
</amp-timeago>
<h3>Locale : Hindi</h3>
<amp-timeago
layout = "fixed"
width = "160"
height = "20"
datetime = "2018-10-01T00:37:33.809Z"
locale = "inHI">
Monday 01 October 2018 00.37
</amp-timeago>
<h3>Locale : Spanish</h3>
<amp-timeago
layout = "fixed"
width = "160"
height = "20"
datetime = "2018-10-01T00:37:33.809Z"
locale = "es">
Monday 01 October 2018 00.37
</amp-timeago>
<h3>Locale : French</h3>
<amp-timeago
layout = "fixed"
width = "160"
height = "20"
datetime = "2018-10-01T00:37:33.809Z"
locale = "fr">
Monday 01 October 2018 00.3
</amp-timeago>
</body>
</html>
输出
上述代码的输出如下所示 −
如果需要更改"X 时间前"显示，我们可以将"cutoff"属性与 timeago 结合使用。Cutoff 以秒为单位获取值以摆脱显示。
让我们借助下面给出的工作示例来理解这一点 −
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - TimeAgo</title>
<link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,minimum-scale=1, initial-scale=1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none
}
</style>
</noscript>
<script async custom-element = "amp-timeago"
src = "https://cdn.ampproject.org/v0/amp-timeago-0.1.js">
</script>
</head>
<body>
<h1>Google AMP - TimeAgo Example</h1>
<amp-timeago
layout = "fixed"
width = "160"
height = "20"
datetime = "2018-10-01T00:37:33.809Z"
locale = "en"
cutoff = "300">
Monday 01 October 2018 00.37
</amp-timeago>
</body>
</html>
输出
Google AMP - Mathml
使用 MathML，我们可以显示数学公式。在本章中，我们将看到一个实际示例，说明如何使用 MathML 并使用一些数学公式来显示相同的内容。
要使用 MathML，我们需要包含以下 javascript 文件 −
<script async custom-element = "amp-mathml" src = "https://cdn.ampproject.org/v0/amp-mathml-0.1.js"> </script>
MathML AMP 标签
mathML amp 标签的格式如下 −
<amp-mathml layout = "container"
data-formula = "\[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]">
</amp-mathml>
请注意，data-formula 是指定公式的必需属性。
示例
让我们借助示例更好地理解此标签。
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - MathML</title>
<link rel = "canonical" href = " http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none
}
</style>
</noscript>
<script async custom-element = "amp-mathml"
src = "https://cdn.ampproject.org/v0/amp-mathml-0.1.js">
</script>
</head>
<body>
<h1>Google AMP - MathML Example</h1>
<amp-mathml layout = "container"
data-formula = "\[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]">
</amp-mathml>
</body>
</html>
输出
Amp-mathml 标签在执行时会在 iframe 中呈现显示，如下所示 −
Google AMP - Fit Text 适合文本
如果空间不足以呈现显示，Amp 标签 amp-fit-text 将减小字体大小。本章详细讨论了此标签。
要使 amp-fit-text 正常工作，我们需要添加以下脚本 −
<script async custom-element = "amp-fit-text" src = "https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"> </script>
Amp Fit-Text 标签
amp-fit 文本标签的格式如下所示 −
<amp-fit-text width = "200" height = "200" layout = "responsive"> Text here </amp-fit-text>
示例
让我们借助示例更好地理解此标签。
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Amp Fit-Text</title>
<link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,minimum-scale = 1, initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:-amp-start 8s steps(1,end)
0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;-moz-animation:none;-ms
-animation:none;animation:none}
</style>
</noscript>
<script async custom-element = "amp-fit-text"
src = "https://cdn.ampproject.org/v0/amp-fit-text-0.1.js">
</script>
</head>
<body>
<h1>Google AMP - Amp Fit-Text</h1>
<div style = "width:150px;height:150px; ">
<amp-fit-text
width = "150"
height = "150"
layout = "responsive">
<b>Welcome To TutorialsPoint - You are browsing the best resource
for Online Education</b>
</amp-fit-text>
</div>
</body>
</html>
输出
上述代码的输出如下所示 −
如果您看到使用 amp-fit-text 的显示，则内容会尝试根据可用空间进行调整。
Amp-fit-text 带有 2 个属性 max-font-size 和 min-font-size。
当我们使用 max-font-size 时，如果没有可用空间来呈现文本，它将尝试减小尺寸并在可用空间内进行调整。
如果我们指定 min-font-size，并且如果空间不可用，它将截断文本并在文本所在的位置显示点隐藏。
示例
让我们看一个工作示例，其中我们将为 amp-fit-text 指定 max-font-size 和 min-font-size。
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Amp Fit-Text</title>
<link rel = "canonical" href = " http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
<script async custom-element = "amp-fit-text" src =
"https://cdn.ampproject.org/v0/amp-fit-text-0.1.js">
</script>
</head>
<body>
<h1>Google AMP - Amp Fit-Text</h1>
<div style = "width:150px;height:150px; ">
<amp-fit-text
width = "150"
height = "150"
layout = "responsive"
max-font-size = "30"
min-font-size = "25">
<b>Welcome To TutorialsPoint - You are
browsing the best resource for Online Education</b>
</amp-fit-text>
</div>
</body>
</html>
输出
Google AMP - 日期倒计时
另一个 amp 组件称为 Amp 日期倒计时，用于显示到给定日期即 Y2K38 (2038) 为止的天、小时、分钟、秒(默认情况下)。显示可以根据您选择的语言环境进行;默认情况下，它是 en(英语)。amp-date-countdown 使用 amp-mustache 模板来呈现数据。
在本章中，我们将查看一些工作示例，以更详细地了解 amp-date-countdown。
要使用 amp-date-countdown，我们需要添加以下脚本
对于 amp-date-countdown
<script async custom-element = "amp-date-countdown"
src = "https://cdn.ampproject.org/v0/amp-date-countdown-0.1.js">
</script>
对于 amp-mustache
<script async custom-template = "amp-mustache"
src = "https://cdn.ampproject.org/v0/amp-mustache-0.1.js">
</script>
Amp-date-countdown 标签
amp-date-countdown 标签如下 −
<amp-date-countdown timestamp-seconds = "2100466648"
layout = "fixed-height"
height = "50">
<template type = "amp-mustache">
<p class = "p1">
{{d}} days, {{h}} hours, {{m}} minutes and {{s}} seconds until
<a href = "https://en.wikipedia.org/wiki/Year_2038_problem">
Y2K38
</a>.
</p>
</template>
</amp-date-countdown>
amp-date-countdown 的属性
amp-date-countdown 的属性列于此处的表格中 −
| Sr.No | 属性和说明 |
|---|---|
| 1 | end-date 要倒计时的 ISO 格式日期。例如，2025-08-01T00:00:00+08:00 |
| 2 | timestamp-ms 以毫秒为单位的 POSIX 纪元值;假定为 UTC 时区。例如，timestamp-ms="1521880470000" |
| 3 | timestamp-seconds 以秒为单位的 POSIX 纪元值;假定为 UTC 时区。例如，timestamp-seconds="1521880470" |
| 4 | timeleft-ms 剩余倒计时的毫秒值。例如，剩余 50 小时 timeleft-ms="180,000,000" |
| 5 | offset-seconds(可选) 正数或负数，表示要从给定的结束日期增加或减去的秒数。例如，offset-seconds="60" 会在 end-date 上添加 60 秒 |
| 6 | when-ended(可选) 指定是否在计时器达到 0 秒时停止计时器。该值可以设置为 stop(默认)，表示计时器在 0 秒时停止，不会超过最终日期，或设置为 continue，表示计时器在达到 0 秒后应继续。 |
| 7 | locale(可选) 每个计时器单元的国际化语言字符串。默认值为 en(英语)。支持的值列在下面。 |
格式
amp-date-countdown 用于显示倒计时的格式在下表中给出 −
| Sr.No | 格式 &描述 |
|---|---|
| 1 | d 将日期显示为 0、1、2、3...无穷 |
| 2 | dd 将日期显示为 00、01、02、03...无穷 |
| 3 | h 将小时显示为 0、1、2、3...无穷 |
| 4 | hh 将小时显示为00,01,02,03...无穷大 |
| 5 | m 将分钟显示为 0,1,2,3,4 ... 无穷大 |
| 6 | mm 将分钟显示为 00,01,02,03...无穷大 |
| 7 | s 将秒显示为 0,1,2,3...无穷大 |
| 8 | ss 将秒显示为 00、01、02、03 ...无穷大 |
| 9 | days 根据语言环境显示天或天字符串 |
| 10 | hours 根据语言环境显示小时或小时字符串 |
| 11 | minutes 根据语言环境显示分钟或分钟字符串 |
| 12 | seconds 根据语言环境显示秒或秒字符串 |
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Amp Date-Countdown</title>
<link rel = "canonical" href = " http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{-webkit-animation:-amp-start 8s steps(1,end)
0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{-webkit-animation:none;-moz-animation:none;-ms
-animation:none;animation:none}
</style>
</noscript>
<script async custom-element = "amp-date-countdown"
src = "https://cdn.ampproject.org/v0/amp-date-countdown-0.1.js">
</script>
<script async custom-template="amp-mustache" src=
"https://cdn.ampproject.org/v0/amp-mustache-0.1.js">
</script>
</head>
<body>
<h1>Google AMP - Amp Date-Countdown</h1>
<amp-date-countdown
timestamp-seconds = "2145683234"
layout = "fixed-height"
height = "50">
<template type = "amp-mustache">
<p class = "p1">
{{d}} days, {{h}} hours, {{m}} minutes and
{{s}} seconds until
<a href = "https://en.wikipedia.org/wiki/Year_2038_problem">
Y2K38
</a>.
</p>
</template>
</amp-date-countdown>
</body>
</html>
输出
示例
让我们通过一个实际示例了解 amp-countdown 属性 offset-seconds −
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Amp Date-Countdown</title>
<link rel = "canonical" href = " http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:-amp-start 8s steps(1,end)
0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;-moz-animation:none;-ms
-animation:none;animation:none}
</style>
</noscript>
<script async custom-element = "amp-date-countdown"
src = "https://cdn.ampproject.org/v0/amp-date-countdown-0.1.js">
</script>
<script async custom-template = "amp-mustache"
src = "https://cdn.ampproject.org/v0/amp-mustache-0.1.js">
</script>
</head>
<body>
<h1>Google AMP - Amp Date-Countdown</h1>
<amp-date-countdown
end-date = "2020-01-19T08:14:08.000Z"
offset-seconds = "-50"
layout = "fixed-height"
height = "100">
<template type = "amp-mustache">
<p class = "p1">
{{d}} days, {{h}} hours, {{m}}
minutes and {{s}} seconds until 50
seconds before 2020.
</p>
</template>
</amp-date-countdown>
</body>
</html>
输出
支持的语言环境列表
以下是 amp-date-countdown 支持的语言环境列表 −
| Sr.No | 名称和语言环境 |
|---|---|
| 1 | en 英语 |
| 2 | es 西班牙语 |
| 3 | fr 法语 |
| 4 | de 德语 |
| 5 | id 印度尼西亚语 |
| 6 | it 意大利语 |
| 7 | ja 日语 |
| 8 | ko 韩语 |
| 9 | nl 荷兰语 |
| 10 | pt 葡萄牙语 |
| 11 | ru 俄语 |
| 12 | th 泰语 |
| 13 | tr 土耳其语 |
| 14 | vi 越南语 |
| 15 | zh-cn 简体中文 |
| 16 | zh-tw 繁体中文 |
现在，我们将尝试使用上述语言环境之一显示倒计时的一个示例。
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Amp Date-Countdown</title>
<link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
<meta name="viewport" content="width = device-width, minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end)0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
<script async custom-element = "amp-date-countdown"
src = "https://cdn.ampproject.org/v0/amp-date-countdown-0.1.js">
</script>
<script async custom-template = "amp-mustache"
src = "https://cdn.ampproject.org/v0/amp-mustache-0.1.js">
</script>
</head>
<body>
<h1>Google AMP - Amp Date-Countdown</h1>
<amp-date-countdown
locale = "ja"
end-date = "2020-01-19T08:14:08.000Z"
offset-seconds = "-50"
layout = "fixed-height"
height = "100">
<template type = "amp-mustache">
<p class = "p1">
{{d}} {{days}}, {{h}} {{hours}}, {{m}}
{{minutes}} and {{s}} {{seconds}} until
50 seconds before 2020.
</p>
</template>
</amp-date-countdown>
</body>
</html>
输出
Google AMP - 日期选择器
AMP Datepicker 是一个 amp 组件，它在页面上显示日历，用户可以在其中选择日期。AMP datepicker 可以像静态日历一样显示，也可以基于输入选择显示，只需单击按钮即可。
要使 amp-date-picker 正常工作，我们需要将以下脚本添加到页面 −
<script async custom-element = "amp-date-picker" src = "https://cdn.ampproject.org/v0/amp-date-picker-0.1.js"> </script>
Amp-date-picker 标签
amp-date-picker 的标签如下所示 −
<amp-date-picker layout = "fixed-height" height = "360"></amp-date-picker>
支持的属性
amp-date-picker 支持以下属性 −
| Sr.No | 属性和说明 |
|---|---|
| 1 | mode 可用选项为静态和覆盖。对于静态，日历将默认在页面上打开。对于覆盖，日历将在交互时打开。 |
| 2 | mode 可用选项为单一和范围。使用单一，您只能在日历上选择一个日期。使用范围，您可以选择多个日期，但在一个连续的范围内。 |
| 3 | input-selector 这可以是日期输入的查询选择器。例如，对于 id 是 #nameoftheid 的类，它是 .nameoftheclass。将为分配了 id 的标签更新日期。 |
| 4 | start-input-selector 这可以是日期输入的查询选择器。例如，对于 id 是 #nameoftheid 的类，它是 .nameoftheclass。将为分配了 id 的标签更新日期。 |
| 5 | end-input-selector 这可以是日期输入的查询选择器。例如，对于 id 是 #nameoftheid 的类，它是 .nameoftheclass。将更新分配有 ID 的标签的日期。 |
| 6 | min 用户可以选择的最早日期。必须将其格式化为 ISO 8601 日期。如果不存在 min 属性，则当前日期将为最短日期。 |
| 7 | max 用户可以选择的最晚日期。必须将其格式化为 ISO 8601 日期。如果不存在 max 属性，则日期选择器将没有最大日期。 |
| 8 | month-format 显示所选日期所需的月份格式。默认情况下，值为"MMMM YYYY" |
| 9 | format 您希望在输入框或使用选择器的任何 html 元素中显示日期的格式。默认情况下为"YYYY-MM-DD" |
| 10 | week-day-format 显示星期几的格式。 |
| 11 | locale 显示日历视图的语言环境。默认情况下为 en。 |
| 12 | minimum-nights 用户必须在日期范围内选择的夜晚数。默认值为"1"。值为"0"时，用户可以选择相同的日期作为开始日期和结束日期。 |
| 13 | number-of-months 日历视图中一次显示的月份数。默认值为"1"。 |
| 14 | first-day-of-week 指定为一周的第一天 (0-6)。默认值为"0"(星期日)。 |
| 15 | day-size 日历视图表中日期单元格的大小(以 px 为单位)。默认值为 39。 |
主要属性是 type 和 mode。对于 mode，我们有 static 和 overlay 类型的日历。对于 type，我们可以有 single 和 range 选项。使用 type = "single"，我们可以从日历中选择一个日期，而对于 type = "range"，我们可以在一个范围内选择多个数据。
现在，让我们通过一些工作示例了解静态和覆盖类型日历的 amp-date-picker。
AMP 静态日期选择器
对于静态类型日期选择器，我们需要指定 mode=static，如下例所示。
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Amp Date-Picker Static </title>
<link rel = "canonical" href = " http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width, minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{-webkit-animation:
none;-moz-animation:none;-ms-animation:none;animation:none}
</style>
</noscript>
<script async custom-element = "amp-date-picker"
src = "https://cdn.ampproject.org/v0/amp-date-picker-0.1.js">
</script>
<script async custom-element = "amp-bind"
src = "https://cdn.ampproject.org/v0/amp-bind-0.1.js">
</script>
<script async custom-template = "amp-mustache"
src = "https://cdn.ampproject.org/v0/amp-mustache-0.1.js">
</script>
<style>
input[type = text]{
width: 50%;
padding: 12px;
border: 1px
solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;display: inline-block;
}
.col-label {
float: left;width: 25%;margin-top: 6px;
}
.col-content {
float: left;width: 75%;margin-top: 6px;
}
.row:after {
content: "";display: table;clear: both;
}
.amp_example {
background-color: #f1f1f1;
padding: 0.01em 16px;
margin: 20px 0;
box-shadow: 0 2px 4px 0
rgba(0,0,0,0.16),0 2px 10px 0
rgba(0,0,0,0.12)!important;
}
h3{font-family: "Segoe UI",Arial,sans-serif;
font-weight: 400;margin: 10px 0;}
</style>
</head>
<body>
<div class = "amp_example">
<h3>Google AMP - Amp Date-Picker using type = single</h3>
<amp-date-picker
id = "static-date"
type = "single"
mode = "static"
layout = "fixed-height"
height = "600"
format = "YYYY-MM-DD"
input-selector = "#date">
<div class = "row">
<div class = "col-label">
<label for = "start">
Date is:
</label>
</div>
<div class = "col-content">
<input type = "text" id = "date" name = "date"
placeholder = "Date Selected Is...">
</div>
</div>
</amp-date-picker>
<div>
</body>
</html>
请注意，在此示例中，我们默认在屏幕上显示日历，即 datepicker。
用户选择的日期显示在文本字段中，如下面的演示屏幕所示 −
输出
如何从 amp-date-picker 获取选择的日期?
如果您查看上述示例，则有一个名为 input-selector 的属性，它被赋予了文本字段的 id。当用户选择日期时，它会显示在输入字段内。
<amp-date-picker
id = "static-date"
type = "single"
mode = "static"
layout = "fixed-height"
height = "600"
format = "YYYY-MM-DD"
input-selector = "#date"
<div class = "row">
<div class = "col-label">
<label for = "start">Date is:</label>
</div>
<div class = "col-content">
<input type = "text" id = "date" name = "date"
placeholder = "Date Selected Is...">
</div>
</div>
</amp-date-picker>
您还可以为 input-selector 属性赋予 name 属性，如下所示 −
<amp-date-picker type = "single" mode = "static" layout = "container" input-selector = "[name = date]"> <input type = "text" id = "date" name = "date" placeholder = "Date Selected Is..."> </amp-date-picker>
如果未指定输入选择器，则 amp-date-picker 会创建一个隐藏的输入字段，并使用 amp-date 选择器的 id 为其指定名称 date 或 ${id}-date。
我们将讨论更多示例，其中 date-picker 具有不同的属性。在上面，我们可以选择单个日期，因为我们提到 type="single" 并将模式设为静态。我们还可以通过指定类型为 type="range" 来选择日期范围。
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Amp Date-Picker Static </title>
<link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width, minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:
none;-moz-animation:none;-ms-animation:none;animation:none}
</style>
</noscript>
<script async custom-element = "amp-date-picker"
src = "https://cdn.ampproject.org/v0/amp-date-picker-0.1.js">
</script>
<script async custom-element = "amp-bind"
src = "https://cdn.ampproject.org/v0/amp-bind-0.1.js">
</script>
<script async custom-template = "amp-mustache"
src = "https://cdn.ampproject.org/v0/amp-mustache-0.1.js">
</script>
<style>
input[type = text]{
width: 50%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {padding: 12px 12px 12px 0;display: inline-block;}
.col-label {float: left;width: 25%;margin-top: 6px;}
.col-content {float: left;width: 75%;margin-top: 6px;}
.row:after {content: "";display: table;clear: both;}
.amp_example {
background-color: #f1f1f1;
padding: 0.01em 16px;
margin: 20px 0;
box-shadow: 0 2px 4px 0
rgba(0,0,0,0.16),0 2px 10px 0
rgba(0,0,0,0.12)!important;
}
h3{
font-family: "Segoe UI",Arial,sans-serif;
font-weight: 400;margin: 10px 0;
}
</style>
</head>
<body>
<div class = "amp_example">
<h3>Google AMP - Amp Date-Picker Static Multi Select Dates using type = range</h3>
<amp-date-picker
id = "static-date"
type = "range"
mode = "static"
layout = "fixed-height"
height = "600"
start-input-selector = "#start"
end-input-selector = "#end"
format = "YYYY-MM-DD"
input-selector = "#static-date-input">
<div class = "row">
<div class = "col-label">
<label for = "start">Start Date:</label>
</div>
<div class = "col-content">
<input type = "text" id = "start"
name = "start" placeholder = "Start Date">
</div>
</div>
<div class = "row">
<div class = "col-label">
<label for = "end">End Date:</label>
</div>
<div class = "col-content">
<input type = "text" id = "end"
name = "end" placeholder = "End Date">
</div>
</div>
</amp-date-picker>
</div>
</body>
</html>
输出
上面显示的代码的输出如下所示 −
如何使用从 amp-date-picker 中选择的 type= "range" 获取开始和结束日期?
为了获取开始和结束日期，我们使用了 amp-date-picker 属性 start-input-selector 和 end-input-selector。
语法的详细信息显示在此处 −
<amp-date-picker id = "static-date" type = "range" mode = "static" layout = "fixed-height" height = "600" start-input-selector = "#start" end-input-selector="#end" format = "YYYY-MM-DD" input-selector = "#static-date-input"> <input type = "text" id = "start" name = "start" placeholder="Start Date"> <input type = "text" id = "end" name = "end" placeholder = "End Date"> </amp-date-picker>
两个选择器都有输入字段 ID，我们希望在其中显示开始和结束日期。您还可以提供输入字段的名称，如此处所述。
AMP 覆盖日期选择器
对于覆盖模式日期选择器，日历会响应输入字段显示。我们可以使用 type=" single" 和 type=" range" 的覆盖，就像我们在静态日期选择器中看到的那样。
现在让我们看一个为覆盖类型日期选择器选择日期范围的工作示例。
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<itle>Google AMP - Amp Date-Picker Static</title>
<link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:
none;-moz-animation:none;-ms-animation:none;animation:none}
</style>
</noscript>
<script async custom-element = "amp-date-picker"
src = "https://cdn.ampproject.org/v0/amp-date-picker-0.1.js">
</script>
<script async custom-element = "amp-bind"
src = "https://cdn.ampproject.org/v0/amp-bind-0.1.js">
</script>
<script async custom-template = "amp-mustache"
src = "https://cdn.ampproject.org/v0/amp-mustache-0.1.js">
</script>
<style>
input[type=text]{
width: 50%;
padding: 12px;border:
1px solid #ccc;
border-radius: 4px;resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
font-family: "Segoe UI",Arial,sans-serif;
font-weight: 400;
}
.col-label {float: left;width: 25%;margin-top: 6px;}
.col-content {float: left;width: 75%;margin-top: 6px;}
.row:after {content: "";display: table;clear: both;}
.amp_example {
background-color: #f1f1f1;
padding: 0.01em 16px;
margin: 20px 0;
box-shadow: 0 2px 4px 0
rgba(0,0,0,0.16),0 2px 10px 0
rgba(0,0,0,0.12)!important;
}
h3{font-family: "Segoe UI",Arial,sans-serif;font-weight: 400;margin: 10px 0;}
button { background-color: #ACAD5C;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
</style>
</head>
<body>
<div class = "amp_example">
<h3>Google AMP - Amp Date-Picker Overlay Multi Select Dates using type = rangelt;/h3>
<amp-date-picker id = "overlay-date"
type = "range"
mode = "overlay"
start-input-selector = "#start"
end-input-selector = "#end"
format = "YYYY-MM-DD"
open-after-select
input-selector = "#start">
<div class = "row">
<div class = "col-label">
<label for = "start">Start Date:lt;/label>
</div>
<div class = "col-content">
<input type = "text" id = "start"
name = "start" placeholder = "Start Date">
</div>
</div>
<div class = "row">
<div class = "col-label">
<label for = "end">End Date:lt;/label>
</div>
<div class = "col-content">
<input type = "text" id="end" name = "end"
placeholder = "End Date">
</div>
</div>
<div class = "row">
<div class = "col-label">
</div>
<div class = "col-content">
<button class = "ampstart-btn caps" on = "tap:overlay-date.clear">
Clear
</button>
</div>
</div>
</amp-date-picker>
</div>
</body>
</html>
输出
上面显示的代码的输出如下所示 −
我们已经了解了如何获取开始和结束日期。请注意，我们在这里使用了另一个属性 open-after-select。此属性将在选择后保持覆盖层打开。如果您单击日期选择器外部，它将关闭。还添加了一个名为 clear 的按钮。单击 clear 按钮时，所选日期将被清除。执行此操作的语法如下 −
<button class = "ampstart-btn caps" on = "tap:overlay-date.clear"> Clear </button>
要添加事件，我们必须使用 on 属性。有关事件的更多详细信息将在本教程的 Events 章节中讨论。我们使用了标签行为，并为此指定了 datepicker 的 id 和 clear 事件，该事件负责清除所选的日期范围。
接下来，让我们看看如何将 amp-date-picker 用作灯箱。
AMP Lightbox 日期选择器
日期选择器可以在模式窗口内使用。我们也可以使用 lightbox 日期选择器来实现这一点。让我们借助一个实际示例来理解这一点。
要在 lightbox 中使用日期选择器，我们需要添加 light-box 脚本，如下所示 −
<script async custom-element = "amp-lightbox" src = "https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"> </script>
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Amp Date-Picker Static </title>
<link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width=device-width,minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
<script async custom-element = "amp-date-picker"
src = "https://cdn.ampproject.org/v0/amp-date-picker-0.1.js">
</script>
<script async custom-element = "amp-bind" src = "
https://cdn.ampproject.org/v0/amp-bind-0.1.js">
<script>
<script async custom-template = "amp-mustache"
src = "https://cdn.ampproject.org/v0/amp-mustache-0.1.js">
</script>
<script async custom-element = "amp-lightbox"
src = "https://cdn.ampproject.org/v0/amp-lightbox-0.1.js">
</script>
<style>
input[type=text]{
width: 50%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
font-family: "Segoe UI",Arial,sans-serif;
font-weight: 400;
}
.col-label {
float: left;width: 25%;
margin-top: 6px;
}
.col-content {
float: left;
width: 75%;
margin-top: 6px;
}
.row:after {
content: "";
display: table;clear: both;
}
.amp_example {
background-color: #f1f1f1;
padding: 0.01em 16px;
margin: 20px 0;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0rgba(0,0,0,0.12)!important;
}
h3{font-family: "Segoe UI",Arial,sans-serif;
font-weight: 400;
margin: 10px 0;
}
button {
background-color: #ACAD5C;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
.lightbox {background-color: rgba(100, 100, 100, 0.5);}
</style>
</head>
<body>
<div class = "amp_example">
<h3>Google AMP - Amp Date-Picker Overlay Multi Select Dates using type = range</h3>
<div class = "row">
<div class = "col-label">
<label for = "start">Start Date:</label>
<div>
<div class = "col-content">
<input type = "text" id = "start" name =
"start" placeholder = "Start Date" on = "tap:lightbox.open">
</div>
</div>
<div class = "row">
<div class = "col-label">
<label for = "end">End Date:</label>
</div>
<div class = "col-content">
<input type = "text" id = "end" name =
"end" placeholder = "End Date" on = "tap:lightbox.open">
</div>
</div>
<div class = "row">
<div class = "col-label"></div>
<div class = "col-content">
<button class = "ampstart-btn caps" on =
"tap:overlay-date.clear">Clear</button>
</div>
</div>
<amp-lightbox id = "lightbox" layout = "nodisplay" class = "lightbox">
<amp-date-picker id = "overlay-date"
type = "range"
layout = "fill"
start-input-selector = "#start"
end-input-selector = "#end"
format = "YYYY-MM-DD"
on = "activate: lightbox.open;deactivate: lightbox.close">
</amp-date-picker>
</amp-lightbox>
</div>
</body>
</html>
输出
当用户点击输入字段时，日期选择器将在灯箱内打开，如下所示 −
要执行此操作，请在输入字段上添加一个事件，如下所示 −
<input type = "text" id = "start" name = "start" placeholder = "Start Date" on = "tap:lightbox.open"> <input type = "text" id = "end" name = "end" placeholder = "End Date" on = "tap:lightbox.open">
请注意，"on" 是调用点击 − lightbox.open 打开灯箱的事件。
此处 lightbox 是分配给 amp-lightbox 的 ID，如下所示。Amp-date-picker 在 amp-lightbox 内部调用，并在点击输入字段时激活。
<amp-lightbox id = "lightbox" layout = "nodisplay" class = "lightbox">
<amp-date-picker id = "overlay-date"
type = "range"
layout = "fill"
start-input-selector = "#start"
end-input-selector = "#end"
format = "YYYY-MM-DD"
on = "activate: lightbox.open;deactivate: lightbox.close">
</amp-date-picker>
</amp-lightbox>
Google AMP - Story
Amp-story 是一个 amp 组件，用于显示内容，让用户参与故事。例如，使用一系列图像讲述一个品牌。
要使用 amp-story，我们需要包含如下所示的脚本 −
<script async custom-element = "amp-story"
src = "https://cdn.ampproject.org/v0/amp-story-1.0.js">
</script>
在本章中，让我们了解 amp-story 是什么以及它是如何工作的。假设我们有一个图片库，并希望在页面上显示它。在 amp 页面中，我们可以使用 amp-story 组件使其看起来美观且对用户具有交互性。
amp-story 标签的格式如下所示 −
<amp-story standalone> ---> Main story Tag
<amp-story-page id = "page-1"> ---> Pages inside the story e.g page1
<amp-story-grid-layer template = "fill"> -->
Layers for the page1.You can have more than one layer.
//Add html elements here or amp components
</amp-story-grid-layer>
<amp-story-grid-layer template = "fill"> -->
Layers for the page1.You can have more than one layer.
//Add html elements here or amp components
</amp-story-grid-layer>
...
</amp-story-page>
<amp-story-page id = "page-2"> ---> Pages inside the story e.g page2
<amp-story-grid-layer template = "fill"> -->
Layers for the page2.You can have more than one layer.
//Add html elements here or amp components
</amp-story-grid-layer>
...
</amp-story-page>
...
</amp-story>
为 amp-story 添加了一些附加属性，如下所示 −
<amp-story standalone title = "My Story" publisher = "The AMP Team" publisher-logo-src = "publisherlogo image here" poster-portrait-src = "poster portrait here" poster-square-src = "poster square image here" poster-landscape-src = "poster landscape image here">
此功能使使用 amp 的故事讲述非常具有互动性。
以下代码显示了 amp-story 的一个工作示例。其输出针对桌面和移动模式显示。
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<script async custom-element = "amp-story" src = "https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
<title>Google AMP - Story</title>
<meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale=1">
<link rel = "canonical" href = "/stories/introduction/amp_story_hello_world/">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:
none;-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
<style amp-custom>
amp-story {
font-family: Roboto, Helvetica, Arial, sans-serif;
}
amp-story-page * {
color: white;
text-align: center;
}
</style>
</head>
<body>
<amp-story standalone title = "Stories in AMP - Hello World" publisher = "AMP Project">
<amp-story-page id = "page-1">
<amp-story-grid-layer template = "fill">
<amp-img src = "images/christmas1.jpg"
width = "300" height = "250"
layout = "responsive">
</amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template = "vertical">
<h1>Hello World</h1>
<p>This is an AMP Story.</p>
</amp-story-grid-layer>
</amp-story-page>
<amp-story-page id = "page-2">
<amp-story-grid-layer template = "fill">
<amp-img src = "images/christmas5.jpg"
width = "300" height = "250"
layout = "responsive">
</amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template = "vertical">
<h1>Hello World</h1>
<p>This is an AMP Story.</p>
</amp-story-grid-layer>
</amp-story-page>
<amp-story-page id = "page-3">
<amp-story-grid-layer template = "fill">
<amp-img src = "images/christmas3.jpg"
width = "300" height = "250"
layout = "responsive">
</amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template = "vertical">
<h1>Hello World</h1>
<p>This is an AMP Story.</p>
</amp-story-grid-layer>
</amp-story-page>
<amp-story-page id = "page-4">
<amp-story-grid-layer template = "fill">
<amp-img src = "images/christmas4.jpg"
width = "300" height="250"
layout = "responsive">
</amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template = "vertical">
<h1>Hello World</h1>
<p>This is an AMP Story.</p>
</amp-story-grid-layer>
</amp-story-page>
<amp-story-bookend src = "ampstory.json" layout = "nodisplay">
</amp-story-bookend>
</amp-story>
<body>
</html>
ampstory.json
{
"bookendVersion": "v1.0",
"shareProviders": [
"email",
"twitter",
"tumblr",
{
"provider": "facebook",
"app_id": "254325784911610"
}
],
"components": [
{
"type": "heading",
"text": "Introduction"
},
{
"type": "small",
"title": "Next Story is on Car Brands",
"url": "ampcarbrand.html",
"image": "images/audi.jpg"
}
]
}
桌面输出
这是故事部分的显示方式。您还可以添加视频或任何其他 amp 组件，以使故事更具互动性。
一旦到达故事结尾，它将显示 amp-bookend 中的内容，如下所示 −
<amp-story-bookend src = "ampstory.json" layout = "nodisplay"> </amp-story-bookend>
我们已将 ampstory.json 文件提供给 amp-bookend。json 文件包含下一个故事预览的详细信息，如下所示。当用户点击右侧显示的三个点时，将显示以下屏幕 −
它提供了一个重播按钮，可再次加载故事。您可以点击汽车图片，这将显示汽车品牌的故事。
移动模式下的输出如下 −
Google AMP - Selector 选择器
Amp-selector 是一个 amp 组件，它显示选项菜单，用户可以在选项之间进行选择。显示的选项可以是文本、图像或任何其他 amp 组件。在本章中，我们将详细讨论这一点。
要使用 amp-selector，我们需要包含以下 javascript 文件 −
<script async custom-element = "amp-selector"
src = "https://cdn.ampproject.org/v0/amp-selector-0.1.js">
</script>
amp-selector 的格式
以下代码显示了 amp-selector 格式的示例 −
<amp-selector layout = "container">
<amp-img src = "images/christmas1.jpg"
width = "60"
height = "40"
option = "1">
<amp-img src = "images/christmas2.jpg"
width = "60"
height = "40"
option = "2">
</amp-img>
<amp-img src = "images/christmas3.jpg"
width = "60"
height = "40"
option = "3">
</amp-img>
<amp-img src = "images/christmas4.jpg"
width = "60"
height = "40"
option = "4">
</amp-img>
</amp-selector>
您可以在 amp-selector 中使用标准 html 标签或 amp 组件。内容像菜单一样显示在屏幕上，用户可以在它们之间进行选择。显示的菜单可以是单选或多选。
让我们借助下面给出的单选和多选示例来理解这一点。
Amp Selector 单选
以下代码是 amp-selector 单选的示例 −
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Amp Selector</title>
<link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
<meta name="viewport" content="width=device-width,minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{-
webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;-moz-animation:none;
-ms-animation:none;animation:none}
</style>
</noscript>
<script async custom-element="amp-selector"
src = "https://cdn.ampproject.org/v0/amp-selector-0.1.js">
</script>
<style amp-custom>
amp-selector:not([disabled])
amp-img[option][selected]:not([disabled]) {
outline-color: #b6A848;
outline-width: 2px;
}
</style>
</head>
<body>
<h3>Google AMP - Amp Selector</h3>
<amp-selector layout = "container">
<amp-img src = "images/christmas1.jpg"
width = "60"
height = "40"
option="1">
</amp-img>
<amp-img src="images/christmas2.jpg"
widt h = 60"
height = "40"
option = "2">
</amp-img>
<amp-img src = "images/christmas3.jpg"
width = "60"
height = "40"
option = "3">
</amp-img>
<amp-img src = "images/christmas4.jpg"
width = "60"
height = "40"
option = "4">
</amp-img>
</amp-selector>
</body>
</html>
输出
上述代码的输出如下所示 −
请注意，在上面的示例中，我们使用了 amp-selector 并使用其中的图像来显示选项。它是一个单选选择器，因此您可以选择输出中所示的任意一个图像。
Amp Selector 多选
在此示例中，让我们使用多个属性显示带有图像的 amp-selector，我们可以从选择器中选择多个选项。
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8 ">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Amp Selector</title>
<link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale =1">
<style amp-boilerplate>
body{-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;-moz-animation:none;
-ms-animation:none;animation:none
}
</style>
</noscript>
<script async custom-element = "amp-selector"
src = "https://cdn.ampproject.org/v0/amp-selector-0.1.js">
</script>
<style amp-custom>
amp-selector:not([disabled])
amp-img[option][selected]:not([disabled]) {
outline-color: blue;
outline-width: 2px;
}
</style>
</head>
<body>
<h3>Google AMP - Amp Selector</h3>
<amp-selector layout = "container" multiple>
<amp-img src = "images/christmas1.jpg"
width = "60"
height ="40"
option = "1">
</amp-img>
<amp-img src="images/christmas2.jpg"
width = "60"
height = "40"
option = "2">
</amp-img>
<amp-img src ="images/christmas3.jpg"
width = "60"
height = "40"
option = "3">
</amp-img>
<amp-img src = "images/christmas4.jpg"
width = "60"
height = "40"
option = "4">
</amp-img>
</amp-selector>
</body>
</html>
输出
上述代码的输出如下所示 −
我们还可以使用 amp-selector 显示单选按钮，如下面给出的代码所示 −
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Amp Selector</title>
<link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content ="width = device-width,minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
<script async custom-element = "amp-selector"
src = "https://cdn.ampproject.org/v0/amp-selector-0.1.js">
</script>
<style amp-custom>
.radio-menu {
list-style: none;
}
.radio-menu [option][selected] {
outline: none;
}
.radio-menu [option] {
display: flex;
align-items: center;
}
.radio-menu [option]:before {
transition: background 0.25s ease-in-out;
content: "";
display: inline-block;
width: 24px;
height: 24px;
margin: 8px;
border-radius: 100%;
border: solid 1px black;
}
.radio-menu [option = red][selected]:before {
text-align: center;
content: "✓";
color: white;
background: red;
}
.radio-menu [option = green][selected]:before {
text-align: center;
content: "✓";
color: white;
background: green;
}
.radio-menu [option = blue][selected]:before {
text-align: center;
content: "✓";
color: white;
background: blue;
}
</style>
</head>
<body>
<h3>Google AMP - Amp Selector</h3>
<amp-selector class = "radio-menu" layout = "container" name = "my-selector">
<div option = "red">Red</div>
<div option = "green">Green</div>
<div option = "blue">Blue</div>
</amp-selector>
</body>
</html>
输出
Google AMP - 链接
amp 中的 Link 标签用于告知 Google 搜索引擎可用的 amp 和非 amp 页面。在本章中，我们将详细讨论与 Link 标签相关的方面以及 Google 如何决定 amp 页面和非 amp 页面。
AMP 页面发现
假设您有一个名为 www.mypage.com 的网站。新闻文章链接到页面 − www.mypage.com/news/myfirstnews.html。
当用户在 Google 搜索引擎中搜索并恰好获得非 amp 页面时，为了同时获得对 amp 页面的引用，我们需要使用链接标记指定 amp url，如下所示 −
示例
非 amp 页面的页面 url
<link rel = "amphtml" href = "https://www.mypage.com/news/amp/myfirstnews_amp.html">
此处指定 rel= "amphtml"，以使非 amp 页面指向 amp 版本，这样 Google 就会根据平台显示正确的页面
amp-page 的页面网址
<link rel = "canonical" href = "https://www.mypage.com/news/myfirstnews.html">
此处 rel="canonical" 在 amp 页面中指定，以指向标准版本的 html，以便 Google 根据平台显示正确的版本。
如果您的网站只有一个页面，即 amp 页面，您仍然不要忘记添加 rel="canonical"，它将指向自身 −
<link rel = "canonical" href = "https://www.mypage.com/news/amp/myfirstnews_amp.html">
下图显示了指向 amp 页面的 rel="amphtml" 和指向标准 html 页面的 rel="canonical" 的引用。
使用链接的字体
可以使用链接从外部加载字体，如下所示 −
<link rel = "stylesheet" href = "https://fonts.googleapis.com/css?family=Roboto">
请注意，只允许白名单来源。我们可以从中获取字体的白名单来源列表如下所示 −
Fonts.com − https://fast.fonts.net
Google Fonts − https://fonts.googleapis.com
Font Awesome − https://maxcdn.bootstrapcdn.com
Typekit − https://use.typekit.net/kitId.css(请相应替换 kitId)
下面显示了一个使用 rel="canonical" 和 rel="stylesheet" 的工作示例 −
示例
<!doctype html>
<html amp>
<head>
<meta charset ="utf-8">
<title>Amp Sample Page</title>
<link rel = "canonical" href = "amppage.html">
<meta name = "viewport" content = "width = device-width,minimum-scale=1,initial-scale = 1">
<style amp-custom>
h1 {color: red}
</style>
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none
}
</style>
</noscript>
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/css?family=Roboto">
</head>
<body>
<h1>Amp Sample Page</h1>
<p>
<amp-img src = "images/christmas1.jpg"
width = "300" height = "250"
layout = "responsive">
</amp-img>
</p>
<p style = "font-family: 'Roboto'; font-size:25px;">
Welcome to Amp Page
</p>
</body>
</html>
输出
上述代码的输出如下所示 −
Google AMP - 字体
Amp 字体是 amp 中的一个 amp 组件，它基本上有助于触发和监控 amp 页面的自定义字体。本章详细讨论了 amp-font。
要使用 amp-font，我们需要添加以下 javascript 文件 −
<script async custom-element = "amp-font" src = "https://cdn.ampproject.org/v0/amp-font-0.1.js"> </script>
amp-font 组件用于控制字体加载所需的时间。它有一个 timeout 属性，以毫秒为单位。默认情况下，它是 3000 毫秒。该组件允许从 document.documentElement 或 document.body 中添加/删除类，具体取决于所需字体是否已加载或处于错误状态。
amp-font 标签的格式如下所示 −
<amp-font layout = "nodisplay" font-family = "Roboto Italic" timeout = "2000" on-error-remove-class = "robotoitalic-loading" on-error-add-class = "robotoitalic-missing" on-load-remove-class = "robotoitalic-loading" on-load-add-class = "robotoitalic-loaded"> </amp-font>
如何在 amp 页面中使用 amp-font 的一个实际示例如下 −
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Amp Font</title>
<link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
<cript async custom-element = "amp-font"
src = "https://cdn.ampproject.org/v0/amp-font-0.1.js"
></script>
<style amp-custom>
@font-face {
font-family: 'This font is not available';
font-style: normal;
font-weight: 300;
src: url(fonts/MissingFont.ttf) format('truetype');
}
.font-missing {
color:red;
font-size:25px;
}
</style>
</head>
<body>
<h1>Google AMP - Amp Font</h1>
<amp-font
layout = "nodisplay"
font-family = "Font Does Not exist"
timeout = "2000"
on-error-remove-class = "font-missing"
on-error-add-class = "font-error"
on-load-remove-class = "font-missing"
on-load-add-class = "font-loaded">
</amp-font>
<p class = "font-missing">
Example of amp-font component to show how
attributes on-error-remove-class,
on-error-add-class, on-load-remove-class
and on-load-add-class works when the font
file to be loaded does not exist.
</p>
</body>
</html>
输出
上面给出的示例代码的输出如下所示 −
此处显示了字体文件加载成功时的 amp-font 示例 −
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Amp Font</title>
<link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
<script async custom-element = "amp-font"
src = "https://cdn.ampproject.org/v0/amp-font-0.1.js">
</script>
<style amp-custom>
@font-face {
font-family: 'This font is not available';
font-style: normal;
font-weight: 300;
src: url(fonts/MissingFont.ttf)
format('truetype');
}
@font-face {
font-family: 'Roboto Italic';
font-style: normal;
font-weight: 300;
src:url(fonts/Roboto-Italic.ttf) format('truetype');
}
.font-missing {
color:red;
font-size:25px;
}
.robotoitalic-loading {
color: green;
}
.robotoitalic-loaded {
font-size:25px;
color: blue;
}
.robotoitalic-missing {
color: red;
}
.robotoitalic {
font-family: 'Roboto Italic';
}
</style>
</head>
<body>
<h1>Google AMP - Amp Font</h1>
<amp-font
layout = "nodisplay"
font-family = "Font Does Not exist"
timeout = "2000"
on-error-remove-class = "font-missing"
on-error-add-class = "font-error"
on-load-remove-class = "font-missing"
on-load-add-class = "font-loaded">
</amp-font>
<p class="font-missing">
Example of amp-font component to show
how attributes on-error-remove-class,
on-error-add-class, on-load-remove-class
and on-load-add-class works when the
font file to be loaded does not exist.
</p>
<amp-font
layout = "nodisplay"
font-family = "Roboto Italic"
timeout = "2000"
on-error-remove-class = "robotoitalic-
loading"
on-error-add-class = "robotoitalic-missing"
on-load-remove-class = "robotoitalic-loading"
on-load-add-class = "robotoitalic-loaded">
</amp-font>
<p class = "robotoitalic">
Example of amp-font component to show how
attributes on-error-remove-class,
on-error-add-class, on-load-remove-class
and on-load-add-class works when the font
file exists and loads fine.
</p>
</body>
</html>
输出
上面给出的示例代码的输出如下所示 −
上面的示例展示了如何使用字体属性，例如 font-family、timeout、on-error-remove-class、on-error-add-class、on-load-remove-class、on-load-add-class。这些类决定字体加载是成功还是失败。
Google AMP - List
Amp-list 是一个 amp-component，它调用 CORS json 端点并以 json 文件的形式在模板内显示数据。让我们借助实际示例来理解这一点。
要使用 amp-list，我们需要包含以下脚本 −
<script async custom-element = "amp-list" src = "https://cdn.ampproject.org/v0/amp-list-0.1.js"> </script>
这是 amp-list 标签的格式 −
<amp-list width = "auto" height = "100"
layout = "fixed-height" src = "amplist.json" class = "m1">
<template type = "amp-mustache">
<div class = "images_for_display">
<amp-img width = "150"
height = "100"
alt = "{{title}}"
src = "{{url}}">
</amp-img>
</div>
</template>
</amp-list>
amp-list 使用的 src 是一个 json 文件，其中包含要列出的详细信息。我们可以使用 amp-list 中的普通 html 标签或 amp-components 来显示来自 json 文件的数据。模板类型 amp-mustache 用于数据绑定要显示的数据。
让我们借助如下所示的工作示例来理解这一点 −
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Amp List</title>
<link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;-moz-animation:none;
-ms-animation:none;animation:none}
</style>
</noscript>
<script async custom-element = "amp-list"
src = "https://cdn.ampproject.org/v0/amp-list-0.1.js">
</script>
<script async custom-template = "amp-mustache"
src ="https://cdn.ampproject.org/v0/amp-mustache-0.2.js">
</script>
<style amp-custom>
amp-img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}
</style>
</head>
<body>
<h3>Google AMP - Amp List</h3>
<amp-list width = "auto" height = "100"
layout = "fixed-height" src = "amplist.json" class = "m1">
<template type = "amp-mustache">
<div class = "images_for_display">
<amp-img width = "150"
height = "100"
alt = "{{title}}"
src = "{{url}}">
</amp-img>
</div>
</template>
</amp-list>
</body>
</html>
输出
上面显示的工作示例的输出如下所示 −
上面给出的工作示例中使用的 json 文件显示在此处 −
{
"items": [
{
"title": "Christmas Image 1",
"url": "images/christmas1.jpg"
},
{
"title": "Christmas Image 2",
"url": "images/christmas2.jpg"
},
{
"title": "Christmas Image 3",
"url": "images/christmas3.jpg"
},
{
"title": "Christmas Image 4",
"url": "images/christmas4.jpg"
}
]
}
我们可以使用 amp-list 上的事件刷新列表，如以下代码所示 −
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Amp List</title>
<link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
<script async custom-element = "amp-list"
src = "https://cdn.ampproject.org/v0/amp-list-0.1.js">
</script>
<script async custom-template = "amp-mustache"
src = "https://cdn.ampproject.org/v0/amp-mustache-0.2.js">
</script>
<style amp-custom>
amp-img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}
button{
background-color: #ACAD5C;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
</style>
</head>
<body>
<h3>Google AMP - Amp List</h3>
<button on = "tap:amplist.refresh">Refresh Images</button>
<amp-list id = "amplist" width = "auto" height = "100"
layout = "fixed-height" src = "amplist.json" class = "m1">
<template type = "amp-mustache">
<div class = "images_for_display">
<amp-img width = "150"
height = "100"
alt = "{{title}}"
src = "{{url}}"></amp-img>
</div>
</template>
</amp-list>
</body>
</html>
输出
上面给出的工作示例的输出如下所示 −
添加了一个按钮，单击该按钮时会使用 on 事件调用刷新操作，如下所示 −
<button on = "tap:amplist.refresh"> Refresh Images </button> //amplist 是用于 amp-list 的 id
单击按钮时，将再次调用 json 文件并加载内容。如果已加载图像，则会缓存它们。
Google AMP - 用户通知
Google amp-user-notification 用于向用户显示可关闭的对话框消息。我们可以使用它来通知用户有关页面上的 cookie。
要使用 amp-user-notification，我们需要在页面上添加以下脚本 −
<script async custom-element = "amp-user-notification"
src = "https://cdn.ampproject.org/v0/amp-user-notification-0.1.js">
</script>
Amp-user-notification 标签格式 −
<amp-user-notification id = "my-notification" layout = "nodisplay">
<div>Example of amp-user-notification.
<button on = "tap:my-notification.dismiss">I accept
</button>
</div>
</amp-user-notification>
让我们通过一个实际示例了解 amp-user-notification −
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Amp Selector</title>
<link rel = "canonical" href = " http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none
animation:none
}
</style>
</noscript>
<script async custom-element = "amp-user-notification"
src = "https://cdn.ampproject.org/v0/amp-user-notification-0.1.js">
</script>
<style amp-custom>
div {
font-size: 15px;
background-color : #ccc;
padding: 10px 10px;
border-radius: 2px;
}
button{
background-color: #ACAD5C;
color: white;
cursor: pointer;
float: right;
}
</style>
</head>
<body>
<h3>Google AMP - Amp User Notification</h3>
<amp-user-notification
id = "my-notification"
layout = "nodisplay">
<div>Example of amp-user-notification.
<button on = "tap:my-notification.dismiss">I accept
</button>
</div>
</amp-user-notification>
</body>
</html>
输出
上面给出的工作示例代码的输出如下所示 −
一旦用户点击按钮，通知就会被关闭。一旦关闭，即使您重新加载页面也不会显示通知。
用户通知的数据存储在浏览器 localStorage 中。如果清除 localstorage 并刷新页面，您将能够再次看到通知。您可以在浏览器控制台中使用 localStorage.clear() 尝试相同的操作。
使用 dismiss 操作可以关闭通知，方法是在按钮上使用以下操作
<button on = "tap:my-notification.dismiss"> I accept </button>
当用户点击按钮时，通知将被关闭。
Google AMP - 下一页
Amp 下一页是一个 amp 组件，当用户到达文档末尾时，它可以动态加载更多页面。本章详细介绍了这一概念。
要使用 amp-next-page 组件，我们需要添加以下脚本 −
<script async custom-element = "amp-next-page" src = "https://cdn.ampproject.org/v0/amp-next-page-0.1.js"> </script>
此外，amp-next-page 尚未完全启动，因此要使测试页面正常运行，请添加以下元标记 −
<meta name = "amp-experiments-opt-in" content = "amp-next-page">
要动态加载页面，我们需要将页面网址提供给 type="application/json" 的脚本标记，如下所示 −
<amp-next-page>
<script type = "application/json">
{
"pages": [
{
"title": "Page 2",
"image": "images/christmas1.jpg",
"ampUrl": "ampnextpage1.html"
},
{
"title": "Page 3",
"image": "images/christmas1.jpg",
"ampUrl": "ampnextpage2.html"
}
]
}
</script>
</amp-next-page>
在上面的标签中，我们尝试加载 2 个页面 ampnextpage1.html 和 ampnextpage2.html。
现在，让我们看看最终的输出。所有需要加载的页面都必须添加到包含标题、图像和 ampUrl 的页面数组中。
示例
<!doctype html>
<html amp>
<head>
<meta charset = "utf-8">
<title>Google Amp - Next Page</title>
<link rel = "canonical" href = "ampnextpage.html">
<meta name = "amp-experiments-opt-in" content = "amp-next-page">
<meta name = "viewport" content ="width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body {
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none
}
</style>
</noscript>
<script async src="https://cdn.ampproject.org/v0.js">
</script>
<script async custom-element = "amp-next-page"
src = "https://cdn.ampproject.org/v0/amp-next-page-0.1.js">
</script>
</head>
<body>
<h1>Google Amp - Next Page</h1>
<h1>Page 1</h1>
<p>Start of page 1</p>
<p>此内容从第 1 页加载</p>
<p>此内容从第 1 页加载</p>
<p>此内容从第 1 页加载</p>
<p>此内容从第 1 页加载</p>
<p>此内容从第 1 页加载</p>
<p>此内容从第 1 页加载</p>
<p>此内容从第 1 页加载</p>
<p>此内容从第 1 页加载</p>
<p>此内容从第 1 页加载</p>
<p>此内容从第 1 页加载</p>
<p>此内容从第 1 页加载</p>
<p>此内容从第 1 页加载</p>
<p>此内容从第 1 页加载</p>
<p>此内容从第 1 页加载</p>
<p>此内容从第 1 页加载</p>
<p>此内容从第 1 页加载</p>
<p>此内容从第 1 页加载</p>
<p>此内容从第 1 页加载</p>
<p>此内容从第 1 页加载</p>
<p>此内容从第 1 页加载</p>
<p>此内容从第 1 页加载</p>
<p>此内容从第 1 页加载</p>
<p>End of page 1</p>
<amp-next-page>
<script type = "application/json">
{
"pages": [
{
"title": "Page 2",
"image": "images/christmas1.jpg",
"ampUrl": "ampnextpage1.html"
},
{
"title": "Page 3",
"image": "images/christmas1.jpg",
"ampUrl": "ampnextpage2.html"
}
]
}
</script>
</amp-next-page>
</body>
</html>
输出
您可以注意到，当您滚动时，将显示要加载的下一页，并且地址栏中的页面网址也会更改。
Google AMP - 属性
本章将讨论 amp-components 使用的所有常见属性。
常见属性列表如下 −
- fallback
- heights
- layout
- media
- noloading
- on
- placeholder
- sizes
- width 和 height
fallback 属性
fallback 属性主要用于浏览器不支持所用元素、文件加载出现问题或所用文件出现错误的情况。
例如，您正在使用 amp-video，而媒体文件在浏览器上出现问题，因此在这种情况下，我们可以指定 fallback 属性并显示无法播放媒体文件的消息或浏览器不支持，而不是在页面上显示错误消息。
amp-video 上使用的后备
<amp-video controls
width = "640"
height = "360"
layout = "responsive"
poster = "images/videoposter.png">
<source src = "video/bunny.webm" type = "video/webm" />
<source src = "video/samplevideo.mp4" type = "video/mp4" />
<div fallback>
<p>This browser does not support the video element.</p>
</div>
</amp-video>
让我们通过一个示例了解操作系统回退的工作原理 −
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Amp Video</title>
<link rel = "canonical" href = " http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;-moz-animation:none;
-ms-animation:none;animation:none
}
</style>
</noscript>
<script async custom-element = "amp-video"
src = "https://cdn.ampproject.org/v0/amp-video-0.1.js">
</script>
</head>
<body>
<h3>Google AMP - Amp Video</h3>
<amp-video controls
width = "640"
height = "360"
layout = "responsive"
poster = "images/videoposter.png">
<source src = "video/bunny.webm"type="video/webm" />
<source src = "video/samplevideo.mp4"type = "video/mp4" />
<div fallback>
<p>This browser does not support the video element.</p>
</div>
</amp-video>
</body>
</html>
输出
高度属性
此属性基本支持响应式布局。您可以将媒体表达式用于高度属性，并将其应用于元素的高度。它还采用百分比值，因此高度是根据给定的百分比宽度计算的。
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - heights attribute</title>
<link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width=device-width,minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;-moz-animation:none;
-ms-animation:none;animation:none
}
</style>
</noscript>
<style amp-custom>
amp-img {
border: 1px solid black;
border-radius: 4px;
padding: 5px;
}
h1{font-family: "Segoe UI",Arial,sans-serif;font-weight: 400;margin: 10px 0;}
</style>
</head>
<body>
<h1>Google AMP - heights attribute</h1>
<amp-img src = "images/christmas1.jpg"
width = "320" height = "256"
heights = "(min-width:500px) 200px, 80%">
</amp-img>
</body>
</html>
输出
layout 属性
AMP-Layout 是 google-amp 中的重要功能之一。Amp Layout 确保页面加载时正确呈现 amp 组件，而不会引起任何闪烁或滚动问题。它还会在执行任何其他远程资源(如图像的 http 请求、数据调用)之前检查页面渲染。
amp 支持的布局列表如下 −
- Not Present
- Container
- fill
- fixed
- fixed-height
- flex-item
- intrinsic
- nodisplay
- Responsive
您将在本教程的 Google AMP − 布局 一章中详细了解相关内容。
让我们借助如下所示的示例了解 layout="responsive" 的工作原理 −
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Image>/title>
<link rel = "canonical" href = " http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body {
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body {
-webkit-animation:none;-moz-animation:none;
-ms-animation:none;animation:none
}
</style>
</noscript>
<style amp-custom>
amp-img {
border: 1px solid black;
border-radius: 4px;
padding: 5px;
}
displayitem {
display: inline-block;
width: 200px;
height:200px;
margin: 5px;
}
h1{font-family: "Segoe
UI",Arial,sans-serif;font-weight: 400;margin: 10px 0;}
</style>
</head>
<body>
<h1>Google AMP - Layout = responsive Image Example>/h1>
<div class = "displayitem">
<amp-img alt = "Beautiful Flower"
src = "images/flower.jpg"
width = "246"
height = "205"
layout = "responsive">
</amp-img>
</div>
</body>
</html>
输出
媒体属性
此属性可用于大多数 amp 组件。它需要媒体查询，如果值不匹配，则不会呈现组件。
让我们借助示例了解媒体属性的工作原理 −
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Image</title>
<link rel = "canonical" href = " http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body {
-webkit-animation:none;-moz-animation:none;
-ms-animation:none;animation:none
}
</style>
</noscript>
<style amp-custom>
amp-img {
border: 1px solid black;
border-radius: 4px;
padding: 5px;
}
h1{font-family: "Segoe
UI",Arial,sans-serif;font-weight: 400;margin: 10px 0;}
</style>
</head>
<body>
<h1>Google AMP - Media Attribute</h1>
<div class = "displayitem">
<amp-img
media = "(min-width: 600px)"
src = "images/christmas1.jpg"
width = "466"
height = "355"
layout = "responsive">
</amp-img>
</div>
</body>
</html>
我们在 <amp-img> 标签上使用了媒体属性，如下所示 −
<amp-img media = "(min-width: 600px)" src = "images/christmas1.jpg" width = "466" height = "355" layout = "responsive"> </amp-img>
请注意，如果屏幕宽度小于 600px，则不会显示图像。我们将使用 Google 模拟器移动模式来测试示例。
智能手机上的输出
我们在设备上检查了图像不可见，因为设备的宽度小于 600px。如果我们在平板电脑上检查，我们会得到如下所示的输出 −
IPAD 上的输出
Noloading 属性
Amp 组件(如 <amp-img>、<amp-video>、<amp-facebook>)在实际内容加载并显示给用户之前会显示加载指示器。
要停止显示加载指示器，我们可以使用 noloading 属性，如下所示 −
<amp-img src = "images/christmas1.jpg" noloading height = "300" width = "250" layout = "responsive"> </amp-img>
On 属性
on 属性用于元素上的事件处理和 amp-components 上的操作。使用 on 属性的语法如下 −
语法 −
on = "eventName:elementId[.methodName[(arg1 = value, arg2 = value)]]"
传递给 on 属性的详细信息如下 −
eventName − 这采用可用于 amp-component 的事件的名称。例如，对于表单，我们可以使用 submit-success、submit-error eventNames。
elementId − 这采用需要调用事件的元素的 id。它可以是我们想要了解成功或错误的表单的 ID。
methodName − 这需要事件发生时调用的方法的名称。
arg=value − 这需要传递给方法的 key=value 形式的参数。
也可以将多个事件传递给 On 属性，如下所示 −
on = "submit-success:lightbox;submit-error:lightbox1"
注意 −如果有多个事件，则它们将传递给 on 属性，并使用分号 (;) 分隔。
Actions 属性
Actions 基本上与 on 属性一起使用，语法如下 −
on = "tab:elementid.hide;"
我们可以按如下方式传递多个操作 −
on = "tab:elementid.open;tab:elementid.hide;"
Elementid 是要对其执行操作的元素的 ID。
Amp 有一些全局定义的事件和操作，可用于任何 amp 组件，它们是 tap 事件，操作是 hide、show 和 togglevisibility。
注意 −如果您想隐藏/显示或在任何 html 或 amp 组件上使用 togglevisibility，您可以使用 on="tap:elementid.[hide/show/togglevisibility]"
占位符属性
占位符属性可用于任何 html 元素(例如输入元素)，也可用于 amp 组件。占位符是页面上显示的第一项，一旦内容加载完成，占位符将被删除并变为不可见。
输入元素上的占位符
<input type = "text" id = "date" name = "date" placeholder = "Start Date">
amp 组件上的占位符
<amp-anim src = "images/loreal.gif" width = "300" height = "250" layout = "responsive"> <amp-img placeholder src = "images/flower.jpg" layout = "fill"> </amp-img> </amp-anim>
Sizes 属性
此属性的用法与 heights 属性相同。其值是一个表达式，如下所示 −
<amp-img src = "amp.png" width = "400" height = "300" layout = "responsive" sizes = "(min-width: 250px) 250px, 100vw"> </amp-img>
宽度和高度属性
它们几乎用于所有 html 元素和 amp 组件。宽度和高度用于说明 amp 元素在页面上所占的空间。
示例
<amp-img src = "amp.png" width = "400" height = "300" layout = "responsive"> </amp-img>
Google AMP - 样式和自定义 CSS
Amp 经过深思熟虑后才将页面呈现在屏幕上。加载的页面将包含图像、视频、iframe 等，这些都是需要执行的更多 http 请求。因此，需要执行的 http 请求会被延迟，以便显示页面上的内容，并为要加载的图像、视频、iframe 创建必要的空间。
Amp 具有占位符、后备、srcset 和布局属性等功能，可使页面具有响应性，并确保页面上的内容不会受到干扰。在本章中，我们将详细讨论所有这些内容。
Amp 样式标签
Amp 有一个带有 amp-custom 的样式标签，如下所示 −
<style amp-custom>
button{
background-color: #ACAD5C;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: left;
}
amp-img {
border: 1px solid black;
border-radius: 4px;
padding: 5px;
}
p {
padding: 1rem;
font-size:25px;
}
largeText {
font-size:30px;
background-color:red;
}
</style>
它主要用于编写页面所需的自定义 css。请不要忘记添加 amp-custom 属性;否则它将无法通过 amp 验证，如下所示 −
Amp 还支持 html 元素的内联 css，如下所示 −
<div style = "color:green;margin-left:30px;"> Welcome to TutorialsPoint</p>
外部样式表标签
Amp 不支持外部样式表，在通过 amp 验证时将无法通过验证。
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Dynamic Css Classes</title>
<link rel = "canonical" href = "
http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body {
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body {
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none
}
</style>
</noscript>
<script async custom-element = "amp-bind" src = "
https://cdn.ampproject.org/v0/amp-bind-0.1.js">
</script>
<script async custom-element = "amp-dynamic-css-classes"
src = "https://cdn.ampproject.org/v0/amp-dynamic-css-classes-0.1.js">
</script>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.9 8.0/css/materialize.min.css">
<style amp-custom>
p {
padding: 1rem;
font-size:25px;
}
</style>
</head>
<body>
<h3>Google AMP - Dynamic Css Classes</h3>
<div style = "color:green;margin-left:30px;">
Welcome to TutorialsPoint</p>
</body>
</html>
使用 AMP 验证器 进行验证时，我们收到以下错误。
要以响应方式显示页面中的元素，amp 元素需要指定元素在页面上的宽度和高度。添加 layout = "responsive" 将使元素在页面上保持响应，同时保持纵横比。
有关布局属性的详细信息，请参阅Google AMP – 布局一章。
Google AMP - 动态 CSS 类
amp-dynamic-css-classes 向 body 标签添加动态类。在本章中，让我们了解此标签的详细信息。
要使用 amp-dynamic-css-classes，我们需要添加以下脚本 −
<script asynccustom-element="amp-dynamic-css-classes"
src = "https://cdn.ampproject.org/v0/amp-dynamic-css-classes-0.1.js">
</script>
amp-dynamic-css-classes − 负责处理两个重要的类
- amp-referrer-*
- amp-viewer
让我们详细讨论一下它们。
amp-referrer-*
这些类的设置取决于用户的访问方式。这意味着，如果用户来自 Google，则会设置与 Google 相关的引荐来源类。 Twitter 和 Pinterest 也是如此。
根据引荐来源的类型提供类别。
例如，对于 Google，如果用户从 Google 搜索引擎点击 amp 页面，则会添加以下类别。
- amp-referrer-www-google-com
- amp-referrer-google-com
- amp-referrer-com
同样，Twitter、Pinterest、Linkedin 等也有可用的类别。
amp-viewer
Amp viewer 基本上会更改 amp url 以从 Google 缓存中获取详细信息。如果您在 Google 搜索中搜索某些内容，则显示的轮播将包含所有 amp 页面。
当您单击它们时，它们将被重定向到以 Google url 为前缀的 url。当用户在 amp-viewer 中查看页面并使用动态类时，将设置 amp-viewer 类。
单击 amp 页面时，地址栏中显示的网址如下 −
https://www.google.co.in/amp/s/m.timesofindia.com/sports/cricket/india-in-australia/to-hell-with-the-nets-boys-need-rest-ravi-shastri/amp_articleshow/67022458.cms
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Dynamic Css Classes</title>
<link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body {
-webkit-animation:none;-moz-animation:none;
-ms-animation:none;animation:none
}
</style>
</noscript>
<script async custom-element = "amp-bind"
src = "https://cdn.ampproject.org/v0/amp-bind-0.1.js">
</script>
<script async custom-element = "amp-dynamic-css-classes"
src = "https://cdn.ampproject.org/v0/amp-dynamic-css-classes-0.1.js">
</script>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
<style amp-custom>
body:not(.amp-referrer-pinterest-com) .if-pinterest,
body:not(.amp-referrer-ampbyexample-com) .if-ampbyexample,
body:not(.amp-referrer-google-com) .if-google,
body:not(.amp-referrer-twitter-com) .if-twitter,
body:not(.amp-referrer-linkedin-com) .if-linkedin,
body:not(.amp-referrer-localhost) .if-localhost {
display: none;
}
body:not(.amp-viewer) .if-viewer,
body.amp-viewer .if-not-viewer {
display: none;
}
p {
padding: 1rem;
font-size:25px;
}
</style>
</head>
<body>
<h3>Google AMP - Dynamic Css Classes</h3>
<div>
<p class = "if-pinterest">You were referred here or embedded by Pinterest!</p>
<p class = "if-twitter">You were referred here or embedded by Twitter!</p>
<p class = "if-google">You were referred here or embedded by Google!</p>
<p class = "if-ampbyexample">You came here directly! Cool :)</p>
< class = "if-localhost">You came here directly! Cool :)</p>
</div>
<div>
<p class = "if-not-viewer">Hey! You are not coming from amp viewer</p>
<p class = "if-viewer">Hey! From amp viewer.</p>
<div>
</body>
</html>
输出
Google AMP - 操作和事件
要在 amp-component 上使用操作或事件，我们可以使用 on 属性。在本章中，我们将详细讨论它们。
事件
处理事件的语法如下 −
on = "eventName:elementId[.methodName[(arg1 = value, arg2 = value)]]"
传递给 on 属性的详细信息如下 −
eventName − 这将获取可用于 amp-component 的事件的名称。例如，对于表单，我们可以使用 submit-success、submit-error eventNames。
elementId −这将获取需要调用事件的元素的 ID。它可以是我们想要了解成功或错误的表单的 ID。
methodName − 这将获取事件发生时要调用的方法的名称。
arg=value −这将以 key=value 形式将参数传递给方法。
也可以将多个事件传递给 on 属性，如下所示 −
on = "submit-success:lightbox;submit-error:lightbox1"
如果有多个事件，则将它们传递给 on 属性并使用分号 (;) 分隔。
操作
操作基本上与 on 属性一起使用，语法如下 −
on = "tab:elementid.hide;"
我们可以传递多个操作，如下所示 −
on = "tab:elementid.open;tab:elementid.hide;"
Elementid 是要执行操作的元素的 ID。
Amp 有一些全局定义的事件和操作，可用于任何 amp 组件，它们是 tap 事件，操作是 hide、show 和 togglevisibility。
如果您想在任何 html 或 amp 组件上隐藏/显示或使用 togglevisibility，您可以使用 on="tap:elementid.[hide/show/togglevisibility]"
让我们看一些事件和操作的工作示例。
关于输入元素
让我们借助一个工作示例 − 更好地理解这一点
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Amp Bind</title>
<link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body {
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none
}
</style>
</noscript>
<script async custom-element = "amp-bind" src = "
https://cdn.ampproject.org/v0/amp-bind-0.1.js">
</script>
<script async custom-element = "amp-lightbox" src = "
https://cdn.ampproject.org/v0/amp-lightbox-0.1.js">
</script>
<style amp-custom>
button{
background-color: #ACAD5C;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: left;}
.lightbox {
background: rgba(211,211,211,0.8);
width: 100%;
height: 100%;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
#txtname{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
div {
font-size:25px;
}
</style>
</head>
<body>
<h3>Google AMP - Amp Bind</h3>
<button on = "tap:AMP.setState({displaylightbox: true})">
Click Here
</button>
<br/>
<br/>
<h3>AMP - Input Element</h3>
<input id = "txtname" placeholder = "Type here" on =
"input-throttled:AMP.setState({name: event.value})">
<div [text] = "name"></div>
</body>
</html>
输出
请注意，在上面的示例中，我们在输入字段上使用事件，如下所示 −
<input id = "txtname" placeholder = "Type here"
on = "input-throttled:AMP.setState({name: event.value})">
使用的事件是input-throlled。
我们也可以使用更改，如下所示 −
<input id = "txtname" placeholder = "Type here" on =
"change:AMP.setState({name: event.value})">
一旦用户离开输入框，就会显示输出。我们可以在输入类型(如单选按钮、复选框等)以及选择元素上使用更改事件。
<input id = "txtname" placeholder = "Type here" on =
"input-debounced:AMP.setState({name: event.value})">
事件 input-debounced 与 change 事件相同，但输出在用户输入后 300 毫秒后可见。
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Amp Bind</title>
<link rel = "canonical" href = " http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
<script async custom-element = "amp-bind"
src = "https://cdn.ampproject.org/v0/amp-bind-0.1.js">
</script>
<script async custom-element = "amp-lightbox"
src = "https://cdn.ampproject.org/v0/amp-lightbox-0.1.js">
</script>
<style amp-custom>
button{
background-color: #ACAD5C;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: left;
}
.lightbox {
background: rgba(211,211,211,0.8);
width: 100%;
height: 100%;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
#txtname{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
div {
font-size:25px;
}
</style>
</head>
<body>
<h3>Google AMP - Amp Bind</h3>
<button on = "tap:AMP.setState({displaylightbox: true})">
Click Here
</button>
<br/>
<br/>
<h3>AMP - Input Element</h3>
<input id = "txtname" placeholder = "Type here" on =
"input-debounced:AMP.setState({name: event.value})">
<div [text] = "name"></div>
</body>
</html>
输出
Amp 灯箱
在本节中，我们将在灯箱上测试以下事件 −
- lightboxOpen
- lightboxClose
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Amp Lightbox</title>
<link rel = "canonical" href = " http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
<script async custom-element = "amp-bind"
src = "https://cdn.ampproject.org/v0/amp-bind-0.1.js">
</script>
<script async custom-element = "amp-lightbox"
src = "https://cdn.ampproject.org/v0/amp-lightbox-0.1.js">
</script>
<style amp-custom>
amp-img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}
button {
background-color: #ACAD5C;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: left;
}
.lightbox {
background: rgba(211,211,211,0.8);
width: 100%;
height: 100%;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
p{font-size:30px;}
</style>
</head>
<body>
<h3>Google AMP - Amp Lightbox</h3>
<p [text] = "'Lightbox is ' + lightboxstatus + '.'">
Lightbox Event Testing
</p>
<button on = "tap:my-lightbox.open">
Show LightBox
</button>
<amp-lightbox id = "my-lightbox" layout = "nodisplay"
close-button on = "lightboxOpen:AMP.setState({lightboxstatus:'opened'});
lightboxClose:AMP.setState({lightboxstatus:'closed'});">
<div class = "lightbox">
<amp-img alt = "Beautiful Flower" src = "images/loreal.gif"
width = "246"
height = "205">
</amp-img>
</div>
</amp-lightbox>
</body>
</html>
输出
以下代码显示了如何在 lightbox 上实现打开和关闭事件 −
<p [text]="'Lightbox is ' + lightboxstatus + '.'">Lightbox Event Testing</p>
<button on = "tap:my-lightbox.open">Show LightBox</button>
<amp-lightbox id = "my-lightbox" layout = "nodisplay"
close-button on = "lightboxOpen:AMP.setState({lightboxstatus:'opened'});
lightboxClose:AMP.setState({lightboxstatus:'closed'});">
<div class = "lightbox">
<amp-img alt = "Beautiful Flower" src = "images/loreal.gif"
width = "246"
height = "205">
</amp-img>
</div>
</amp-lightbox>
Amp-Selector 上的事件
amp-selector 上可用的事件是 select。
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Amp Selector</title>
<link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body {
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none
}
</style>
</noscript>
<script async custom-element = "amp-bind"
src = "https://cdn.ampproject.org/v0/amp-bind-0.1.js">
</script>
<script async custom-element = "amp-selector"
src = "https://cdn.ampproject.org/v0/amp-selector-0.1.js">
</script>
<style amp-custom>
.radio-menu {
list-style: none;
}
.radio-menu [option][selected] {
outline: none;
}
.radio-menu [option] {
display: flex;
align-items: center;
}
.radio-menu [option]:before {
transition: background 0.25s ease-in-out;
content: "";
display: inline-block;
width: 24px;
height: 24px;
margin: 8px;
border-radius: 100%;
border: solid 1px black;
}
.radio-menu [option = red][selected]:before {
text-align: center;
content: "✓";
color: white;
background: red;
}
.radio-menu [option = green][selected]:before {
text-align: center;
content: "✓";
color: white;
background: green;
}
.radio-menu [option = blue][selected]:before {
text-align: center;
content: "✓";
color: white;
background: blue;
}
p{font-size:30px;}
</style>
</head>
<body>
<h3>Google AMP - Amp Selector</h3>
<p [text] = "'Color selected is ' + ampselectorstatus + '.'">
Amp Selector Event Testing
<p>
<amp-selector
class = "radio-menu"
layout = "container"
name = "my-selector"
on = "select:AMP.setState({ampselectorstatus:event.selectedOptions})">
<div option = "red">
Red
</div>
<div option = "green">
Green
</div>
<div option = "blue">
Blue
</div>
</amp-selector>
</body>
</html>
输出
事件选择的使用方法如下 −
<p [text]="'Color selected is ' + ampselectorstatus + '.'">
Amp Selector Event Testing
</p>
<amp-selector
class = "radio-menu"
layout ="container"
name =" my-selector"
on = "select:AMP.setState({ampselectorstatus:event.selectedOptions})">
<div option = "red">
Red
</div>
<div option = "green">
Green
</div>
<div option = "blue">
Blue
</div>
</amp-selector>
Amp-Sidebar 上的事件
可用的事件是 sidebarOpen 和 sidebarClose。
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Amp Sidebar</title>
<link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none
}
</style>
</noscript>
<script async custom-element = "amp-bind"
src = "https://cdn.ampproject.org/v0/amp-bind-0.1.js">
</script>
<script async custom-element = "amp-sidebar"
src = "https://cdn.ampproject.org/v0/amp-sidebar-0.1.js">
</script>
<style amp-custom>
amp-img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}
button{
background-color: #ACAD5C;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: left;
}
.amp-sidebar-toolbar-target-shown {
display: none;
}
p{font-size:30px;}
</style>
</head>
<body>
<h3>Google AMP - Amp Sidebar</h3>
<p [text] = "'Sidebar is ' + ampsidebarstatus + '.'">
Amp Sidebar Event Testing
</p>
<button on = "tap:sidebar1">
Show Sidebar
</button>
<amp-sidebar
id = "sidebar1"
layout = "nodisplay"
side = "right"
on = "sidebarOpen:AMP.setState({ampsidebarstatus: 'Opened'});
sidebarClose:AMP.setState({ampsidebarstatus: 'Closed'})">
<ul>
<li>Nav item 1</li>
<li>
<a href = "#idTwo" on = "tap:idTwo.scrollTo">Nav item 2</a>
</li>
<li>Nav item 3</li>
<li>
<a href = "#idFour" on="tap:idFour.scrollTo">Nav item 4</a>
</li>
<li>Nav item 5</li>
<li>Nav item 6</li>
</ul>
</amp-sidebar>
<div id = "target-element">
</div>
</body>
</html>
输出
事件使用如下 −
<p [text] = "'Sidebar is ' + ampsidebarstatus + '.'">
Amp Sidebar Event Testing
</p>
<button on = "tap:sidebar1">
Show Sidebar
</button>
<amp-sidebar
id = "sidebar1"
layout = "nodisplay"
side = "right"
on = "sidebarOpen:AMP.setState({ampsidebarstatus: 'Opened'});
sidebarClose:AMP.setState({ampsidebarstatus: 'Closed'})">
<ul>
<li>Nav item 1</li>
<li>
<a href = "#idTwo" on = "tap:idTwo.scrollTo">Nav item 2</a>
</li>
<li>Nav item 3</li>
<li>
<a href = "#idFour" on = "tap:idFour.scrollTo">Nav item 4</a>
</li>
<li>Nav item 5</li>
<li>Nav item 6</li>
</ul>
</amp-sidebar>
Google AMP - 动画
Amp-animation 是一个 amp 组件，它定义了要在其他 amp 组件上使用的动画。本章将详细讨论它们。
要使用 amp-animation，我们需要添加以下脚本 −
<script async custom-element = "amp-animation"
src = "https://cdn.ampproject.org/v0/amp-animation-0.1.js">
</script>
动画的细节在 json 结构中定义。
amp-animation 的基本结构如下所示 −
<amp-animation layout = "nodisplay">
<script type = "application/json">
{
// Timing properties
...
"animations": [
{
// animation 1
},
...
{
// animation n
}
]
}
</script>
</amp-animation>
animation 动画组件由以下 − 选择器、变量、时间属性、关键帧等组成。
{
"selector": "#target-id",
// Variables
// Timing properties
// Subtargets
...
"keyframes": []
}
selector 选择器
在这里我们需要给出将使用动画的元素的类或 ID。
变量
它们是定义为在关键帧内使用的值。变量使用 var() 定义。
示例
{
"--delay": "0.5s",
"animations": [
{
"selector": "#target1",
"delay": "var(--delay)",
"--x": "150px",
"--y" : "200px",
"keyframes": {
"transform": "translate(var(--x), var(--y, 0px)"
}
}
]
}
此处 delay、x 和 y 是变量，变量的值在所示示例中定义。
时间属性
您可以在此处定义动画的持续时间和延迟。以下是支持的计时属性 −
| 属性 | 值 | 说明 |
|---|---|---|
| duration | 时间属性。值必须以毫秒为单位。 | 动画使用的持续时间。 |
| delay | 时间属性。值必须以毫秒为单位。 | 动画开始执行前的延迟 |
| endDelay | 时间属性。值必须以毫秒或秒为单位。 | 动画完成时应用的给定延迟。 |
| iterations | 值必须为数字。 | 动画必须重复的次数。 |
| iterationStart | 值必须为数字。 | 效果开始动画的时间偏移量。 |
| easing | 值为字符串 | 用于获取动画的缓动效果。一些缓动的示例有 linear 、ease、ease-in、ease-out 、ease-in-out 等 |
| direction | 值是一个字符串 | "normal"、"reverse"、"alternate"或"alternate-reverse"之一。 |
| fill | 值是一个字符串 | 值可以是"none"、"forwards"、"backwards"、"both"、"auto"。 |
Keyframes
Keyframes 关键帧可以通过多种方式定义，例如对象形式或数组形式。请考虑以下示例。
示例
"keyframes": {"transform": "translate(100px,200px)"}
示例
{
"keyframes": {
"opacity": [1, 0],
"transform": ["scale(1)", "scale(2)"]
}
}
示例
{
"keyframes": [
{"opacity": 1, "transform": "scale(1)"},
{"opacity": 0, "transform": "scale(2)"}
]
}
示例
{
"keyframes": [
{"easing": "ease-out", "opacity": 1, "transform": "scale(1)"},
{"opacity": 0, "transform": "scale(2)"}
]
}
使用 CSS 的关键帧
<style amp-custom>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
margin: 0 auto;
transform:scale(3);
}
@keyframes example { 0% {transform:scale(3)}
75% {transform:scale(2)}
100% {transform:scale(1)}
}
</style>
<amp-animation layout = "nodisplay">
<script type = "application/json">
{
"duration": "4s",
"keyframes": "example"
}
</script>
</amp-animation>
有一些 CSS 属性可以在关键帧内使用。受支持的属性称为白名单属性。以下是可以在关键帧内使用的白名单属性 −
- opacity
- transform
- visibility
- 'offsetDistance'
注意 − 使用白名单属性以外的任何其他属性都会在控制台中抛出错误。
现在让我们通过一个简单的示例来了解，当在图像上应用动画时，该示例将旋转图像。在此示例中，我们使用 amp-animation 旋转图像。
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Amp Video</title>
<link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width, minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none
}
</style>
</noscript>
<script async custom-element = "amp-animation"
src =" https://cdn.ampproject.org/v0/amp-animation-0.1.js">
</script>
<style amp-custom>
amp-img {
border: 1px solid black;
border-radius: 4px;
padding: 5px;
}
</style>
</head>
<body>
<h3>Google AMP - Amp Animation Example</h3>
<amp-animation id = "anim1" layout = "nodisplay" trigger = "visibility">
<script type = "application/json">
{
"duration": "1s",
"fill": "both",
"direction": "alternate",
"animations": [
{
"selector": "#image1",
"easing": "cubic-bezier(0,0,.21,1)",
"keyframes": {
"transform": "rotate(20deg)"
}
}
]
}
</script>
</amp-animation>
<br/>
<br/>
<amp-img
id = "image1"
src = "images/christmas1.jpg"
width = 300
height = 250
layout = "responsive">
</amp-img>
<br/>
</body>
</html>
输出
上面使用的 amp-animation 细节在下面显示的代码中给出 −
<amp-animation id = "anim1" layout = "nodisplay" trigger = "visibility">
<script type = "application/json">
{
"duration": "1s",
"fill": "both",
"direction": "alternate",
"animations": [
{
"selector": "#image1",
"easing": "cubic-bezier(0,0,.21,1)",
"keyframes": {
"transform": "rotate(20deg)"
}
}
]
}
</script>
</amp-animation>
此处的选择器是应用旋转动画的图像的 id −
<amp-img id = "image1" src = "images/christmas1.jpg" width = 300 height = 250 layout = "responsive"> </amp-img>
使用 CSS 中的关键帧的示例
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Amp Video</title>
<link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none
}
</style>
</noscript>
<script async custom-element = "amp-animation"
src = "https://cdn.ampproject.org/v0/amp-animation-0.1.js">
</script>
<style amp-custom>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
margin: 0 auto;
transform:scale(3);
}
@keyframes example {
0% {transform:scale(3)}
75% {transform:scale(2)}
100% {transform:scale(1)}
}
</style>
</head>
<body>
<h3>Google AMP - Amp Animation Example</h3>
<amp-animation id = "anim1" layout = "nodisplay" trigger = "visibility">
<script type = "application/json">
{
"duration": "3s",
"fill": "both",
"direction": "alternate",
"animations": [{
"selector": "#image1",
"easing": "cubic-bezier(0,0,.21,1)",
"keyframes":"example"
}]
}
</script>
</amp-animation>
<br/>
<br/>
<div id = "image1"></div>
<br/>
</body>
</html>
输出
动画触发器
如果触发器 = "visibility"，则默认应用动画。为了在事件上启动动画，我们必须删除触发器 = "visibility"，并添加事件以启动动画，如下例所示 −
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Amp Video</title>
<link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
<script async custom-element = "amp-animation"
src = "https://cdn.ampproject.org/v0/amp-animation-0.1.js">
</script>
<style amp-custom>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
margin: 0 auto;
transform:scale(2);
}
@keyframes example {
0% {transform:scale(2)}
75% {transform:scale(1)}
100% {transform:scale(0.5)}
}
button{
background-color: #ACAD5C;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: left;
}
</style>
</head>
<body>
<h3>Google AMP - Amp Animation Example</h3>
<amp-animation id = "anim1" layout = "nodisplay">
<script type = "application/json">
{
"duration": "3s",
"fill": "both",
"direction": "alternate",
"animations": [{
"selector": "#image1",
"easing": "cubic-bezier(0,0,.21,1)",
"keyframes":"example"
}]
}
</script>
</amp-animation>
<button on = "tap:anim1.start">Start</button>
<br/>
<br/>
<div id = "image1"></div>
</body>
</html>
请注意，点击开始按钮时动画将开始。
输出
我们在 On 上使用名为 start 的操作来启动动画。同样，还支持其他操作，如下所示 −
- start
- pause
- restart
- resume
- togglePause
- seekTo
- reverse
- finish
- cancel
让我们看一个可以使用该操作的工作示例。
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Amp Video</title>
<link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width=device-width,minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
<script async custom-element = "amp-animation"
src = "https://cdn.ampproject.org/v0/amp-animation-0.1.js">
</script>
<style amp-custom>
#image1 {
width: 100px;
height: 100px;
background-color: red;
position: relative;
margin: 0 auto;
transform:scale(2);
}
@keyframes example {
0% {transform:scale(2)}
75% {transform:scale(1)}
100% {transform:scale(0.5)}
}
button1{
background-color: #ACAD5C;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: left;
}
</style>
</head>
<body>
<h3>Google AMP - Amp Animation Example</h3>
<amp-animation id = "anim1" layout = "nodisplay">
<script type = "application/json">
{
"duration": "3s",
"fill": "both",
"direction": "alternate",
"animations": [{
"selector": "#image1",
"easing": "cubic-bezier(0,0,.21,1)",
"keyframes":"example"
}]
}
</script>
</amp-animation>
<button on = "tap:anim1.start">Start</button>
<button on = "tap:anim1.pause">Pause</button>
<button on = "tap:anim1.resume">Resume</button>
<button on = "tap:anim1.reverse">Reverse</button>
<button on = "tap:anim1.cancel">cancel</button>
<button on = "tap:anim1.finish">finish</button>
<button on = "tap:anim1.togglePause">togglePause</button>
<button on = "tap:anim1.seekTo(percent = 1.00)">seekTo(100%)</button>
<br/>
<br/>
<br/>
<br/>
<div id="image1"></div>
</body>
</html>
输出
Google AMP - 数据绑定
Amp-bind 有助于使用数据绑定和类似 JS 的表达式，根据操作为 amp-components 和 html 标记添加交互性。本章详细讨论了数据绑定。
要使用 amp-bind，我们需要将以下脚本添加到我们的页面 −
<script async custom-element = "amp-bind"
src = "https://cdn.ampproject.org/v0/amp-bind-0.1.js">
</script>
让我们借助如下所示的工作示例充分理解这一点 −
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Amp Bind</title>
<link rel = "canonical" href =
"http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none
}
</style>
</noscript>
<script async custom-element = "amp-bind"
src = "https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<style amp-custom>
button{
background-color: #ACAD5C;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
}
</style>
</head>
<body>
<h3>Google AMP - Amp Bind</h3>
<p [text] = "'Hello ' + world + '.'">
Click on the button to change the text
</p>
<button on = "tap:AMP.setState({world: 'This is amp-bind example'})">
Click Here
</button>
</body>
</html>
输出
单击按钮可查看如下所示的文本变化 −
因此，在上面的示例中，我们使用 amp-bind 在单击按钮时更改文本。
Amp-bind 有三个组件 −
状态 − 最初状态为空。单击按钮后，状态就会改变。例如，
<button on = "tap:AMP.setState({world: 'This is amp-bind example'})">
Click Here
</button>
AMP.setState 方法用于更改状态。变量 world 被赋予值 This is amp-bind example。变量 world 在 html 标记内使用 −
<p [text] = "'Hello ' + world + '.'"> Click on the button to change the text </p>
点击按钮后，world 会被分配一个新值:这是 amp-bind 示例。
我们还可以使用 amp-state 进行绑定，如下所示 −
<amp-state id = "myState">
<script type = "application/json">
{
"foo": "bar"
}
</script>
</amp-state>
表达式将在绑定期间被赋值 bmyState.foo。
表达式 − amp-bind 工作的表达式如下所示 −
'Hello ' + world
world 被称为 状态变量。
绑定 − 绑定应用于 [attributes] 形式的特殊属性。例如 −
<p [text] = "'Hello ' + world + '.'"> Click on the button to change the text </p>
在上面的例子中，[text] 具有用于绑定 p 标签的表达式。
我们可以使用以下属性进行绑定 −
- [text]
- [class]
- [hidden]
- [width]
- [height]
也可以在 amp-components 上进行绑定，并且只允许使用特定属性。以下列表显示了这些组件和属性 −
| Sr.No | Amp 组件 | 属性 &说明 |
|---|---|---|
| 1 | <amp-carousel type=slides> | [slide]*
使用此绑定行为更改幻灯片 |
| 2 | <amp-date-picker> | [min]
min -> 设置最早可选日期 [max]max -> 设置最晚可选日期 |
| 3 | <amp-iframe> | [src]
更改 iframe 的 src |
| 4 | <amp-img> | [alt]
[attribution]
[src]
[srcset]
我们可以更改 alt、attribution、src 和 srcset。如果 src 发生更改，请更改 srcset，因为它用于缓存 |
| 5 | <amp-lightbox> | [open]*
您可以通过以下方式显示/隐藏灯箱绑定到 open |
| 6 | <amp-list> | [src]
如果表达式是字符串，则从字符串 URL 中获取并呈现 JSON。如果表达式是对象或数组，则呈现表达式数据。 |
| 7 | <amp-selector> | [selected]*
[disabled]
更改由其 option 属性值标识的当前选定的子元素。支持以逗号分隔的值列表以供多选 |
使用 Amp-State 进行绑定
我们可以用我们想要在 html 元素或 amp-component 上使用的所有数据来定义 amp-state。
amp-state 中使用的数据必须采用 json 格式，如下所示 −
<amp-state id = "myCarsList">
<script type = "application/json">
{
"currentcar" : "bmw",
"audi": {
"imageUrl": "images/audi.jpg"
},
"bmw": {
"imageUrl": "images/bmw.jpg"
}
}
</script>
</amp-state>
因此，我们定义了汽车名称和汽车所用图像的键值对。
文本和 Amp-Image 上的 Amp-bind
下面显示了使用 amp-state 和 amp-bind 的工作示例 −
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Amp Bind</title>
<link rel = "canonical" href =
"http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}
}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none
}
</style>
</noscript>
<script async custom-element = "amp-bind" src =
"https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<style amp-custom>
button{
background-color: #ACAD5C;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: left;
}
</style>
</head>
<body>
<h3>Google AMP - Amp Bind</h3>
<amp-state id = "myCarsList">
<script type = "application/json">
{
"currentcar" : "bmw",
"audi": {
"imageUrl": "images/audi.jpg",
"style": "greenBackground"
},
"bmw": {
"imageUrl": "images/bmw.jpg",
"style": "redBackground"
}
}
</script>
</amp-state>
<amp-img
width = "300"
height = "200"
src = "images/bmw.jpg"
[src] = "myCarsList[currentcar].imageUrl">
</amp-img>
<p [text] = "'This is a ' + currentcar + '.'">
This is a BMW.
</p>
<br/>
<button on = "tap:AMP.setState({currentcar: 'audi'})">
Change Car
</button>
</body>
</html>
输出
点击按钮可查看汽车图像的变化以及下方的文本。
Video 和 IFrame 上的 Amp-bind
我们现在将看到一个将更改 amp-iframe 和 amp-video src 的工作示例。
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Amp Bind</title>
<link rel = "canonical" href =
"http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none
}
</style>
</noscript>
<script async custom-element = "amp-bind" src =
"https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<script async custom-element = "amp-video" src =
"https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
<script async custom-element = "amp-iframe" src =
"https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
<style amp-custom>
button{
background-color: #ACAD5C;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: left;
}
</style>
</head>
<body>
<h3>Google AMP - Amp Bind</h3>
<button on = "tap:AMP.setState({currentlist: 'list1'})">
Click Here
</button>
<br/>
<br/>
<amp-state id = "myList">
<script type = "application/json">
{
"currentlist" : "",
"list1": {
"url": "video/m.mp4",
"style": "greenBackground",
"iframeurl":"https://maps.google.com/maps?q=hyderabad&t=&z=13&ie=UTF8&iwloc=&output=embed"
}
}
</script>
</amp-state>
<h3>AMP - IFRAME</h3>
<amp-iframe
width = "600"
title = "Google map"
height = "400"
layout = "responsive"
sandbox = "allow-scripts allow-same-origin allow-popups"
frameborder = "0"
src = "https://maps.google.com/maps?q=telangana&t=&z=13&ie=UTF8&iwloc=&output=embed"
[src] = "myList[currentlist].iframeurl">
<amp-img
layout = "fill"
src = "images/loading.jpg"
placeholder
>
/amp-img>
</amp-iframe>
<h3>AMP - VIDEO</h3>
<amp-video
id = "amp-video"
src = "video/samplevideo.mp4"
layout="responsive"
[src] = "myList[currentlist].url"
width = "300"
height = "170" autoplay controls>
</amp-video>
</body>
</html>
Note that here we have used amp-state with iframesrc and video src.
<amp-state id = "myList">
<script type = "application/json">
{
"currentlist" : "",
"list1": {
"url": "video/m.mp4",
"style": "greenBackground",
"iframeurl":"
https://maps.google.com/maps?q=hyderabad&t=&z=13&ie=UTF8&iwloc=&output=embed"
}
}
</script>
</amp-state>
currentlist 设置为空，点击按钮后，它将设置为 list1。currentlist 变量用于 iframe 和视频的 src，如下所示 −
<amp-iframe width="600"
title = "Google map"
height = "400"
layout = "responsive"
sandbox = "allow-scripts allow-same-origin allow-popups"
frameborder = "0" src = "https://maps.google.com/maps?q=telangana&t=&z=13&ie=UTF8&iwloc=&output=embed"
[src] = "myList[currentlist].iframeurl">
<amp-img layout = "fill" src = "images/loading.jpg" placeholder>
</amp-img>
</amp-iframe>
<amp-video id = "amp-video" src = "video/samplevideo.mp4"
layout = "responsive" [src] = "myList[currentlist].url" width = "300"
height = "170" autoplay controls>
</amp-video>
输出
点击按钮查看视频和 iframe src 的变化。
Amp-bind 与 amp-lightbox
现在，让我们看看 binding 和 amp-lightbox 一起使用时的工作原理。
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Amp Bind</title>
<link rel = "canonical" href =
"http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none
}
</style>
</noscript>
<script async custom-element = "amp-bind" src =
"https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<script async custom-element = "amp-lightbox" src =
"https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
<style amp-custom>
button{
background-color: #ACAD5C;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: left;
}
.lightbox {
background: rgba(211,211,211,0.8);
width: 100%;
height: 100%;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<h3>Google AMP - Amp Bind</h3>
<button on = "tap:AMP.setState({displaylightbox: true})">
Click Here
</button>
<br/>
<br/>
<h3>AMP - Lightbox</h3>
<amp-lightbox
id = "my-lightbox"
[open] = "displaylightbox"
layout = "nodisplay"
close-button>
<div class = "lightbox" on = "tap:AMP.setState({displaylightbox: false})">
<amp-img alt = "Beautiful Flower"
src = "images/loreal.gif"
width = "246"
height = "205">
</amp-img>
</div>
</amp-lightbox>
</body>
</html>
要在 amp-lightbox 上使用绑定，我们在 amp-lightbox 上使用 [open]，如下所示 −
<amp-lightbox id = "my-lightbox" [open] = "displaylightbox"
layout = "nodisplay" close-button>
<div class = "lightbox" on="tap:AMP.setState({displaylightbox: false})">
<amp-img alt = "Beautiful Flower"
src = "images/loreal.gif"
width = "246"
height = "205">
</amp-img>
</div>
</amp-lightbox>
[open] = "displaylightbox" 是一个变量状态，单击按钮和点击灯箱 div 时会更改为 true/false −
<button on = "tap:AMP.setState({displaylightbox: true})">
Click Here
</button>
<div class = "lightbox" on = "tap:AMP.setState({displaylightbox: false})">
<amp-img alt = "Beautiful Flower"
src = "images/loreal.gif"
width = "246"
height = "205">
</amp-img>
</div>
输出
Amp 绑定到输入元素
让我们借助如图所示的工作示例了解 amp 绑定到输入元素的工作原理 −
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Amp Bind</title>
<link rel = "canonical" href=
"http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none
}
</style>
<noscript>
<script async custom-element = "amp-bind"
src = "https://cdn.ampproject.org/v0/amp-bind-0.1.js">
<script>
<script async custom-element = "amp-lightbox"
src = "https://cdn.ampproject.org/v0/amp-lightbox-0.1.js">
</script>
<style amp-custom>
button{
background-color: #ACAD5C;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: left;
}
.lightbox {
background: rgba(211,211,211,0.8);
width: 100%;
height: 100%;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
#txtname{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
div {
font-size:25px;
}
</style>
</head>
<body>
<h3>Google AMP - Amp Bind</h3>
<button on = "tap:AMP.setState({displaylightbox: true})">
Click Here
</button>
<br/>
<br/>
<h3>
AMP - Input Element
<h3>
<input id = "txtname" placeholder = "Type here"
on = "input-throttled:AMP.setState({name: event.value})">
<div [text] = "name">
</div>
</body>
</html>
输出
文本框内输入的数据显示在底部。可以通过更改输入事件上的状态变量 name 来实现，如图所示 −
<input id = "txtname" placeholder = "Type here" on =
"input-throttled:AMP.setState({name: event.value})">
<div [text] = "name">
</div>
Google AMP - 布局
AMP-Layout 是 Google-amp 中的重要功能之一。Amp Layout 可确保页面加载时正确呈现 amp 组件，而不会引起任何闪烁或滚动问题。 Google AMP 确保在任何其他远程资源(如图像的 http 请求、数据调用)之前在页面上完成布局渲染。
布局属性列表如下。
width 和 height
layout
sizes
heights
media
placeholder
fallback
noloading
我们将在本章中详细考虑 layout 属性。其余属性将在 − 章中详细讨论。本教程的 Google AMP – 属性。
布局属性
我们可以在 amp-component 上使用布局属性，该属性将决定组件在页面内的呈现方式。amp 支持的布局列表如下 −
Not Present
Container
fill
fixed
fixed-height
flex-item
intrinsic
nodisplay
Responsive
对于每个布局，我们将看到一个工作示例，该示例将展示布局属性如何以不同的方式呈现 amp-component。我们将在示例中使用 amp-img 组件。
不存在的示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Image</title>
<link rel = "canonical" href =
"http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none
}
</style>
</noscript>
<style amp-custom>
amp-img {
border: 1px solid black;
border-radius: 4px;
padding: 5px;
}
</style>
</head>
<body>
<h1>Google AMP - Image Example</h1>
<amp-img
alt = "Beautiful
Flower"src = "images/flower.jpg"
width = "246"
height = "205">
</amp-img>
</body>
</html>
输出
容器示例
Layout="container" 主要提供给父元素，子元素采用定义的大小。
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Image</title>
<link rel = "canonical" href =
"http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none
}
</style>
</noscript>
<style amp-custom>
amp-img {
border: 1px solid black;
border-radius: 4px;
padding: 5px;
}
h1{
font-family: "Segoe UI",Arial,sans-serif;
font-weight: 400;margin: 10px 0;
}
</style>
</head>
<body>
<h1>Google AMP - Layout = container Image Example</h1>
<amp-accordion layout = "container">
<amp-img alt = "Beautiful Flower"
src = "images/flower.jpg"
width = "246"
height = "205">
</amp-img>
</amp-accordion>
</body>
</html>
输出
填充示例
Layout= "fill" 采用父元素的宽度和高度。
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>
Google AMP - Image
<title>
<link rel = "canonical" href =
"http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none
}
</style>
</noscript>
<style amp-custom>
amp-img {
border: 1px solid black;
border-radius: 4px;
padding: 5px;
}
h1{font-family: "Segoe UI",Arial,sans-serif;
font-weight: 400;margin: 10px 0;}
</style>
</head>
<body>
<h1>Google AMP - Layout = fill Image Example</h1>
<div style = "position:relative;width:100px;height:100px;">
<amp-img alt = "Beautiful Flower"
src = "images/flower.jpg"
width = "246"
height = "205"
layout = "fill">
</amp-img>
</div>
</body>
</html>
输出
固定和固定高度示例
在了解固定和固定高度的用法之前，请注意以下两点 −
layout="fixed" 需要有宽度和高度，amp-component 将显示在其中。
layout="fixed-height" 需要为组件指定高度。它将确保高度不会改变。使用固定高度时不得指定宽度，否则可以是自动的。
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Image</title>
<link rel = "canonical" href =
"http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none
}
</style>
</noscript>
<style amp-custom>
amp-img {
border: 1px solid black;
border-radius: 4px;
padding: 5px;
}
div{
display: inline-block;
width: 200px;
height:200px;
margin: 5px;
}
h1{font-family: "Segoe UI",Arial,sans-serif;
font-weight: 400;margin: 10px 0;}
</style>
</head>
<body>
<h1>Google AMP - Layout = fixed and
Layout = fixed-height Image Example
</h1>
<div>
<amp-img alt = "Beautiful Flower"
src = "images/flower.jpg"
width = "246"
height = "205"
layout = "fixed">
</amp-img>
</div>
<div>
<amp-img alt = "Beautiful Flower"
src = "images/flower.jpg"
height = "205"
layout = "fixed-height">
</amp-img>
</div>
</body>
</html>
输出
弹性项目和内在
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src ="https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Image</title>
<link rel = "canonical" href ="
http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible
<style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none
}
</style>
</noscript>
<style amp-custom>
amp-img {
border: 1px solid black;
border-radius: 4px;
padding: 5px;
}
displayitem {
display: inline-block;
width: 200px;
height:200px;
margin: 5px;
}
h1{font-family: "Segoe UI",Arial,sans-serif;
font-weight: 400;margin: 10px 0;}
</style>
</head>
<body>
<h1>Google AMP - Layout = flex-item and
Layout = intrinsic Image Example
</h1>
<div class = "displayitem">
<amp-img alt = "Beautiful Flower"
src = "images/flower.jpg"
layout = "flex-item">
</amp-img>
</div>
<div class = "displayitem">
<amp-img alt = "Beautiful Flower"
src = "images/flower.jpg"
width = "246"
height = "205"
layout = "intrinsic">
</amp-img>
</div>
</body>
</html>
输出
nodisplay 和 responsive
layout = nodisplay 的 Amp 组件不会占用页面上的任何空间，就像 display:none 一样。无需向此类布局添加任何 width 和 height 属性。
layout = responsive 的 Amp 组件将占用页面的可用空间或宽度，高度会调整大小以保持元素的纵横比。
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js">
</script>
<title>Google AMP - Image</title>
<link rel = "canonical" href =
"http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content="width=device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
<style amp-custom>
amp-img {
border: 1px solid black;
border-radius: 4px;
padding: 5px;
}
displayitem {
display: inline-block;
width: 200px;
height:200px;
margin: 5px;
}
h1{font-family: "Segoe UI",Arial,sans-serif;
font-weight: 400;margin: 10px 0;}
</style>
</head>
<body>
<h1>Google AMP - Layout=no-display and
Layout = responsive Image Example</h1>
<div class = "displayitem">
<amp-img alt = "Beautiful Flower"
src = "images/flower.jpg"
layout = "no-display">
</amp-img>
</div>
<div class = "displayitem">
<amp-img alt = "Beautiful Flower"
src = "images/flower.jpg"
width = "246"
height = "205"
layout = "responsive">
</amp-img>
</div>
</body>
</html>
输出
Google AMP 支持的布局列表如下
手风琴
轮播
灯箱
滑块
侧边栏
Amp- 手风琴
Amp-accordion 是一个 amp 组件，用于以展开-折叠格式显示内容。用户可以轻松地在移动设备上查看它，他们可以从手风琴中选择他们喜欢的部分。
要使用 amp-accordion，您需要添加以下脚本 −
<script async custom-element = "amp-accordion" src = "https://cdn.ampproject.org/v0/amp-accordion-0.1.js"> </script>
Amp-accordion 标签
<amp-accordion>
<section class = "seca">
<h3>Content 1</h3>
<div>
<p>Content 1 is opened for amp-accordion</p>
<p>Content 1 is opened for amp-accordion</p>
<p>Content 1 is opened for amp-accordion</p>
<p>Content 1 is opened for amp-accordion</p>
<p>Content 1 is opened for amp-accordion</p>
<p>Content 1 is opened for amp-accordion</p>
</div>
</section>
…
</amp-accordion>
让我们看一个 amp-accordion 的工作示例。
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js">
</script>
<title>Google AMP - Amp Accordion </title>
<link rel = "canonical" href=
"http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
<script async custom-element = "amp-accordion" src =
"https://cdn.ampproject.org/v0/amp-accordion-0.1.js">
</script>
<style>
input[type = text]{
width: 50%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
font-family: "Segoe UI",Arial,sans-serif;
font-weight: 400;
}
.col-label {
float: left;
width: 25%;
margin-top: 6px;
}
.col-content {
float: left;
width: 75%;
margin-top: 6px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.amp_example {
background-color: #f1f1f1;
padding: 0.01em 16px;
margin: 20px 0;
box-shadow: 0 2px 4px 0
rgba(0,0,0,0.16),0 2px 10px 0
rgba(0,0,0,0.12)!important;
}
h3{
font-family: "Segoe UI",Arial,sans-serif;
font-weight: 400;margin: 10px 0;
}
input[type=submit] {
background-color: #ACAD5C;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
.lightbox {background-color: rgba(100, 100, 100, 0.5);}
.seca {background-color:#fff;}
</style>
</head>
<body>
<div class = "amp_example">
<h3>Google AMP - Amp Accordion</h3>
<amp-accordion>
<section class = "seca">
<h3>Content 1</h3>
<div>
<p>Content 1 is opened for amp-accordion</p>
<p>Content 1 is opened for amp-accordion</p>
<p>Content 1 is opened for amp-accordion</p>
<p>Content 1 is opened for amp-accordion</p>
<p>Content 1 is opened for amp-accordion</p>
<p>Content 1 is opened for amp-accordion</p>
</div>
</section>
<section expanded class = "seca">
<h3>Content 2</h3>
<div>
<p>Content 2 is opened for amp-accordion</p>
<p>Content 2 is opened for amp-accordion</p>
<p>Content 2 is opened for amp-accordion</p>
<p>Content 2 is opened for amp-accordion</p>
<p>Content 2 is opened for amp-accordion</p>
</div>
</section>
<section class="seca">
<h3>Content 3</h3>
<div>
<p>Content 3 is opened for amp-accordion</p>
<p>Content 3 is opened for amp-accordion</p>
<p>Content 3 is opened for amp-accordion</p>
<p>Content 3 is opened for amp-accordion</p>
<p>Content 3 is opened for amp-accordion</p>
</div>
</section>
</amp-accordion>
</div>
</body>
</html>
输出
Amp-accordion 内部包含部分。每个部分可以有 2 个子部分，如果超过 2 个子部分，浏览器控制台中将显示错误。您可以在部分中添加容器，其中可以包含多个元素。
默认情况下，我们使用扩展到部分的属性将一个部分保持在扩展模式。
自动折叠手风琴
对于自动折叠，我们在 amp-accordion 上使用属性 expand-single-section，如示例所示。用户打开的部分将仅保持扩展状态，其他部分将使用 expand-single-section 属性关闭。
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js">
</script>
<title>Google AMP - Amp Accordion </title>
<link rel = "canonical" href=
"http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
<script async custom-element = "amp-accordion" src =
"https://cdn.ampproject.org/v0/amp-accordion-0.1.js">
</script>
<style>
input[type = text]{
width: 50%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
font-family: "Segoe UI",Arial,sans-serif;
font-weight: 400;
}
.col-label {
float: left;
width: 25%;
margin-top: 6px;
}
.col-content {
float: left;
width: 75%;
margin-top: 6px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.amp_example {
background-color: #f1f1f1;
padding: 0.01em 16px;
margin: 20px 0;
box-shadow: 0 2px 4px 0
rgba(0,0,0,0.16),0 2px 10px 0
rgba(0,0,0,0.12)!important;
}
h3{
font-family: "Segoe UI",Arial,sans-serif;
font-weight: 400;
margin: 10px 0;
}
input[type=submit] {
background-color: #ACAD5C;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;}
.lightbox {background-color: rgba(100, 100, 100, 0.5);}
.seca {background-color:#fff;}
</style>
<head>
<body>
<div class = "amp_example">
<h3>Google AMP - Amp Accordion</h3>
<amp-accordion expand-single-section>
<section class = "seca">
<h3>Content 1</h3>
<div>
<p>Content 1 is opened for amp-accordion</p>
<p>Content 1 is opened for amp-accordion</p>
<p>Content 1 is opened for amp-accordion</p>
<p>Content 1 is opened for amp-accordion</p>
<p>Content 1 is opened for amp-accordion</p>
<p>Content 1 is opened for amp-accordion</p>
</div>
</section>
<section class = "seca">
<h3>Content 2</h3>
<div>
<p>Content 2 is opened for amp-accordion</p>
<p>Content 2 is opened for amp-accordion</p>
<p>Content 2 is opened for amp-accordion</p>
<p>Content 2 is opened for amp-accordion</p>
<;p>Content 2 is opened for amp-accordion</p>
</div>
</section>
<section class = "seca">
<h3>Content 3</h3>
<div>
<p>Content 3 is opened for amp-accordion</p>
<p>Content 3 is opened for amp-accordion</p>
<p>Content 3 is opened for amp-accordion</p>
<p>Content 3 is opened for amp-accordion</p>
<p>Content 3 is opened for amp-accordion</p>
</div>
</section>
</amp-accordion>
</div>
</body>
</html>
输出
手风琴上的动画
使用 animate 属性，我们可以为手风琴的展开-折叠添加动画。请查看下面的示例 −
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js">
</script>
<title>Google AMP - Amp Accordion </title>
<link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html>
<meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;animation:none
}
</style>
</noscript>
<script async custom-element = "amp-accordion" src =
"https://cdn.ampproject.org/v0/amp-accordion-0.1.js">
</script>
<style>
input[type = text]{
width: 50%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
font-family: "Segoe UI",Arial,sans-serif;
font-weight: 400;
}
.col-label {
float: left;
width: 25%;
margin-top: 6px;
}
.col-content {
float: left;
width: 75%;
margin-top: 6px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.amp_example {
background-color: #f1f1f1;
padding: 0.01em 16px;
margin: 20px 0;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),
0 2px 10px 0 rgba(0,0,0,0.12)!important;
}
h3{
font-family: "Segoe UI",Arial,sans-serif;
font-weight: 400;margin: 10px 0;
}
input[type=submit] {
background-color: #ACAD5C;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
.lightbox {background-color: rgba(100, 100, 100, 0.5);}
.seca {background-color:#fff;}
</style>
</head>
<body>
<div class = "amp_example">
<h3>Google AMP - Amp Accordion</h3>
<amp-accordion animate expand-single-section>
<section class = "seca">
<h3>Content 1</h3>
<div>
<p>Content 1 is opened for amp-accordion</p>
<p>Content 1 is opened for amp-accordion</p>
<p>Content 1 is opened for amp-accordion</p>
<p>Content 1 is opened for amp-accordion</p>
<p>Content 1 is opened for amp-accordion</p>
<p>Content 1 is opened for amp-accordion</p>
</div>
</section>
<section class = "seca">
<h3>Content 2</h3>
<div>
<p>Content 2 is opened for amp-accordion</p>
<p>Content 2 is opened for amp-accordion</p>
<p>Content 2 is opened for amp-accordion</p>
<p>Content 2 is opened for amp-accordion</p>
<p>Content 2 is opened for amp-accordion</p>
</div>
</section>
<section class="seca">
<h3>Content 3</h3>
<div>
<p>Content 3 is opened for amp-accordion</p>
<p>Content 3 is opened for amp-accordion</p>
<p>Content 3 is opened for amp-accordion</p>
<p>Content 3 is opened for amp-accordion</p>
<p>Content 3 is opened for amp-accordion</p>
</div>
</section>
</amp-accordion>
</div>
</body>
</html>
输出
AMP Carousel
Amp-carousel 是一个 amp-component，用于在屏幕上显示一组类似的内容，并使用箭头在内容之间切换。
要使用 amp-carousel，我们需要添加以下脚本 −
<script async custom-element = "amp-carousel" src = "https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
Amp-carousel 标签
amp-carousel 标签如下所示 −
<amp-carousel height="300" layout="fixed-height" type="carousel">
<amp-img src="images/christmas1.jpg" width="400" height="300" alt="a sample image"></amp-img>
….
</amp-carousel>
amp-carousel 可用的属性
amp-carousel 可用的属性列于下表 −
| Sr.No | 属性 &描述 |
|---|---|
| 1 | type
我们可以将轮播项目显示为轮播和幻灯片 |
| 2 | height
轮播的高度(以像素为单位) |
| 3 | controls (可选)
它在屏幕上显示左/右箭头。它在设备上几秒钟后消失。可以使用 CSS 使箭头始终可见。 |
| 4 | data-next-button-aria-label (可选)
用于设置下一个轮播的标签。 |
| 5 | data-prev-button-aria-label(可选)
用于设置上一个轮播的标签。 |
| 6 | autoplay(可选)
用于在 5000 毫秒后显示下一张幻灯片。可以使用 amp-carousel 上的延迟属性(不带毫秒)覆盖它。它将为轮播添加循环属性，幻灯片将在到达末尾后再次播放。仅适用于 type=slides，并且至少需要 2 张幻灯片才能自动播放。 |
现在，让我们通过示例来以不同方式显示轮播。
Amp 轮播类型为轮播
使用轮播类型，项目可水平滚动。
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<title>amp-carousel</title>
<script async src = "https://cdn.ampproject.org/v0.js">
</script>
<!-- ## Setup -->
<!-- Import the carousel component in the header. -->
<script async custom-element = "amp-carousel" src =
"https://cdn.ampproject.org/v0/amp-carousel-0.1.js">
</script>
<link rel = "canonical" href="
https://ampbyexample.com/components/amp-carousel/">
<meta name = "viewport" content = "width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none
}
</style>
</noscript>
<style amp-custom>
h3{
font-family: "Segoe UI",Arial,sans-serif;
font-weight: 400;
margin: 10px 0;
}
</style>
</head>
<body>
<h3>Google Amp-Carousel</h3>
<amp-carousel height = "300" layout = "fixed-height" type = "carousel">
<amp-img
src = "images/christmas1.jpg"
width = "400"
height = "300"
alt = "a sample image">
</amp-img>
<amp-img src = "images/christmas2.jpg"
width = "400"
height = "300"
alt = "another sample image">
</amp-img>
<amp-img
src = "images/christmas3.jpg"
width = "400"
height = "300"
alt = "and another sample image">
</amp-img>
</amp-carousel>
</body>
</html>
Output
Amp Carousel 类型为幻灯片
Amp 轮播 type = "slides" 每次显示单个项目。您可以使用以下作为布局 fill, fixed, fixed-height, flex-item, nodisplay, responsive。
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<title>amp-carousel</title>
<script async src = "https://cdn.ampproject.org/v0.js">
</script>
<!-- ## Setup -->
<!-- Import the carousel component in the header. -->
<script async custom-element = "amp-carousel" src =
"https://cdn.ampproject.org/v0/amp-carousel-0.1.js">
</script>
<link rel = "canonical" href=
"https://ampbyexample.com/components/amp-carousel/">
<meta name = "viewport" content = "width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
<style amp-custom>
h3{
font-family: "Segoe UI",Arial,sans-serif;
font-weight: 400;margin: 10px 0;}
</style>
</head>
<body>
<h3>Google Amp-Carousel</h3>
<amp-carousel
width = "400"
height = "300"
layout = "responsive"
type = "slides">
<amp-img
src = "images/christmas1.jpg"
width = "400"
height = "300"
layout = "responsive"
alt = "a sample image">
</amp-img>
<amp-img
src = "images/christmas2.jpg"
width = "400"
height = "300"
layout = "responsive"
alt="another sample image">
</amp-img>
<amp-img
src = "images/christmas3.jpg"
width = "400"
height = "300"
layout = "responsive"
alt = "and another sample image">
</amp-img>
</amp-carousel>
</body>
</html>
输出
使用自动播放的 Amp 轮播
在下面给出的示例中，我们添加了延迟为 2000 毫秒(2 秒)的自动播放属性。这将在延迟 2 秒后更改幻灯片。默认情况下，延迟为 5000 毫秒(5 秒)。
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<title>amp-carousel</title>
<script async src = "https://cdn.ampproject.org/v0.js">
</script>
<!-- ## Setup -->
<!-- Import the carousel component in the header. -->
<script async custom-element = "amp-carousel" src =
"https://cdn.ampproject.org/v0/amp-carousel-0.1.js">
</script>
<link rel = "canonical" href =
"https://ampbyexample.com/components/amp-carousel/">
<meta name = "viewport" content = "width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
<style amp-custom>
h3{
font-family: "Segoe UI",Arial,sans-serif;
font-weight: 400;
margin: 10px 0;
}
</style>
</head>
<body>
<h3>Google Amp-Carousel</h3>
<amp-carousel
width = "400"
height = "300"
layout = "responsive"
type = "slides"
autoplay delay = "2000">
<amp-img
src = "images/christmas1.jpg"
width = "400"
height = "300"
layout = "responsive"
alt = "a sample image">
</amp-img>
<amp-img
src = "images/christmas2.jpg"
width = "400"
height = "300"
layout = "responsive"
alt = "another sample image">
</amp-img>
<amp-img
src = "images/christmas3.jpg"
width = "400"
height = "300"
layout = "responsive"
alt = "and another sample image">
</amp-img>
</amp-carousel>
</body>
</html>
输出
AMP Lightbox
Amp-lightbox 是一个 amp 组件，它将占据整个视口并像叠加层一样显示。
要使用 amp-lightbox，请添加以下脚本 −
<script async custom-element = "amp-lightbox" src = "https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"> </script>
amp-lightbox 可用的属性
amp-lightbox 的属性列表如下 −
| Sr.no | 属性 &说明 |
|---|---|
| 1 | animate-in(可选)
您可以在此处指定打开灯箱的动画样式。默认情况下，它是 fade-in 。支持样式的值是 fade-in、fly-in-bottom 和 fly-in-top |
| 2 | close-button(AMPHTML 广告上必需)
用于 amphtmlads 时，我们可以为灯箱指定关闭按钮。 |
| 3 | id(必需)
灯箱的唯一标识符 |
| 4 | layout(必需)
layout 的值为 nodisplay |
| 5 | Scrollable (可选)
使用 amp-lightbox 上的此属性，灯箱的内容可以滚动，溢出灯箱的高度。 |
灯箱示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js">
</script>
<title>Google AMP - Amp Lightbox</title>
<link rel = "canonical" href =
"http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
<script async custom-element = "amp-lightbox" src =
"https://cdn.ampproject.org/v0/amp-lightbox-0.1.js">
</script>
<style amp-custom>
amp-img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}
button{
background-color: #ACAD5C;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: left;
}
.lightbox {
background: rgba(211,211,211,0.8);
width: 100%;
height: 100%;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<h3>Google AMP - Amp Lightbox</h3>
<button on = "tap:my-lightbox">
Show LightBox
</button>
<amp-lightbox id = "my-lightbox" layout = "nodisplay">
<div class = "lightbox" on="tap:my-lightbox.close" tabindex = "0">
<amp-img
alt = "Beautiful Flower"
src = "images/flower.jpg"
width = "246"
height = "205">
</amp-img>
</div>
</amp-lightbox>
</body>
</html>
输出
点击屏幕上的任意位置即可关闭灯箱。
您可以向灯箱添加关闭按钮，该按钮主要用于显示覆盖式广告。请观察以下示例 −
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js">
</script>
<title>Google AMP - Amp Lightbox</title>
<link rel = "canonical" href =
"http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
<script async custom-element = "amp-lightbox" src =
"https://cdn.ampproject.org/v0/amp-lightbox-0.1.js">
</script>
<style amp-custom>
amp-img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}
button{
background-color: #ACAD5C;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: left;
}
.lightbox {
background: rgba(211,211,211,0.8);
width: 100%;
height: 100%;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<h3>Google AMP - Amp Lightbox</h3>
<button on = "tap:my-lightbox">
Show LightBox
</button>
<amp-lightbox id = "my-lightbox" layout = "nodisplay" close-button>
<div class = "lightbox" on = "tap:my-lightbox.close">
<amp-img
alt = "Beautiful Flower"
src = "images/flower.jpg"
width = "246"
height = "205">
</amp-img>
</div>
</amp-lightbox>
</body>
</html>
输出
Amp 侧边栏
Amp 侧边栏是 amp 组件，用于显示点击按钮即可从窗口两侧滑动的内容。
要使用 amp-sidebar，我们需要添加以下脚本 −
<script async custom-element = "amp-sidebar" src = " https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"> </script>
Amp-sidebar 标签
<amp-sidebar id = "sidebar" layout = "nodisplay" side = "right"> <span on = "tap:sidebar.close">X</span> Html content here.. </amp-sidebar>
amp-sidebar 上可用的属性列表如下 −
| Sr.no | 属性和说明 |
|---|---|
| 1 | side
此属性将按指定的方向打开侧边栏。示例左/右 |
| 2 | layout
侧边栏布局将使用Nodisplay |
| 3 | open
侧边栏打开时会添加此属性。 |
| 4 | data-close-button-aria-label
用于设置关闭按钮的标签。 |
我们将使用上述属性处理侧边栏。观察下面显示的示例 −
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js">
</script>
<title>Google AMP - Amp Sidebar</title>
<link rel = "canonical" href="
http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
<script async custom-element = "amp-sidebar" src =
"https://cdn.ampproject.org/v0/amp-sidebar-0.1.js">
</script>
<style amp-custom>
amp-img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}
button{
background-color: #ACAD5C;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: left;
}
</style>
</head>
<body>
<h3>Google AMP - Amp Sidebar</h3>
<button on = "tap:sidebar">
Show Sidebar
</button>
<amp-sidebar id = "sidebar" layout = "nodisplay" side = "right">
<span on = "tap:sidebar.close">X</span>
<ul>
<li><a href = "/">About</a></li>
<li><a href = "/">Services</a></li>
<li><a href = "/">Contact US</a></li>
</ul>
</amp-sidebar>
</body>
</html>
输出
我们使用 side 属性在右侧打开侧边栏。您可以使用 side 属性的 left 值在左侧打开侧边栏。layout 属性必须为 nodisplay.Open 属性，侧边栏打开时才会显示该属性。
data-close-button-aria-label
属性用于添加关闭按钮。它是可选的，并非强制使用。Amp Image Slider
Amp-image-slider 是一个 amp 组件，用于通过在图像上垂直移动滑块来比较两幅图像。
要使用 amp-img-slider，请添加以下脚本 −
<script async custom-element = "amp-image-slider" src = " https://cdn.ampproject.org/v0/amp-image-slider-0.1.js"> </script>
Amp-img-slider 标签
<amp-image-slider width = "300" height = "200" layout = "responsive"> <amp-img src = "images/christmas1.jpg" layout = "fill"> </amp-img> <amp-img src = "images/christmas2.jpg" layout = "fill"> </amp-img> </amp-image-slider>
此处显示了 amp-img-slider 的一个示例。我们在 amp-img-slider 中添加了 2 张图片，其中第一张图片充当滑块，您可以在第二张图片的顶部滑入。
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js">
</script>
<title>Google AMP - Amp Image Slider</title>
<link rel = "canonical" href =
"http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
<script async custom-element = "amp-image-slider" src =
"https://cdn.ampproject.org/v0/amp-image-slider-0.1.js">
</script>
<style amp-custom>
amp-img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}
</style>
</head>
<body>
<h3>Google AMP - Amp Image Slider</h3>
<amp-image-slider
width = "300"
height = "200"
layout = "responsive">
<amp-img
src = "images/christmas1.jpg"
layout = "fill">
</amp-img>
<amp-img
src = "images/christmas2.jpg"
layout = "fill">
</amp-img>
</amp-image-slider>
</body>
</html>
输出
Amp-image-slider 具有名为 seekTo 的操作，您可以使用该操作更改图像，如下例所示 −
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js">
</script>
<title>Google AMP - Amp Image Slider</title>
<link rel = "canonical" href ="
http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
<script async custom-element = "amp-image-slider" src =
"https://cdn.ampproject.org/v0/amp-image-slider-0.1.js">
</script>
<style amp-custom>
amp-img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}
button{
background-color: #ACAD5C;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: left;
}
.amp-sidebar-toolbar-target-shown {
display: none;
}
</style>
</head>
<body>
<h3>Google AMP - Amp Image Slider</h3>
<amp-image-slider
width = "300"
id="slider1"
height = "200"
layout = "responsive">
<amp-img src = "images/christmas1.jpg" layout = "fill">
</amp-img>
<amp-img src = "images/christmas2.jpg" layout = "fill">
</amp-img>
</amp-image-slider>
<button on = "tap:slider1.seekTo(percent = 1)">
Image 1
</button>
<button on = "tap:slider1.seekTo(percent = 0)">
Image 2
</button>
</body>
</html>
输出
您可以通过点击按钮来更改图像。
<button on = "tap:slider1.seekTo(percent = 1)">Image 1</button> <button on = "tap:slider1.seekTo(percent = 0)">Image 2</button> </div>
Google AMP - 广告
广告在发布商页面中扮演着重要的角色，因为它们是发布商的收入来源。对于 amp 页面，情况略有不同。它们不允许添加第三方 javascript 文件。为了在页面上显示广告，有一个名为 amp-ad 的 amp 组件可帮助在页面上显示广告。大多数投放广告的广告网络都与 amp-ad 标签兼容。
广告如何运作的详细信息显示在下图 −
要在发布商页面上显示广告，我们需要添加 <amp-ad>，它将作为在页面上投放广告的占位符。<amp-ad>将调用为 type 指定的广告网络。
AD 网络内部将调用广告商提供的广告，该广告大多是 html 或 amphtml 广告。
为了使其工作，我们需要首先将脚本添加到页面。
<script async custom-element = "amp-ad" src = " https://cdn.ampproject.org/v0/amp-ad-0.1.js"> </script>
doubleclick 的 amp-ad 标签如下所示 −
<amp-ad width = "300"
height = "200"
type = "doubleclick"
data-slot = "/4119129/ad">
<div placeholder>
<b>Placeholder here!!!</b>
</div>
</amp-ad>
有许多广告网络支持 amp-ad。请注意，我们将在示例中查看 doubleclick amp-ad 标签。必须在type 属性中指定广告网络名称。
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js">
</script>
<title>Google AMP - AD</title>
<link rel = "canonical" href=
"http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
<script async custom-element = "amp-ad" src =
"https://cdn.ampproject.org/v0/amp-ad-0.1.js">
</script>
<style amp-custom>
div {
text-align:center;
}
</style>
</head>
<body>
<h3>Google AMP - AD</h3>
<h3>300x250 - Banner AD</h3>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<div>
<amp-ad
data-slot = /30497360/amp_by_example/AMP_Banner_300x250
height = 250
layout = fixed
style = width:300px;height:250px;
type = doubleclick
width = 300>
</amp-ad>
</div>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
</body>
</html>
输出
让我们来看看 amp-ad 上可用的一些重要属性，如下表所示 −
| Sr.No | 属性 &描述 |
|---|---|
| 1 | type
广告网络名称 |
| 2 | width
广告宽度 |
| 3 | height
广告高度 |
| 4 | placeholder
占位符用作子元素，在广告仍在加载时显示给用户。请注意，此属性必须由广告网络端支持。 |
| 5 | data-*
要传递给广告网络的数据属性。例如，doubleclick 广告网络需要 data-slot=/30497360/amp_by_example/AMP_Banner_300x250 才能在页面上呈现广告。 每个广告网络都会指定数据参数。 我们还可以使用 data-override-width 和 data-override-height 覆盖使用的宽度和高度。 |
| 6 | fallback
Fallback 用作 amp-ad 的子元素，并在没有广告可投放时显示。 |
让我们借助一个工作示例来理解这一点，该示例使用 placeholder，当没有广告可投放时执行服务。
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js">
</script>
<title>Google AMP - AD</title>
<link rel = "canonical" href =
"http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content="width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
<script async custom-element = "amp-ad" src =
"https://cdn.ampproject.org/v0/amp-ad-0.1.js">
</script>
<style amp-custom>
div {
text-align:center;
}
</style>
</head>
<body>
<h3>Google AMP - AD</h3>
<h3>300x250 - Banner AD</h3>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<div>
<amp-ad
data-slot = /30497360/amp_by_example/AMP_Banner_300x250
height = 250
layout = fixed
style = width:300px;height:250px;
type = doubleclick
width = 300>
<div placeholder>
<b>Placeholder Example : Ad is loading!!!</b>
</div>
</amp-ad>
</div>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例<p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
</body>
</html>
输出
我们可以使用 fallback 属性，它是 amp-ad 的子元素，当没有广告可投放时显示。
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js">
</script>
<title>Google AMP - AD</title>
<link rel = "canonical" href =
"http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
<script async custom-element = "amp-ad" src =
"https://cdn.ampproject.org/v0/amp-ad-0.1.js">
</script>
<style amp-custom>
div, p{
text-align:center;
}
amp-ad {
border : solid 1px black;
}
</style>
</head>
<body>
<h3>Google AMP - AD</h3>
<h3>300x250 - Banner AD</h3>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<div>
<amp-ad
width = "300"
height = "250"
type = "doubleclick"
data-slot = "/4119129/no-ad">
<div fallback>
<p style = "color:green;font-size:25px;">No ads to Serve!</p>
</div>
</amp-ad>
</div>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
</body>
</html>
输出
如果广告在视口中，则在 fallback 属性的情况下，它将在 fallback 元素内显示消息。
如果广告组件在视口下方且没有广告，amp-ad 将折叠空间并且不会显示 fallback 消息。
只有在没有广告且广告在视口下方时，广告单元才会折叠，这样用户在阅读内容时就不会受到干扰，因为折叠会导致内容移动。
支持的广告网络列表在此处给出:https://www.ampproject.org/docs/ads/ads_vendors
在本章中，我们将讨论 amp − 中的以下广告相关标签
Google AMP − 事件跟踪像素
Google AMP − 粘性广告
Google AMP − AMPHTML 广告
事件跟踪像素
Amp 提供 amp-pixel，主要用于触发像素来计算页面浏览量。 Amp-pixel 类似于 img 标签，我们需要提供将要触发的像素 URL，用户可以在调试时在浏览器的网络选项卡中看到触发的 URL。像素不会显示在页面上。
要使用 amp-pixel，我们不需要添加任何其他脚本，因为它的功能在核心 amp 脚本中可用。
标签 amp-pixel 如下所示 −
<amp-pixel src = "https://urlhere" layout = "nodisplay"> </amp-pixel>
让我们借助一个工作示例了解 amp-pixel 的工作原理 −
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js">
</script>
<title>Google AMP - Tracking Pixel</title>
<link rel = "canonical" href =
"http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
</head>
<body>
<h3>Google AMP - Tracking Pixel</h3>
<amp-pixel src = "https://www.trackerurlhere.com/tracker/foo"
layout = "nodisplay">
</amp-pixel>
</body>
</html>
输出
您将在浏览器网络选项卡中看到 URL 触发。这里我们使用了一个虚拟像素来展示 amp-pixel 的工作。在实时环境中，您应该看到针对触发的像素跟踪数据。每次在实时网页中触发像素时，服务器端都会计算像素上的数据。稍后可以从业务角度分析数据。
粘性广告
粘性广告是一种显示广告的格式。广告将粘贴在页面底部，并将 amp-ad 组件作为子组件调用。这基本上就像我们在页面上经常看到的页脚广告一样。
要使用 amp-sticky-ad，我们需要添加以下脚本 −
<script async custom-element = "amp-sticky-ad" src = " https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js"> </script>
与 amp-sticky-ad 相关的条件如下 −
您只能在页面上使用一个 amp-sticky-ad。
amp-ad 必须是 amp-sticky-ad 的直接子组件。例如 −
<amp-sticky-ad> <amp-ad></amp-ad> </amp-sticky-ad>
粘性广告组件将始终位于页面底部。
粘性广告将占据容器的整个宽度，并以 amp-ad 的宽度和高度填充空间
粘性广告的高度为 100px。如果 amp-ad 的高度小于 100px，粘性广告将占用 amp-ad 的高度。如果 amp-ad 的高度大于 100px，则高度将保持为 100px，溢出内容将被隐藏。粘性广告的高度无法更改超过 100px。
可以更改粘性广告的背景颜色。但不允许使用透明背景。
当用户滚动到页面底部时，广告将显示在页面末尾，因此底部内容不会被隐藏。
在横向模式下，粘性广告将居中对齐。
如果没有广告可投放，粘性广告的容器将折叠并且不可见。
让我们看一个页面上 amp-sticky-ad 的工作示例，如下所示 −
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js">
</script>
<title>Google AMP - AD</title>
<link rel = "canonical" href =
"http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
<script async custom-element = "amp-sticky-ad" src =
"https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js">
</script>
<style amp-custom>
div, p{
text-align:center;
}
amp-ad {
border : solid 1px black;
}
</style>
</head>
<body>
<h3>Google AMP - Sticky AD</h3>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<div>
<amp-sticky-ad layout = "nodisplay">
<amp-ad
width = "320"
height = "50"
type = "doubleclick"
data-slot = "/35096353/amptesting/formats/sticky">
</amp-ad>
</amp-sticky-ad>
</div>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<h2>END OF PAGE IS VISIBLE AND CONTENT IS NOT COVERED</h2>
</body>
</html>
输出
这是用户滚动到页面末尾时的样子 −
到达页面末尾时，广告不会与内容重叠。关闭按钮可用，允许用户关闭广告。
如果您想更改与关闭按钮相关的任何内容，即图像或宽度等，可以使用样式组件中的 .amp-sticky-ad-close-button 来完成。
更改关闭按钮背景颜色的示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js">
</script>
<title>Google AMP - AD</title>
<link rel = "canonical" href =
"http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
<script async custom-element = "amp-sticky-ad"
src = "https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js">
</script>
<style amp-custom>
div, p{
text-align:center;
}
amp-ad {
border : solid 1px black;
}
.amp-sticky-ad-close-button {
background-color: red;
}
</style>
</head>
<body>
<h3>Google AMP - Sticky AD</h3>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<div>
<amp-sticky-ad layout = "nodisplay">
<amp-ad
width = "320"
height = "50"
type = "doubleclick"
data-slot = "/35096353/amptesting/formats/sticky">
</amp-ad>
</amp-sticky-ad>
</div>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<p>这是广告网络双击横幅广告的示例</p>
<h2>END OF PAGE IS VISIBLE AND CONTENT IS NOT COVERED</h2>
</body>
</html>
输出
发布商页面上的 amp 粘性广告示例
AMPHTML 广告
我们已经看到用于加载广告的 <amp-ad>。使用 <amp-ad> 加载的广告内容可以使用非 amp 样式的加载广告。如果 <amp-ad> 加载使用 amp 广告规范的广告，则称为 amphtml 广告。 AmpHTML 广告与非 amp 广告相比速度更快，因为它们遵循 amp 规范。
使用可用的 amp 组件(如灯箱和轮播)，我们可以形成多种类型的 amphtml 广告格式，以帮助展示广告。
目前，以下广告支持 amphtml 广告 −
DoubleClick for Publishers
TripleLift
Dianomi
Adzerk
Google AdSense
amphtml 广告将从 <amp-ad> 组件投放，如下所示 −
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js">
</script>
<title>Google AMP - Amp HTMLAds</title>
<link rel = "canonical" href=
"http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width=device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
<script async custom-element = "amp-ad" src =
"https://cdn.ampproject.org/v0/amp-ad-0.1.js">
</script>
<style amp-custom>
.ad-container {
background: #FFFFFF;
margin: 0;
padding: 0px;
text-align:center;
}
.article-body{
font-family: avenir, Helvetica, arial, serif, sans-serif !important;
font-weight: 400;
text-align:center;
}
.adv {
text-align:center;
}
</style>
</head>
<body>
<div>
<p>Amphtml ads are faster in comparison to the non
amp ones as they follow the amp specification.</p>
<p>Amphtml ads work fine in amp pages as well as non amp pages</p>
<div class = "ad-container">
<div>Advertising</div>
<amp-ad layout = "fixed"
width = "300"
height = "250"
type = "fake"
id = "i-amphtml-demo-fake"
src = "ampimg.html">
</amp-ad>
</div>
<p>Amphtml ads are faster in comparison to the non amp
ones as they follow the amp specification.</p>
<p>Amphtml ads work fine in amp pages as well as non amp pages</p>
</div>
</body>
</html>
我们正在调用 amp-ad 来显示广告。amp-ad 中使用的 src 是另一个 amp 页面。我们使用了 type="fake" 和 id="i-amphtml-demo-fake"。amp 页面详细信息或 amp-ad 标签中使用的 ampimg.html 显示在此处 −
ampimg.html
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js">
</script>
<title>Google AMP - Image</title>
<link rel = "canonical" href =
"http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content="width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
<style amp-custom>
amp-img {
border: 1px solid black;
border-radius: 4px;
padding: 5px;
}
</style>
</head>
<body>
<amp-img alt = "Beautiful Flower"
src = "images/bannerad.png"
width = "246"
height = "205">
</amp-img>
</body>
</html>
输出
我们在 amp-ad 中显示 amp 页面。同样，我们可以使用 amp-video、amp-carousel 在 amp 页面中显示广告。列出的广告服务器支持调用适当的 amp 页面在 amphtml 广告下投放广告。
Google AMP - Analytics
Amp analytics 是一个用于跟踪页面数据的 amp 组件。可以记录和保存页面上的所有用户交互，以分析数据，从而进一步改进或用于业务目的。
要使用 amp-analytics 组件，我们需要在 head 部分内添加以下脚本 −
<script async custom-element = "amp-analytics" src = "https://cdn.ampproject.org/v0/amp-analytics-0.1.js"> </script>
要记录 amp-analytics 中使用的事件，我们可以使用第三方供应商，也可以使用内部跟踪系统。
使用 GoogleAnalytics 供应商的 amp-analytics 示例 −
<amp-analytics type = googleanalytics>
<script type = application/json>{
"requests": {
"pageview": "${eventId}"
},
"vars": {
"account": "UA-44450152-1"
},
"triggers": {
"trackPageview" : {
"on": "visible",
"request": "pageview",
"vars": {
"eventId": "pageview"
}
}
}
}
</script>
</amp-analytics>
使用 comscore 供应商的 amp-analytics 示例
<amp-analytics type = comscore>
<script type = application/json>
{"vars": {"c2":"7922264"}}
</script>
</amp-analytics>
使用 chartbeat 供应商的 amp-analytics 示例
<amp-analytics type = chartbeat>
<script type = application/json>{
"vars": {
"uid": "230",
"domain": "dummyurl.com",
"sections": "us",
"authors": "Hello World"
}
}</script>
</amp-analytics>
供应商的详细列表可在此处获取。
下面给出了如何使用内部分析供应商的实际示例 −
示例
<!doctype html>
<html amp>
<head>
<meta charset = "utf-8">
<title>amp-analytics</title>
<script async src = "https://cdn.ampproject.org/v0.js">
</script>
<script async custom-element = "amp-analytics"
src = "https://cdn.ampproject.org/v0/amp-analytics-0.1.js">
</script>
<link rel = "canonical" href = "ampanalytics.html">
<meta name = "viewport" content = "width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
</head>
<body>
<h1>Google Amp - Analytics</h1>
<amp-analytics>
<script type = "application/json">
{
"requests": {
"event": "http://localhost:8080/googleamp/tracking.php?
user=test&account=localhost&event=${eventId}"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "event",
"vars": {
"eventId": "pageview"
}
}
}
}
</script>
</amp-analytics>
</body>
</html>
当浏览器点击页面时，跟踪器将针对页面浏览量触发。可以在 Google 网络选项卡中看到它，如下所示。
当页面上有特定元素可见时，您还可以触发 amp-analytics 事件。此处显示了相同的工作示例 −
示例
<!doctype html>
<html amp>
<head>
<meta charset = "utf-8">
<title>amp-analytics</title>
<script async src = "https://cdn.ampproject.org/v0.js">
</script>
<script async custom-element = "amp-analytics"
src = "https://cdn.ampproject.org/v0/amp-analytics-0.1.js">
</script>
<link rel = "canonical" href = "ampanalytics.html">
<meta name = "viewport" content = "width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
<script async custom-element = "amp-video"
src = "https://cdn.ampproject.org/v0/amp-video-0.1.js">
</script>
</head>
<body>
<h1>Google Amp - Analytics</h1>
<amp-video controls
id = "videoplayer"
width = "640"
height = "360"
layout = "responsive"
poster = "images/videoposter.png"
autoplay>
<source src = "video/bunny.webm" type = "video/webm" />
<source src = "video/samplevideo.mp4" type = "video/mp4" />
<div fallback>
<p>This browser does not support the video element.</p>
</div>
</amp-video>
<amp-analytics>
<script type = "application/json">
{
"requests": {
"event": "http://localhost:8080/googleamp/tracking.php?
user=test&account=localhost&event=${eventId}"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "event",
"visibilitySpec": {
"selector": "#videoplayer",
"visiblePercentageMin": 20,
"totalTimeMin": 2000,
"continuousTimeMin": 200
},
"vars": {
"eventId": "video"
}
}
}
}
</script>
</amp-analytics>
</body>
</html>
输出
Amp-analytics 组件需要将 json 对象传递给脚本标签。json 的格式如下 −
{
"requests": {
request-name: request-value,
...
},
"vars": {
var-name: var-value,
...
},
"extraUrlParams": {
extraurlparam-name: extraurlparam-value,
...
},
"triggers": {
trigger-name: trigger-object,
...
},
"transport": {
"beacon": *boolean*,
"xhrpost": *boolean*,
"image": *boolean*,
}
}
上述所有对象都不是必须传递给 amp-analytics 的。如果您使用的是第三方供应商，供应商将有其格式，用户需要以这种方式传递数据。
让我们详细了解每个对象 −
请求
请求对象有一个 URL，用于在满足条件时触发。此处显示了请求对象的示例 −
"requests": {
"request-name": "http://localhost:8080/googleamp/tracking.php?
user=test&account=localhost&event=${eventId}"
},
请求名称将在触发器对象中指定，并且必须使用相同的名称。
变量
请求对象中要使用的所有变量均在变量对象中指定。
"requests": {
"event": "http://localhost:8080/googleamp/tracking.php?
user=test&account=localhost&event=${eventId}"
},
"vars": {
"eventId": "video"
}
额外的 URL 参数
任何要作为查询字符串附加到请求 URL 的附加参数都可以在此对象中定义。请观察以下示例
"requests": {
"event": "http://localhost:8080/googleamp/tracking.php?
user=test&account=localhost&event=${eventId}&x=1&y=2&z=3"
},
"vars": {
"eventId": "video"
},
"extraUrlParams": {
"x": "1",
"y": "2",
"z": "3"
}
触发器
此对象将告知何时触发请求 URL。触发器对象内可用的键值对如下所示 −
on − 您应该提及要监听的事件。on 可用的值为 render-start、ini-load、click、scroll、timer、visible、hidden、user-error、access-* 和 video-*
request − 这是请求的名称。这必须与 requests 对象中的请求名称匹配。
vars − 这是具有键值变量的对象，定义用于触发器对象内或用于覆盖定义的 vars 键值。
selector −这将显示设置触发器的元素的详细信息。
scrollSpec − 这将包含滚动触发器的详细信息。
timerSpec − 这将包含给定时间的详细信息。
videoSpec − 这将包含要为视频调用的详细信息。
以下是我们添加了 amp-video 的示例。当视频元素在页面上可用、页面上至少有 20% 可见、视频必须播放至少 2 秒并且连续显示 200 毫秒时，Amp-analytics 将触发跟踪器。当满足所有这些条件时，只有跟踪器会被触发。详细信息如下所示 −
要添加有关元素可见性的条件以及其他条件，例如元素必须至少可见 20%，视频应播放 2 秒，所有这些条件都必须在 visibilitySpec 中指定，如下所示 −
<amp-analytics>
<script type = "application/json">
{
"requests": {
"event": "http://localhost:8080/googleamp/tracking.php?
user=test&account=localhost&event=${eventId}"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "event",
"visibilitySpec": {
"selector": "#videoplayer",
"visiblePercentageMin": 20,
"totalTimeMin": 2000,
"continuousTimeMin": 200
},
"vars": {
"eventId": "video"
}
}
}
}
</script>
</amp-analytics>
videoSpec 允许您定义触发跟踪器触发的条件。条件在此处列出 −
waitFor
此属性用于可见性触发器在触发前等待某些情况。waitFor 可用的选项为 none、ini-load 和 render-start。默认情况下，waitFor 的值为 ini-load。
reportWhen
此属性用于可见性触发器在触发前等待某些情况。支持的值是 documentExit。您不能在 visibilitySpec
内同时使用 reportWhen 和 repeat 属性continuousTimeMin 和 ContinuousTimeMax
此属性表示要触发可见性跟踪器，元素必须在 continuousTimeMin 和 continuousTimeMax 之间持续处于视口中。如果未指定 continousTimeMin，则默认设置为 0。该值以毫秒为单位指定。
totalTimeMin 和 totalTimeMin
此属性表示要触发可见性跟踪器，元素必须在 totalTimeMin 和 totalTimeMin 之间处于视口中。如果未指定 totalTimeMin，则默认为 0。该值以毫秒为单位指定。
visiblePercentageMin 和 visiblePercentageMax
此属性表示要触发可见性跟踪器，元素需要在分配给 visiblePercetageMin 和 visiblePercentageMax 的百分比之间在视口内可见。visiblePercentageMin 的默认值为 0，visibilePercentageMax 的默认值为 100。如果两个值均为 0，则可见性触发器将在元素不可见时触发，如果两个值均为 100，则将在元素完全可见时触发。
Repeat
如果设置为 true，则每次满足visibilitySpec 条件时都会触发触发器。默认情况下，repeat 的值为 false。它不能与 reportWhen 属性一起使用。
此处显示了点击触发器的示例 −
<!doctype html>
<html amp>
<head>
<meta charset = "utf-8">
<title>amp-analytics</title>
<script async src = "https://cdn.ampproject.org/v0.js">
</script>
<script async custom-element = "amp-analytics"
src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js">
</script>
<link rel = "canonical" href = "ampanalytics.html">
<meta name = "viewport" content = "width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
<script async custom-element = "amp-video"
src = "https://cdn.ampproject.org/v0/amp-video-0.1.js">
</script>
<style amp-custom>
a {
color: blue;
}
</style>
</head>
<body>
<h1>Google Amp - Analytics</h1>
<a>Click Here</a>
<amp-analytics>
<script type = "application/json">
{
"requests": {
"event": "http://localhost:8080/googleamp/tracking.php?
user=test&account=localhost&event=${eventId}"
},
"triggers": {
"trackAnchorClicks": {
"on": "click",
"selector": "a",
"request": "event",
"vars": {
"eventId": "clickonlink"
}
}
}
}
</script>
</amp-analytics>
</body>
</html>
输出
点击链接时，事件将被触发，如下所示 −
Google AMP - 社交小部件
Amp 提供支持，无需加载任何外部库即可在页面上显示社交小部件。在本章中，我们将讨论此处列出的一些流行社交小部件 −
Google AMP − Facebook
Google AMP − Twitter
Google AMP − Pinterest
Google Amp - Facebook
使用 amp-facebook 组件，我们可以连接到 facebook 并在 amp 页面中显示帖子、视频、评论。
要使用 amp-facebook，我们需要将以下脚本添加到页面 −
<script async custom-element = "amp-facebook"
src = "https://cdn.ampproject.org/v0/amp-facebook-0.1.js">
</script>
Amp-facebook 标签格式
<amp-facebook width = "552" height = "310" layout = "responsive" data-href = "https://www.facebook.com/tutorialspointindia/ posts/1784197988358159"> </amp-facebook>
此处显示了 amp-facebook 的一个工作示例 −
示例:显示来自 facebook 的帖子
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js">
</script>
<title>Google AMP - Amp Facebook</title>
<link rel = "canonical" href =
"http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
<script async custom-element = "amp-facebook"
src = "https://cdn.ampproject.org/v0/amp-facebook-0.1.js">
</script>
</head>
<body>
<h3>Google AMP - Amp Facebook</h3>
<h2>Learn Python webscrapping</h2>
<amp-facebook
width = "552"
height = "310"
layout = "responsive"
data-href = "https://www.facebook.com/tutorialspointindia/posts/1784197988358159">
</amp-facebook>
</body>
</html>
输出
示例:显示来自 Facebook 的视频
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js">
</script>
<title>Google AMP - Amp Facebook>/title>
<link rel = "canonical" href =
"http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
<script async custom-element = "amp-facebook"
src = "https://cdn.ampproject.org/v0/amp-facebook-0.1.js">
</script>
</head>
<body>
<h3<Google AMP - Amp Facebook Video</h3>
<h2<Learn Python</h2>
<amp-facebook
width = "476"
height = "316"
layout = "responsive"
data-embed-as = "video"
data-href = "https://www.facebook.com/thetutorialkings/videos/701545820223256">
</amp-facebook>
</body>
</html>
输出
示例:显示 Facebook 帖子的评论
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js">
</script>
<title>Google AMP - Amp Facebook</title>
<link rel = "canonical" href =
"http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
<script async custom-element = "amp-facebook"
src = "https://cdn.ampproject.org/v0/amp-facebook-0.1.js">
</script>
</head>
<body>
<h3>Google AMP - Amp Facebook comment for post</h3>
<h2>Learn Microprocessor</h2>
<amp-facebook
width = "552"
height = "500"
layout = "responsive"
data-embed-type = "comment"
data-href = "https://www.facebook.com/tutorialspointindia/posts/1744145745696717?
comment_id=1744179789026646&include_parent=false">
</amp-facebook>
</body>
</html>
输出
amp-facebook 上可用的属性有
data-href(必填)− 您需要在此处指定 Facebook 网址。
data-embed-as− 可用的选项有帖子、视频和评论。默认情况下为帖子。
data-locale(必填)− 它以区域设置语言显示，您可以根据自己的选择进行更改。
data-include-comment-parent− 它采用 true 或 false 值。默认情况下为 false。当您使用 data-embed-as 选项作为评论时，如果您需要父级回复评论，您可以将此选项设置为 true。
到目前为止，我们已经了解了如何将帖子/视频和评论添加到 amp 页面。如果我们需要添加 Facebook 页面，amp 有一个名为 amp-facebook-page 的组件。
Amp Facebook 页面插件
Amp-facebook-page 组件为我们提供我们想要的 Facebook 页面详细信息。要使用 amp-facebook-page，我们需要添加以下脚本 −
<script async custom-element = "amp-facebook-page" src = " https://cdn.ampproject.org/v0/amp-facebook-page-0.1.js"> </script>
此处显示了使用 amp-facebook-page 的工作示例 −
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js">
</script>
<title>Google AMP - Amp Facebook</title>
<link rel = "canonical" href =
"http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
<script async custom-element = "amp-facebook-page"
src = "https://cdn.ampproject.org/v0/amp-facebook-page-0.1.js">
</script>
</head>
<body>
<h3>Google AMP - Amp Facebook Page</h3>
<h3>Welcome to Tutorialspoint Facebook Page</h3>
<amp-facebook-page
width = "340"
height = "130"
layout = "responsive"
data-href = "https://www.facebook.com/tutorialspointindia/">
</amp-facebook-page>
</body>
</html>
输出
Amp-facebook-like
要嵌入 Facebook 页面点赞按钮插件，我们可以使用 amp-facebook-like 组件。要使用 amp-facebook-like，我们需要添加以下脚本 −
"<script async custom-element = "amp-facebook-like" src = "https://cdn.ampproject.org/v0/amp-facebook-like-0.1.js"> </script>
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js">
</script>
<title>Google AMP - Amp Facebook</title>
<link rel = "canonical"
href = "http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
<script async custom-element = "amp-facebook-like"
src = "https://cdn.ampproject.org/v0/amp-facebook-like-0.1.js">
</script>
<style amp-custom>
amp-facebook-like {
margin: 1rem
}
</style>
</head>
<body>
<h3>Google AMP - Amp Facebook Likes</h3>
<h3>Welcome to Tutorialspoint Facebook Likes</h3>
<amp-facebook-like
width = "110"
height = "20"
layout = "fixed"
data-layout = "button_count"
data-href = "https://www.facebook.com/tutorialspointindia">
</amp-facebook-like>
</body>
</html>
输出
Amp Facebook 评论插件
Amp-facebook-comments 组件将提供给定页面的评论。
要使用 amp-facebook-comments，我们需要添加以下脚本 −
<script async custom-element = "amp-facebook-comments" src = "https://cdn.ampproject.org/v0/amp-facebook-comments-0.1.js"> </script>
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js">
</script>
<title>Google AMP - Amp Facebook</title>
<link rel = "canonical" href =
"http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
<script async custom-element = "amp-facebook-comments"
src = "https://cdn.ampproject.org/v0/amp-facebook-comments-0.1.js">
</script>
<style amp-custom>
amp-facebook-like {
margin: 1rem
}
</style>
</head>
<body>
<h3>Google AMP - Amp Facebook Likes</h3>
<amp-facebook-comments
width = 486
height = 657
layout = "responsive"
data-numposts = "2"
data-href = "https://developers.facebook.com/docs/plugins/comments">
</amp-facebook-comments>
</body>
</html>
输出
属性 data-numposts 决定屏幕上显示的评论数量。如果要获取所有评论，可以删除该属性。
Google AMP - Pinterest
Amp 使用 amp-pinterest 组件提供了一个 pinterest 小部件。我们可以使用此组件显示 pinterest 小部件、pinterest 保存按钮和 pinterest 关注按钮。
要开始使用 amp-pinterest，我们需要添加以下脚本 −
<script async custom-element="amp-pinterest" src="https://cdn.ampproject.org/v0/amp-pinterest-0.1.js"> </script>
Amp-pinterest 标签
<amp-pinterest width = 300 height = 450 data-do = "embedPin"
data-url = "https://in.pinterest.com/pin/856739529089490354/">
</amp-pinterest>
Pinterest 小部件
示例
要显示 pinterest 小部件，我们需要使用属性 data-do="embedPin"。此处显示了相同的工作示例 −
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js">
</script>
<title>Google AMP - Amp Pinterest Widget</title>
<link rel = "canonical" href =
"http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
<script async custom-element = "amp-pinterest"
src = "https://cdn.ampproject.org/v0/amp-pinterest-0.1.js">
</script>
<style amp-custom>
amp-facebook-like {
margin: 1rem
}
</style>
</head>
<body>
<h3>Google AMP - Amp Pinterest Widget</h3>
<amp-pinterest
width = 300
height = 450
data-do = "embedPin"
data-url = "https://in.pinterest.com/pin/856739529089490354/">
</amp-pinterest>
</body>
</html>
输出
Pinterest 保存按钮
要显示 Pinterest 的保存按钮，我们需要使用属性 data-do="buttonPin"。此处显示了 Pinterest 保存按钮的一个工作示例 −
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js">
</script>
<title>Google AMP - Amp Pinterest Widget</title>
<link rel = "canonical" href =
"http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
<script async custom-element = "amp-pinterest"
src = "https://cdn.ampproject.org/v0/amp-pinterest-0.1.js">
</script>
<style amp-custom>
amp-facebook-like {
margin: 1rem
}
</style>
</head>
<body>
<h3>Google AMP - Amp Pinterest Save Button</h3>
<h3>TutorialsPoint - ReactJS</h3>
<amp-img
src = "images/reactjs.png"
width = "100"
height = "100"
alt = "blockchain image">
</amp-img>
<amp-pinterest
height = "18"
width = "56"
data-do = "buttonPin"
data-url = "https://www.tutorialspoint.com/"
data-media = "https://www.tutorialspoint.com/images/tp-logo-diamond.png"
data-description = "amp-pinterest in action">
</amp-pinterest>
</body>
</html>
输出
Pinterest 关注按钮
要显示 Pinterest 的保存关注按钮，我们需要使用属性 data-do="buttonFollow"。此处显示了 Pinterest 保存按钮的一个工作示例 −
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js">
</script>
<title>Google AMP - Amp Pinterest Widget</title>
<link rel = "canonical" href =
"http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
<script async custom-element = "amp-pinterest"
src = "https://cdn.ampproject.org/v0/amp-pinterest-0.1.js">
</script>
<style amp-custom>
amp-facebook-like {
margin: 1rem
}
</style>
</head>
<body>
<h3>Google AMP - Amp Pinterest Follow Button</h3>
<amp-pinterest
height = 50
width = 130
data-do = "buttonFollow"
data-href = "https://in.pinterest.com/wedgehairstyles/"
data-label = "wedgehairstyles">
</amp-pinterest>
</body>
</html>
输出
Google Amp - Twitter
Amp 有一个组件可以使用 amp-twitter 显示 Twitter 信息。
要使用 amp-twitter，我们需要添加以下脚本 −
<script async custom-element = "amp-twitter" src = "https://cdn.ampproject.org/v0/amp-twitter-0.1.js"> </script>
Amp-twitter 标签
<amp-twitter width = "375" height = "472"
layout = "responsive" data-tweetid = "885634330868850689">
</amp-twitter>
此处显示了一个显示推文的工作示例
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js">
</script>
<title>Google AMP - Amp Twitter</title>
<link rel = "canonical" href =
"http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
<script async custom-element = "amp-twitter" src =
"https://cdn.ampproject.org/v0/amp-twitter-0.1.js">
</script>
<style amp-custom>
amp-facebook-like {
margin: 1rem
}
</style>
</head>
<body>
<h3>Google AMP - Amp Twitter</h3>
<amp-twitter
width = "375"
height = "472"
layout = "responsive"
data-tweetid = "885634330868850689">
</amp-twitter>
</body>
</html>
输出
Google AMP - 媒体
在本章中，我们将讨论如何显示来自第三方合作伙伴(例如 jwplayer 和 Youtube)的视频和音频。让我们详细了解以下内容 −
Google AMP − JwPlayer
Google AMP − YouTube
Google AMP − 音频
Google AMP - JwPlayer
如果您想使用 jwplayer 在页面上显示视频，amp 有 amp-jwplayer 可以做到。
要使用 amp-jwplayer，请在您的页面中包含以下脚本 −
<script async custom-element = "amp-jwplayer" src = " https://cdn.ampproject.org/v0/amp-jwplayer-0.1.js"> </script>
Amp-jwplayer 标签
<amp-jwplayer data-playlist-id = "482jsTAr" data-player-id = "uoIbMPm3" layout = "responsive" width = "16" height = "9"> </amp-jwplayer>
下面显示了 amp 页面中 jwplayer 的一个工作示例 −
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js">
</script>
<title>Google AMP - Amp Jwplayer</title>
<link rel = "canonical" href =
"http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
<script async custom-element = "amp-jwplayer" src =
"https://cdn.ampproject.org/v0/amp-jwplayer-0.1.js">
</script>
</head>
<body>
<h3>Google AMP - Amp Jwplayer</h3>
<amp-jwplayer
data-playlist-id = "482jsTAr"
data-player-id = "uoIbMPm3"
layout = "responsive"
width = "16"
height = "9">
</amp-jwplayer>
</body>
</html>
输出
对于 amp-jwplayer，有三个重要属性
data-player-id
data-media-id
data-playlist-id
要获取播放器、媒体和播放列表的 ID，您需要在 jwplayer 中登录，可以从这里完成 − https://dashboard.jwplayer.com/#/players
玩家 ID 将在 jwplayer 玩家部分提供。媒体 ID 将在 jwplayer content section 中提供，播放列表 ID 将在 jwplayer playlist section 中提供。
Jwplayer 提供了一个八位字母数字 ID，需要在 amp-jwplayer 中将其用于相应的属性。
Google AMP - Youtube
如果您想在您的 amp 页面上显示 Youtube 视频，amp 有 amp-youtube 可在页面上嵌入 youtube 视频。
要使用 amp-youtube，您需要将以下脚本添加到您的页面 −
<script async custom-element = "amp-youtube" src = " https://cdn.ampproject.org/v0/amp-youtube-0.1.js"> </script>
Amp-youtube 标签
<amp-youtube width = "480" height = "270" layout = "responsive" autoplay = "true" data-videoid = "fWZ6-p7mGK0"> </amp-youtube>
现在让我们来研究一个示例，展示 amp-youtube 在页面上的工作原理。
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js">
</script>
<title>Google AMP - Youtube</title>
<link rel = "canonical" href =
"http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
<script async custom-element = "amp-youtube" src =
"https://cdn.ampproject.org/v0/amp-youtube-0.1.js">
</script>
</head>
<body>
<h3>Google AMP - Youtube</h3>
<h3>Youtube Videos from Tutorialspoint</h3>
<amp-youtube
width = "480"
height = "270"
layout = "responsive"
autoplay = "true"
data-videoid = "fWZ6-p7mGK0">
</amp-youtube>
</body>
</html>
输出
要显示 youtube 视频，您需要向 amp-youtube 提供 videoid，如下所示 −
<amp-youtube width = "480" height = "270" layout = "responsive" autoplay = "true" data-videoid = "fWZ6-p7mGK0"> </amp-youtube>
如何获取 data-videoid?
考虑任何 Youtube 网址，例如 − https://www.youtube.com/watch?v=fWZ6-p7mGK0。突出显示的部分是要在 amp-youtube 中使用的 id。
我们将属性 autoplay 设置为 true。视频将根据浏览器的支持自动播放，并且视频将以静音模式播放。您必须点击视频才能取消静音。视频在离开视图时将暂停，并在返回视图时从暂停状态恢复。如果用户暂停视频并进入/离开视图，视频将仅保持暂停状态。静音/取消静音也同样适用。
Google Amp - Audio
Amp 有一个播放音频的标签，可以替代 html5 audio 标签。要在 amp 页面中播放音频，我们可以使用 amp-audio。
要使用 amp-audio，我们需要添加以下脚本 −
<script async custom-element = "amp-audio" src = "
https://cdn.ampproject.org/v0/amp-audio-0.1.js">
</script>
Amp-audio 标签
<amp-audio
width = "auto"
height = "50"
src = "audio/test.mp3">
<div fallback>
<p>HTML5 audio is not supported on your browser!</p>
</div>
</amp-audio>
因此，amp-audio 将占用 src 属性，即对音频文件的 http 请求。我们使用 amp-audio 而不是标准 html5 audio 的原因是因为 amp 为需要 http 请求的元素设置了延迟加载概念。
它将根据优先级开始加载请求。它将在到达视口之前或即将到达视口时加载。
此处显示了在您的页面中使用 amp-audio 的一个工作示例 −
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js">
</script>
<title>Google AMP - Audio</title>
<link rel = "canonical" href =
"http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
<script async custom-element = "amp-audio"
src = "https://cdn.ampproject.org/v0/amp-audio-0.1.js">
</script>
</head>
<body>
<h3>Google AMP - Audio</h3>
<amp-audio
width = "auto"
height = "50"
src="audio/test.mp3">
<div fallback>
<p>HTML5 audio is not supported on your browser!</p>
</div>
</amp-audio>
</body>
</html>
输出
此处显示了指定 width、height、src 等属性的 amp-audio 标签。我们还添加了一个带有 fallback 属性 的 div，如果浏览器不支持 amp-audio，它将充当后备。
<amp-audio
width = "auto"
height = "50"
src = "audio/test.mp3">
<div fallback>
<p>HTML5 audio is not supported on your browser!</p>
</div>
</amp-audio>
请注意，默认情况下，控件会添加到音频标签中，可用于播放/暂停和静音/取消静音音频。您可以获得音频标签的下载选项，如下所示 −
单击下载，您可以下载使用的媒体文件。要禁用下载，您可以使用属性 − controlsList="nodownload"，如下例所示 −
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js">
</script>
<title>Google AMP - Audio</title>
<link rel = "canonical" href =
"http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
<script async custom-element = "amp-audio"
src = "https://cdn.ampproject.org/v0/amp-audio-0.1.js">
</script>
</head>
<body>
<h3>Google AMP - Audio</h3>
<amp-audio
width = "auto"
height = "50"
src = "audio/test.mp3"
controlsList = "nodownload">
<div fallback>
<p>HTML5 audio is not supported on your browser!</p>
</div>
</amp-audio>
</body>
</html>
输出
使用 controlsList="nodownload" 后，右侧的三个垂直点消失了。
有 preload 和 autoplay 等属性，如果将它们添加到 audio 标签中，音频文件将在页面加载时加载，如果浏览器支持，则会自动播放。以下示例显示了音频自动播放。
示例
<!doctype html>
<html amp lang = "en">
<head>
<meta charset="utf-8">
<script async src = "https://cdn.ampproject.org/v0.js">
</script>
<title>Google AMP - Audio</title>
<link rel = "canonical" href =
"http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
<script async custom-element = "amp-audio"
src = "https://cdn.ampproject.org/v0/amp-audio-0.1.js">
</script>
</head>
<body>
<h3>Google AMP - Audio</h3>
<amp-audio
width = "auto"
height = "50"
src = "audio/test.mp3" preload autoplay>
<div fallback>
<p>HTML5 audio is not supported on your browser!</p>
</div>
</amp-audio>
</body>
</html>
输出
如果存在属性 loop，则在完成后会再次播放音频。
示例
<amp-audio
width = "auto"
height = "50"
src = "audio/test.mp3" loop>
<div fallback>
<p>HTML5 audio is not supported on your browser!</p>
</div>
</amp-audio>
Google AMP - Html 页面到 Amp 页面
在本章中，我们将了解如何将普通 html 页面转换为 amp 页面。我们还将验证页面是否为 amp，并在最后检查输出。
首先，让我们以普通 html 页面为例，如下所示 −
test.html
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Tutorials</title>
<link href = "style.css" rel = "stylesheet" />
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<script src = "js/jquery.js"></script>
</head>
<body>
<header role = "banner">
<h2>Tutorials</h2>
</header>
<h2>Some Important Tutorials List</h2>
<article>
<section>
<img src = "images/tut1.png" width="90%" height = "90%"/>
</section>
<section>
<img src = "images/tut2.png" width="90%" height = "90%"/>
</section>
<section>
<img src = "images/tut3.png" width="90%" height = "90%"/>
</section>
<section>
<img src = "images/tut4.png" width="90%" height = "90%"/>
</section>
</article>
<footer>
<p>For More tutorials Visit <a href =
"https://tutorialspoint.com/">Tutorials Point</a></p>
</footer>
</body>
</html>
请注意，我们在其中使用了 style.css，css 文件的详细信息如下所示 −
h1 {color: blue;text-align: center;}
h2 {text-align: center;}
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}
article {
text-align: center;
}
header{
width: 100%;
height: 50px;
margin: 5px auto;
border: 1px solid #000000;
text-align: center;
background-color: #ccc;
}
footer {
width: 100%;
height: 35px;
margin: 5px auto;
border: 1px solid #000000;
text-align: center;
background-color: yellow;
}
请注意，我们还在上面列出的 .html 中使用了 jquery.js 文件。
现在，在本地托管 test.html 并查看此处给出的链接中的输出 −
http://localhost:8080/googleamp/test.html
现在，让我们一步一步将上面的 test.html 文件更改为 test_amp.html 文件。
首先，我们必须将 test.html 保存为 test_amp.html，然后按照下面给出的步骤操作。
步骤 1 −在 head 部分添加 amp 库，如下所示 −
<script async src = "https://cdn.ampproject.org/v0.js"> </script>
例如，一旦添加到 test_amp.html，它将如下所示 −
<head>
<meta charset = "utf-8">
<title>Tutorials</title>
<script async src = "https://cdn.ampproject.org/v0.js">
</script>
<link href = "style.css" rel = "stylesheet" />
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<script src = "js/jquery.js"></script>
</head>
现在在浏览器中运行页面 test_amp.html 并打开浏览器控制台。它将显示控制台消息，如下所示 −
要知道您的 html 文件是否为有效的 amp，请在末尾的 html 页面网址中添加 #development=1，如下所示 −
http://localhost:8080/googleamp/test_amp.html#development=1
在浏览器和 Google Chrome 控制台中点击上述网址。它将列出 amp 认为从 amp 规范角度来看无效的错误。
我们遇到的 test_amp.html 错误显示在此处 −
现在让我们逐一修复它们，直到我们收到 amp 成功消息。
步骤 2 − 我们可以在控制台中看到以下错误 −
我们可以通过在 html 标签中添加 ⚡ 或 amp 来修复它。我们将 amp 添加到 html 标签，如下所示 −
<html amp>
步骤 3 − 请确保 head 标签中的 meta 标签包含 charset 和 name="viewport"，如下所示 −
<head> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1.0"> </head>
步骤 4 − 我们遇到的下一个错误显示在这里 −
它在 link rel=stylesheet 中显示 href，即以下链接抛出错误。这是因为 amp 不允许使用带有 href 的链接将外部样式表放在页面内。
<link href = "style.css" rel = "stylesheet" />
我们可以在 style.css 中添加所有 css，如下所示 −
<style amp-custom>
/*请在此处添加 style.css 中的所有样式 */
</style>
因此 style.css 中存在的 css 数据必须添加到具有 amp-custom 属性的样式中。
<style amp-custom>
h1 {color: blue;text-align: center;}
h2 {text-align: center;}
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}
article {
text-align: center;
}
header{
width: 100%;
height: 50px;
margin: 5px auto;
border: 1px solid #000000;
text-align: center;
background-color: #ccc;
}
footer {
width: 100%;
height: 35px;
margin: 5px auto;
border: 1px solid #000000;
text-align: center;
background-color: yellow;
}
</style>
将 style 标签添加到您的 amp 页面。现在让我们在浏览器中使用上述 style 标签进行测试。我们迄今为止对 test_amp.html 所做的更改显示在此处 −
<!DOCTYPE html>
<html amp>
<head>
<meta charset = "utf-8">
<title>Tutorials</title>
<script async src = "https://cdn.ampproject.org/v0.js">
</script>
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<script src = "js/jquery.js"></script>
<style amp-custom>
h1 {color: blue;text-align: center;}
h2 {text-align: center;}
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}
article {
text-align: center;
}
header{
width: 100%;
height: 50px;
margin: 5px auto;
border: 1px solid #000000;
text-align: center;
background-color: #ccc;
}
footer {
width: 100%;
height: 35px;
margin: 5px auto;
border: 1px solid #000000;
text-align: center;
background-color: yellow;
}
</style>
</head>
<body>
<header role = "banner">
<h2>Tutorials</h2>
</header>
<h2>Some Important Tutorials List</h2>
<article>
<section>
<img src = "images/tut1.png" width = "90%" height = "90%"/>
</section>
<section>
<img src = "images/tut2.png" width = "90%" height = "90%"/>
</section>
<section>
<img src = "images/tut3.png" width = "90%" height = "90%"/>
</section>
<section>
<img src = "images/tut4.png" width="90%" height = "90%"/>
</section>
</article>
<footer>
<p>For More tutorials Visit <a href =
"https://tutorialspoint.com/">Tutorials Point</a></p>
</footer>
</body>
</html>
让我们看看上面页面控制台中的输出和错误。观察以下屏幕截图 −
控制台中显示的错误如下 −
现在，您可以看到，对于 amp 的一些错误，样式已被删除。现在让我们修复剩余的错误。
步骤 5 −我们在列表中看到的下一个错误如下 −
我们添加了调用 jquery 文件的脚本标记。请注意，amp 页面不允许页面中出现任何自定义 javascript。我们必须将其删除并确保使用可用的 amp-component。
例如，如果需要任何动画，我们有 amp-animation;如果我们想将 Google Analytics 代码添加到页面，我们有 amp-analytics。同样，我们有 amp-ad 组件来显示要在页面上显示的广告。还有一个 amp-iframe 组件，我们可以将 src 指向相同的来源，并在 amp-iframe 中调用任何自定义 javascript(如果需要)。
现在，让我们从页面中删除脚本标记。
第 6 步 − 显示的下一个错误显示在此处 −
上述错误指向我们在页面上使用的图像标记。Amp 不允许在页面内使用 <img src="" /> 标签。请注意，我们需要改用 amp-img 标签。
让我们用 <amp-img> 替换 <img> 标签，如下所示 −
<section>
<amp-img alt = "Beautiful Flower"
src = "images/tut1.png"
width = "500"
height = "160"
layout = "responsive">
</amp-img>
</section>
<section>
<amp-img alt = "Beautiful Flower"
src = "images/tut2.png"
width = "500"
height = "160"
layout = "responsive">
</amp-img>
</section>
<section>
<amp-img alt = "Beautiful Flower"
src = "images/tut3.png"
width = "500"
height = "160"
layout = "responsive">
</amp-img>
</section>
<section>
<amp-img alt = "Beautiful Flower"
src = "images/tut4.png"
width = "500"
height = "160"
layout = "responsive">
</amp-img>
</section>
如上所示，我们已将所有 <img> 标签替换为 <amp-img>。现在，让我们在浏览器中运行页面以查看输出和错误 −
错误
观察错误现在越来越少了。
第 7 步 −控制台中显示的下一个错误如下 −
我们需要在 head 部分添加 link rel=canonical 标签。请注意，这是一个必需的标签，应始终在 head 中添加，如下所示 −
<link rel = "canonical" href ="http://example.ampproject.org/article-metadata.html">
步骤 8 −控制台中显示的下一个错误是缺少 noscript 标签，如下所示 −
我们需要在 head 部分添加用 amp-boilerplate 括起来的 <noscript> 标签，如下所示 −
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
第 9 步 − 显示的下一个错误如下所示 −
另一个必需标签是带有 amp-boilerplate 的 style 标签，必须放在 noscript 标签之前。带有 amp-boilerplate 的 style 标签如下所示 −
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
将上述样式标签添加到 test_amp.html 页面。
完成后，在浏览器中测试页面以查看输出和控制台 −
控制台详细信息显示在此处 −
因此，我们终于解决了所有错误，现在页面 test_amp.html 是一个有效的 amp 页面。
由于页眉和页脚被截断，因此需要添加一些样式，我们可以在添加的自定义样式中更新它们。因此我们从页眉和页脚中删除了 width:100%。
这是最终输出 −
最终 test_amp.html 文件
<!DOCTYPE html>
<html amp>
<head>
<meta charset = "utf-8">
<title>Tutorials</title>
<link rel = "canonical" href=
"http://example.ampproject.org/article-metadata.html">
<script async src = "https://cdn.ampproject.org/v0.js">
</script>
<meta name = "viewport" content = "width = device-width,
initial-scale = 1.0">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
<style amp-custom>
h1 {color: blue;text-align: center;}
h2 {text-align: center;}
amp-img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}
article {
text-align: center;
}
header{
height: 50px;
margin: 5px auto;
border: 1px solid #000000;
text-align: center;
background-color: #ccc;
}
footer {
height: 35px;
margin: 5px auto;
border: 1px solid #000000;
text-align: center;
background-color: yellow;
}
</style>
</head>
<body>
<header role = "banner">
<h2>Tutorials</h2>
</header>
<h2>Some Important Tutorials List</h2>
<article>
<section>
<amp-img
alt = "Beautiful Flower"
src = "images/tut1.png"
width = "500"
height = "160"
layout = "responsive">
</amp-img>
</section>
<section>
<amp-img
alt = "Beautiful Flower"
src = "images/tut2.png"
width = "500"
height = "160"
layout = "responsive">
</amp-img>
</section>
<section>
<amp-img
alt = "Beautiful Flower"
src = "images/tut3.png"
width = "500"
height = "160"
layout = "responsive">
</amp-img>
</section>
<section>
<amp-img
alt = "Beautiful Flower"
src = "images/tut4.png"
width = "500"
height = "160"
layout = "responsive">
</amp-img>
</section>
</article>
<footer>
<p>For More tutorials Visit <a href =
"https://tutorialspoint.com/">
Tutorials Point</a>
</p>
</footer>
</body>
</html>
这样，我们终于完成了将普通 html 文件转换为 amp 的工作。
Google AMP - 基本语法
在本章中，我们将讨论开始使用 Google AMP 页面的基本要求。
示例 Amp 页面
下面显示了 amp 页面的基本示例 −
<!doctype html>
<html amp>
<head>
<meta charset = "utf-8">
<title>Amp Sample Page</title>
<link rel = "canonical" href = "./regular-html-version.html">
<meta name = "viewport" content = "width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-custom>
h1 {color: red}
</style>
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
<script async src = "https://cdn.ampproject.org/v0.js">
</script>
</head>
<body>
<h1>Amp Sample Page</h1>
<p>
<amp-img
src = "images/christmas1.jpg"
width = "300"
height = "300"
layout = "responsive">
</amp-img>
</p>
</body>
</html>
强制标签
amp 页面中必须包含一些强制标签。本节将详细讨论这些标签 −
我们必须确保将 amp 或 ⚡ 添加到 html 标签中，如下所示
<html amp> OR <html ⚡>
我们应该将 <head> 和 <body> 标签添加到 html 页面。
如果您遗漏任何必需的元标签，Amp 验证可能会失败。此处显示了一些必须添加到页面头部的必需 mets 标签 −
<meta charset="utf-8">
<meta name = "viewport"
content = "width = device-width,
minimum-scale = 1,
initial-scale = 1">
rel="canonical" 的链接将添加到 head 标签内
<link rel = "canonical" href = "./regular-html-version.html">
使用 amp-boilerplate 样式标签 −
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
带有 amp-boilerplate 的 Noscript 标签 −
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
添加了 async 的 amp script 标签如下所示。这是所有标签中最重要的 −
<script async src = "https://cdn.ampproject.org/v0.js"> </script>
如果您想向页面添加自定义 css，则应使用此标签。请注意，我们无法在 amp 页面中调用外部样式表。要添加自定义 css，您的所有 css 都必须放在此处 −
<style amp-custom> //all your styles here </style>
您可以在浏览器中使用页面 URL 末尾的 #developement=1 验证上述页面。
现在，让我们在浏览器中测试一下。我已在本地托管该页面并将其保存为 amppage.html。
要测试的上述 URL 是
http://localhost/googleamp/amppage.html#development=1
示例
<!doctype html>
<html amp>
<head>
<meta charset = "utf-8">
<title>Amp Sample Page</title>
<link rel = "canonical" href = "./regular-html-version.html">
<meta name = "viewport" content = "width=device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-custom>
h1 {color: red}
</style>
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
<script async src = "https://cdn.ampproject.org/v0.js">
</script>
</head>
<body>
<h1>Amp Sample Page</h1>
<p>
<amp-img
src = "images/christmas1.jpg"
width = "300"
height = "250"
layout = "responsive">
</amp-img>
</p>
</body>
</html>
输出
您可以在开发者控制台中看到 amp 验证状态，如下所示 −
由于我们已为有效 amp 页面添加了所有必需的强制标签，因此它显示 AMP 验证成功。
Google AMP - 验证
Google AMP 是一种让网页在设备上加载速度更快的方法。要使用 amp，我们可以使用 HTML5、CSS 和 amp-components。
Google Amp 提供了多种验证 amp 页面的方法。我们将在本章中讨论的一些重要内容是 −
使用 #development=1
使用 Amp Validator
使用命令行
让我们详细讨论一下它们。
使用 #development =1
一旦您知道您的页面已准备好进行验证，只需将 #development=1 添加到页面网址的末尾，然后在 chrome 开发人员工具中对其进行测试。
您可以在末尾将 #development=1 添加到您的 html 页面网址中，如下例所示 −
http://localhost:8080/googleamp/test_amp.html#development=1
在浏览器和 Google Chrome 控制台中点击上述网址。它将列出 amp 认为从 amp 规范角度来看无效的错误。
以下是 test_amp.html 的错误。
您可以修复显示的错误，一旦修复了所有错误，它将显示如下 −
使用 Amp Validator
Amp 有一个验证器工具，我们可以在其中输入 HTML 内容，它会显示状态为 PASS 或 ERROR，并在页面上显示错误。链接是 − https://validator.ampproject.org/
amp 验证工具的显示如下所示 −
页面内容中的错误示例如下所示 −
使用命令行
您可以使用以下命令安装 npm 包 −
npm install -g amphtml-validator
我们创建了一个文件夹 amptest/ 并在该文件夹中保存了 amp_test.html 文件。让我们在命令行中使用以下命令验证 amp_test.html。
amphtml-validator youramppage.html
让我们从页面中删除一些标签，看看它是否显示错误。
显示的错误可以修复，直到我们获得 PASS 状态。
Google AMP - 缓存
Google amp 提供缓存功能，这是一种基于代理的内容交付网络，用于提供纯 amp 页面。默认情况下，所有有效的 amp 页面都可使用 Amp 缓存。与非 amp 页面相比，它有助于更快地呈现页面。
目前，有 2 个 amp 缓存提供商 Google AMP Cache 和 Cloudflare AMP Cache。如前所述，amp 缓存可供所有有效的 amp 页面使用。如果用户不想使用 amp 缓存功能，您需要使您的 amp 页面无效。 Amp 缓存不适用于无效的 amp 页面。
Google 搜索抓取并找到 html 内容的 amp(< html amp >)时，它会考虑缓存。
在本节中，我们将讨论 Google amp 缓存 URL 的各个组成部分。
子域
Google AMP 会将子域添加到请求的 URL。amp 缓存子域 URL 遵循一些规则。它们显示在此处 −
子域缓存 URL 规则
将 AMP 文档域从 IDN(Punycode)转换为 UTF-8。
URL 中的破折号 (-) 被替换为两个破折号 (--)
URL 中的点 (.) 被替换为破折号 (-)。
转换回 IDN(Punycode)。
例如 pub.mypage 将被替换为 pub-mypage.cdn.ampproject.com。此处 cdn.ampproject.com 是 google amp 添加的子域。现在缓存的 URL 是 Pub-mypage.cdn.ampproject.com。
内容类型
可用的内容类型为 c(AMP HTML 文档)、i(图像)和 r(资源，例如字体)。如果内容类型与指定的类型不匹配，您将收到 404 错误。
可选的"s"
如果存在 s，则将从源 https:// 获取内容;否则，它将从 http:// 获取
此处显示了从 https 和 http 请求缓存图像的示例 −
示例
https://pub-mypage-com.cdn.ampproject.org/i/s/examples/images/testimage.png
因此，在上面的示例中，url 具有 i(表示图像)和 s(表示 https) −
示例
http://pub-mypage-com.cdn.ampproject.org/i/examples/images/testimage.png
因此，在上面的示例中，url 具有 i(表示图像)并且没有 s，因此将从 http 获取 url。
对于字体缓存文件，url 将如下所示 −
示例
https://pub-mypage-com.cdn.ampproject.org/r/s/examples/themes/lemon/fonts/Genericons.ttf
内容类型 r 用于字体等资源，s 用于安全 url。
对于 html 文档，url 如下所示 −
示例
https://pub-mypage-com.cdn.ampproject.org/c/s/trends/main.html
url 中的 c 表示 HTML 文档，后面跟着 s 表示https://
Google AMP 缓存使用 http 标头(如 Max-age)来决定内容缓存是过时的还是新鲜的，并自动发送新请求并更新内容，以便下一个用户获得更新的内容。
Google AMP - 自定义 Javascript
在前面的章节中，我们研究了许多 amp 组件。我们还看到，要使每个组件正常工作，我们需要添加一个 javascript 文件。
例如，对于 amp-iframe，添加的脚本如下 −
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"> </script>
我们在脚本标签中添加了 async。这是 amp 的标准，因为它们异步加载所有 javascript 文件。添加了 custom-element 属性，该属性具有所用组件的名称。
要使用任何 amp-component(如果它不是核心 amp javascript 文件的一部分)，必须添加脚本，如上所示。
我们主要习惯于在页面内编写大量 javascript 代码，并使用脚本标记包含 javascript 文件。
我们如何在 amp 中做到这一点?因此，AMP 不允许编写任何脚本代码或从外部加载脚本标记。
Amp 有自己的组件来处理应该由页面上添加的附加脚本完成的工作。这样做主要是出于性能方面的考虑，以便更快地加载页面内容，而不会让 javascript 延迟渲染或对 DOM 进行任何更改。
这是 AMP 在其官方网站中针对脚本标记 −
给出的规范除非类型为 application/ld+json，否则禁止使用。(可以根据需要添加其他不可执行的值。)例外情况是加载 AMP 运行时的必需脚本标记和加载扩展组件的脚本标记。
此处显示了一个我们可以在 amp 页面中使用 application/ld+json 的工作示例。请注意，我们使用 type="application/ld+json" 的脚本标记来为 amp-analytics 组件触发跟踪器。
同样，我们可以根据需要在其他 amp-components 上使用 type="application/ld+json" 的脚本标记。
示例
<!doctype html>
<html amp>
<head>
<meta charset = "utf-8">
<title>amp-analytics</title>
<script async src = "https://cdn.ampproject.org/v0.js">
</script>
<script async custom-element = "amp-analytics"
src = "https://cdn.ampproject.org/v0/amp-analytics-0.1.js">
</script>
<link rel = "canonical" href = "ampanalytics.html">
<meta name = "viewport" content = "width=device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
</head>
<body>
<h1>Google Amp - Analytics</h1>
<amp-analytics>
<script type = "application/json">
{
"requests": {
"event": "http://localhost:8080/googleamp/tracking.php?
user=test&account=localhost&event=${eventId}"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "event",
"vars": {
"eventId": "pageview"
}
}
}
}
</script>
</amp-analytics>
</body>
</html>
当浏览器点击页面时，跟踪器将针对页面浏览量触发。可以在 Google 网络标签中看到它，如下所示。
Google AMP - Cors
在本章中，我们将尝试了解 AMP 中的 CORS。在深入了解细节之前，让我们先了解一下 CORS 的基础知识及其用途。
什么是 CORS?
CORS 代表跨源资源共享。CORS 是一个需要额外 HTTP 标头数据的过程，用于告诉浏览器是否应该授予在 xyz.com 源运行的网页对 URL 发出的请求以访问请求 URL 中的数据的权限。我们从网页发出许多 http 请求，为此我们需要有 CORS 来获取所需的数据。
当我们向主机以外的服务器发出 http 请求时，我们将其称为跨源请求，这意味着域、协议和端口与主机源不同。在这种情况下，应该有来自请求的 URL 的访问数据的权限;表示已发出 GET/PUT/POST/DELETE 请求。
此附加数据可在浏览器标头中用于发出的 http 请求调用。此步骤的权限基本上是出于安全原因而必需的，以便没有所需权限的网页无法从其他域创建或获取数据。
浏览器的标头应包含详细信息，例如 Access-Control-Allow-Origin，其值可以如下所示 −
Access-Control-Allow-Origin : *
请求 URL 标头具有值 * 意味着它告诉浏览器允许从任何来源请求数据来访问资源。
Access-Control-Allow-Origin: https://www.example.com
具有上述值会告诉浏览器，来自网页 www.example.com 的请求将仅被允许获取所请求 URL 的数据。
服务器配置在使用 CORS 时，必须牢记共享数据的使用方式。根据此情况，必须在服务器端设置所需的标头。
现在我们知道了什么是 CORS，让我们再进一步。对于 amp，我们有 amp-form、amp-list 等组件，它们使用 http 端点动态加载数据。
对于 amp 页面，即使 http 请求来自同一来源，我们也需要设置 CORS。这里出现了一个问题 - 为什么即使请求和响应来自同一来源，我们也要启用 CORS。从技术上讲，在这种情况下我们不需要启用 CORS，因为我们正在请求和显示同一域、来源等的数据。
Amp 有一个称为缓存的功能，它被添加以便更快地将数据发送给访问页面的用户。如果用户已经访问过该页面，数据将缓存在 google cdn 上，下一个用户将从缓存中获取数据。
数据存储在 amp 端，现在具有不同的域。当用户单击任何按钮以获取新数据时，将 amp 缓存 url 与网页域进行比较以获取新数据。现在，如果未启用 CORS，因为它处理 amp 缓存 url 和网页域，则请求将无效，并且将因 CORS 权限而失败。这就是为什么我们需要在 amp 页面的情况下启用 CORS，即使对于同源也是如此。
此处显示了使用启用了 CORS 的表单的工作示例 −
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js">
</script>
<title>Google AMP - Form</title>
<link rel = "canonical" href = "ampform.html">
<meta name = "viewport" content = "width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
<script async custom-element = "amp-form"
src = "https://cdn.ampproject.org/v0/amp-form-0.1.js">
</script>
<script async custom-template = "amp-mustache"
src = "https://cdn.ampproject.org/v0/amp-mustache-0.2.js">
</script>
<style amp-custom>
form.amp-form-submit-success [submit-success],
form.amp-form-submit-error [submit-error]{
margin-top: 16px;
}
form.amp-form-submit-success [submit-success] {
color: white;
background-color:gray;
}
form.amp-form-submit-error [submit-error] {
color: red;
}
form.amp-form-submit-success.hide-inputs > input {
display: none;
}
</style>
</head>
<body>
<h3>Google AMP - Form</h3>
<form
method = "post"
class = "p2"
action-xhr = "submitform.php"
target = "_top">
<p>AMP - Form Example</p>
<div>
<input
type = "text"
name = "name"
placeholder = "Enter Name" required>
<br/>
<br/>
<input
type = "email"
name = "email"
placeholder = "Enter Email"
required>
<br/>
<br/>
</div>
<input type = "submit" value = "Submit">
<div submit-success>
<template type = "amp-mustache">
Form Submitted! Thanks {{name}}.
</template>
</div>
<div submit-error>
<template type = "amp-mustache">
Error! {{name}}, please try again.
</template>
</div>
</form>
</body>
</html>
submitform.php
<?php
if(!empty($_POST)){
$domain_url = (isset($_SERVER['HTTPS']) ? "https" : "http") .
"://$_SERVER[HTTP_HOST]";
header("Content-type: application/json");
header("AMP-Access-Control-Allow-Source-Origin: " . $domain_url);
header("Access-Control-Expose-Headers:
AMP-Access-Control-Allow-Source-Origin");
$myJSON = json_encode($_POST);
echo $myJSON;
}
?>
输出
添加到 submitform.php 的响应标头的详细信息 −
为了使表单正常工作，我们需要添加标头，例如 access-control-expose-headers，其值为 AMP-Access-Control-Allow-Source-Origin 和 amp-access-control-allow-source-origin − http://localhost:8080。
这里我们使用 php 文件，使用的服务器是 apache。在 php 文件中，我们添加了所需的标头，如下所示 −
<?php
if(!empty($_POST)){
$domain_url = (isset($_SERVER['HTTPS']) ? "https" : "http") .
"://$_SERVER[HTTP_HOST]";
header("Content-type: application/json");
header("AMP-Access-Control-Allow-Source-Origin: " . $domain_url);
header("Access-Control-Expose-Headers:
AMP-Access-Control-Allow-Source-Origin");
$myJSON = json_encode($_POST);
echo $myJSON;
}
?>
添加所需的标头后，将允许源 http://localhost:8080 进行交互并获取数据。
