Do you build things with AMP? Fill out the new AMP Developer Survey!
AMP

构建一个常规的 HTML 网页

在项目目录中,您会看到一个名为 article.html 的文件。这是一篇新闻报道,我们就是要为它构建一个等效的 AMP 网页。

  1. article.html 文件中复制完整代码,并将其粘贴到一个新文件中。
  2. 将这个新文件保存article.amp.html

您无需将 AMP 文件命名为 .amp.html。实际上,AMP 文件可使用您想要的任何扩展名。发布商往往会通过在网址中使用参数来区分 AMP 网页和其权威版本。例如:http://publisher.com/article.html?amp

您的 article.amp.html 文件应该大致如下:

<!doctype html>
<html lang="en">
  <head>

    <title>News Article</title>

    <link href="base.css" rel="stylesheet" />

    <script type="text/javascript" src="base.js"></script>
  </head>
  <body>
    <header>
      News Site
    </header>
    <article>
      <h1>Article Name</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>
    </article>
    <img src="mountains.jpg">
  </body>
</html>

这个网页可能有点过于简单,但我们是有意为之,在其中仅添加了常见的静态新闻报道元素:CSS、JavaScript 和一个图片代码。

现在,这篇报道的 AMP 版本尚且只是原报道的副本。接下来,我们就逐步将其转换成 AMP 网页。

首先,我们需要添加 AMP 库文件。仅凭此步骤并不能将您的新文件转换成有效的 AMP 网页,不过下文会介绍 AMP 库可如何帮助我们确定还需执行哪些操作。

要添加 AMP 库,请将下面这行内容添加<head> 标记底部:

<script async src="https://cdn.ampproject.org/v0.js"></script>

在浏览器中访问 http://localhost:8000/article.amp.html,以加载 article.amp.html 这一新网页,然后,在 Chrome(或您喜爱的浏览器)中打开开发者控制台

在开发者控制台中检查 JavaScript 输出时(请确保您已选中“Console”标签),您应该会看到下面这个日志条目:

Powered by AMP ⚡ HTML

AMP 库中含有 AMP 验证工具,它会显示是否存在任何会导致您的网页无法成为有效 AMP 文档的问题。要启用 AMP 验证工具,请将以下分段标识符添加到您的文档网址中:

#development=1

例如:

http://localhost:8000/article.amp.html#development=1

在开发者控制台中,您应该会收到几条验证错误消息(您可能需要在浏览器中手动刷新网页才能看到这些错误):

我们所用示例的 AMP 验证错误

为了让该网页成为有效的 AMP 文档,我们必须修正所有这些错误 - 这也正是我们要在此代码实验室中做的工作。

由于我们是要处理一篇移动版新闻报道,因此在开始修正错误之前,我们最好先在浏览器的开发者工具中模拟移动设备体验。例如,在 Chrome DevTools 中,点击手机图标,然后从菜单中选择一种移动设备。

您应该会在浏览器中看到该 AMP 网页的移动版模拟效果,如下所示:

我们的 AMP 网页的移动版模拟效果

现在,我们可以开始修正错误了!我们将逐个查看各项验证错误,并弄清楚它们与 AMP 的关系。