AMP专题-预览和验证

就像您预览任何其他静态 HTML 网站一样预览 AMP 页面。无需编译步骤或进行预处理。请执行以下任一操作:

通过文件系统在浏览器中直接打开该页面(某些元素可能会因为 XMLHttpRequests 失败而无法工作)。
使用本地 Web 服务器,比如 Apache 2 或 Nginx。 (结构化数据 对于快速 Web 服务器,请运行 python -m SimpleHTTPServer。)
接下来,确保您的 AMP 页面是实际有效的 AMP,或者它不会被第三方平台(如 Google 搜索)发现和分发。要进行验证:

在浏览器中打开您的页面。
向 URL 中添加“#development=1”,例如,http://localhost:8000/released.amp.html#development=1。
打开 Chrome DevTools 控制台,并检查是否有验证错误。

AMP专题-修改呈现形式和布局

修改呈现形式
AMP 是一些网页;页面及其元素的任何样式设置操作都是使用常见 CSS 属性完成的。使用类或 <head> 中名为 <style amp-custom> 的内联样式表中的元素选择器来设置元素的样式:

<style amp-custom>
 /* any custom style goes here */
 body {
 background-color: white;
 }
 amp-img {
 background-color: gray;
 border: 1px solid black;
 }
</style>

 

每个 AMP 页面都只有一个嵌入的样式表,并且还有一些不允许您使用的选择器。了解所有样式设置相关信息。

控制布局
在页面上进行元素布局时,AMP 遵循更严格的规则。在常规 HTML 页面上,您几乎完全使用 CSS 来设置元素布局。但是,出于性能原因,AMP 要求所有元素从一开始就必须设置显式的大小。

如需详细了解 AMP 如何渲染页面和设置页面布局,以及如何修改布局,请参阅如何控制布局。

AMP专题-包括图像

大多数 HTML 标记都可在 AMP HTML 中直接使用,但某些标记(例如 <img> 标记)被替换为等效标记或略微增强的自定义 AMP HTML 标记(少数存在问题的标记会被完全禁止使用,请参阅规范中的 HTML 标记)。

以下是在页面中嵌入图像所需的代码,用于演示其他标记是什么样的:

<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>

AMP专题-创建 AMP HTML 页面

以下标记是一个不错的起点或样板文件。 复制此标记,并将其保存为扩展名为 .html 的文件。

<!doctype html>
<html amp lang="en">
 <head>
 <meta charset="utf-8">
 <title>Hello, AMPs</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">
 <script type="application/ld+json">
 {
 "@context": "http://schema.org",
 "@type": "NewsArticle",
 "headline": "Open-source framework for publishing content",
 "datePublished": "2015-10-07T12:02:41Z",
 "image": [
 "logo.jpg"
 ]
 }
 </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>Welcome to the mobile web</h1>
 </body>
</html>

到目前为止,正文中的内容相当简单。但页面最前面有一些可能并非立即显而易见的额外代码。让我们解构一下所需的标记。

所需的标记

AMP HTML 文档必须:

以文档类型 <!doctype html> 开头
包含顶级 <html ⚡> 标记(也接受 <html amp>)
包含 <head> 和 <body> 标记(这些标记在 HTML 中是可选的)
在<head>内包含一个 <link rel="canonical" href="$SOME_URL"> 标记,该标记指向 AMP HTML 文档的常规 HTML 版本,或在此类 HTML 版本不存在的情况下指向文档本身
包含 <meta charset="utf-8"> 标记作为<head>标记的第一个子项
在<head>标记内包含 <meta name="viewport" content="width=device-width,minimum-scale=1"> 标记。还建议包括 initial-scale=1
包含 <script async src="https://cdn.ampproject.org/v0.js"></script> 标记作为<head>中的最后一个元素(这样做将会包括并加载 AMP JS 库)
在其 <head> 标记内包含以下内容: <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>中包括了 Schema.org 定义,该定义不是对 AMP 的严格要求,但必须满足才能在某些地方(例如在 Google 搜索新闻轮播演示(请在您的手机上尝试))分发内容。

如需详细了解在各类其他地方(例如 Twitter)需要的所有元数据,请浏览我们的示例。如需具体了解 Google 搜索中的 AMP,请参阅 AMP 头条新闻。

这就是创建第一个 AMP 页面所需的全部内容,当然在正文中还有很多工作要做。在下一部分中,我们将介绍如何添加像图像、自定义 AMP 元素这样的基本内容,如何设置页面样式,以及如何实现响应式布局。