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 的关系。