AMP
EN
Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

我们的第一个 AMP 页面

专家模式关闭

专家模式

使用专家模式可以隐藏为初学者提供的 Web 开发指导。

开始我们的旅程

这是我们团队构建 Chico's Cheese Bike 网站的第一天。到目前为止，该网站是一个基本的 HTML 页面，其中包含网站标题的页眉、我们的一辆自行车的图片和一些营销文字。

我们基本的 HTML 网站

在您的 Glitch 项目中，打开 index.html 并验证 HTML 是否如下所示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Chico's Cheese Bicycles</title>
    <link
      rel="shortcut icon"
      href="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fcheese-favicon.png?1540228964214"
    />
  </head>
  <body>
    <header class="headerbar"><h2>Chico's Cheese Bicycles</h2></header>
    <main>
      <div class="main-content">
        <img
          src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fricotta-racer.jpg?1540228217746"
        />
        <div class="below-hero">
          <h2 class="main-heading">What we're about</h2>
          <p class="main-text">
            We sell the only ten-speed bicycles in the world made entirely of
            cheese. They get you where you need to go, and you never arrive
            hungry. Our bikes are 100% biodegradable. And with our new
            rodent-repelling varnish they last longer than ever!
          </p>
        </div>
      </div>
    </main>
  </body>
</html>

我们的团队已确定使用 AMP 将更容易构建我们想要的网站功能，因此我们的工作是将此 HTML 页面转换为有效的 AMP 页面。

首先，我们需要向世界表明我们正在尝试构建一个 AMP 网站。为此，我们将为我们的 <html> 标签添加一些修饰。如果 <html> 标签包含 ⚡ 符号或单词 amp，则 AMP 验证器和 AMP 缓存等工具会将我们的网站视为 AMP 网站。

在您的 Glitch 项目中，将 ⚡ 符号添加到 <html> 标签中，如下所示

<html ⚡ lang="en">

此符号至关重要。它表明我们正在制作 AMP 网站。接下来，我们将讨论诸如 AMP 验证器之类的工具如何帮助我们确定使网站有效所需的更改。

验证和 AMP 缓存

我们已经多次提到编写“有效 AMP”的概念。让我们讨论一下这意味着什么以及为什么它很重要。

首先，有效的 AMP 非常重要，因为它对您的用户有利。AMP 的规则代表了性能、可访问性和安全性的最佳实践。因此，验证错误是 AMP 告诉您有改进网站以服务用户的空间的方式！

其次，有效的 AMP 很重要，因为它具有 AMP 缓存的实用性。缓存是 AMP 架构的一个强大组成部分。它是一个内容交付网络 (CDN)，旨在

  • 仅提供有效的 AMP 页面。

  • 允许 AMP 页面被高效安全地预加载。

  • 对缓存中的页面执行多项性能优化。

当用户请求您的 AMP 网站时，他们可能会从靠近他们的 AMP 缓存服务器发送该网站。如果您的网站位于 AMP 缓存中，则当您使用 Google 等搜索引擎时，它可以有效地在后台预加载。如果用户从搜索结果中选择您的网站，即使连接不良，它也会在几秒钟内出现。此外，AMP 缓存将对您的网站执行自动优化，例如

  • 缓存字体。

  • 缓存和压缩图像，并将其转换为较新的格式，如 WebP。

  • 清理 AMP 文档以防止跨站脚本攻击或其他漏洞。

  • 修复可能导致在各种浏览器中呈现不一致的 HTML 问题；即，关闭所有标签、将属性名称转换为小写或转义文本

当您使用 AMP 构建网站并完成这些培训中的练习时，请检查以确保您的网站有效。为了跟踪验证错误，我们将使用我们在课程介绍中安装的 AMP 验证器。

练习 1：使用 AMP 验证器

安装 AMP 验证器 Chrome 扩展程序后，验证器将自动在任何在其 <html> 标签中包含 AMP 符号 (⚡) 的打开页面上运行，就像我们现在一样。打开您的 Glitch 项目并查看 AMP 验证器扩展程序的图标。它应与下面的红色图标类似，徽章指示有 7 个验证错误。

显示 AMP 问题的 AMP 验证器 Chrome 扩展程序。

单击 AMP 验证器的图标会打开一个弹出窗口，其中列出了当前页面的验证错误，并提供了我们问题的一些可能的解决方案。

AMP 验证器 Chrome 扩展程序中显示的问题。

对于有关 <img> 标签的条目

标签 <img> 只能作为标签“noscript”的后代出现。你指的是“amp-img”吗？

单击条目末尾的“调试”链接。“调试”链接会将您直接转到页面上包含列出的错误的代码行。这可以帮助您找到文件中发生的错误，并帮助您提供了解如何修复错误所需的上下文。别担心：这条消息现在看起来可能不清楚，但它很容易修复。我们需要使用 AMP 组件 <amp-img> 而不是 HTML 标签 <img>。在本课程的组件思维部分中，我们将探讨为什么会出现此错误，<amp-img> 是什么以及如何修复它。

AMP 调试器内联显示错误。

对于任何其他验证错误条目，请单击标记为“了解更多”的链接。此链接会将您直接从错误描述转到相应的 AMP 文档，这将帮助您解决问题。

通过 AMP 验证器中的“了解更多”链接访问的 AMP 文档。

注意：无法根据 AMP 验证器扩展程序中的“调试”和“了解更多”选项找出如何纠正错误？请阅读此处提供的验证错误和建议的纠正措施的完整列表。

下一步是修复这些验证错误。为此，我们需要了解更多关于 AMP 页面所需元素的信息。我们不仅需要向 HTML 添加闪电符号才能创建有效的 AMP 页面。

AMP 页面的结构

每个 AMP 页面都从相同的基本模板开始。然后，我们在此基础上自定义和构建页面。此起始模板有时称为 AMP 样板。样板是设置 AMP 运行时并帮助 AMP 页面平稳运行的标签的组合。

在本节中，我们将稍微解释一下 AMP 样板的每个部分。但是，您无需记住在每个使用 AMP 创建的页面上都添加这些标签。您只需使用此样板开始您的未来 AMP 页面即可。

AMP 页面中需要以下标签。有效的 AMP 页面必须

  • 以 <!doctype html> doctype 开始。

  • 同时包含 <head> 和 <body> 标签。

  • 在其 <head> 标签中包含一个 <meta charset="utf-8"> 标签作为第一个子元素。

  • 在其 <head> 标签中包含一个 <meta name="viewport" content="width=device-width"> 标签。注意：还建议包含 initial-scale=1。

以下规则专门用于设置 AMP 运行时。有效的 AMP 页面还必须

  • 包含一个顶级 <html ⚡> 标签。闪电符号表示这是一个 AMP 网站。注意：也接受 <html amp>。

  • 在其 <head> 标签中包含一个 <script async src="https://cdn.ampproject.org/v0.js"></script> 标签。这将加载 AMP JavaScript 库。注意：作为最佳实践，您应该尽早在 <head> 中包含该脚本。

  • 在其 <head> 中包含一个 <link rel="canonical" href="$SOME_URL"> 标签。如果存在，它会指向您网站的常规 HTML 版本，如果没有非 AMP 版本的网站，则指向自身。注意：您应该将上面的 href 属性中的 $SOME_URL 替换为您页面的实际 URL。

  • 在其 <head> 标签中包含 AMP 样式的样板代码。此 CSS 会隐藏页面上的内容，直到 AMP 库完成加载。AMP 样式样板是以下代码片段


<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>

注意：AMP 样板代码必须按原样复制和粘贴。上面的代码已缩小，但如果您在代码上使用自动格式化程序（例如 Prettier），它也可以工作。请确保不要更改上面标签内的文本顺序或更改值。如果您想了解更多有关 AMP 样板中这些标签的含义以及它们为何重要的信息，您可以在附录中阅读相关内容。

CSS 和 AMP

CSS 可以自定义网站的外观。您几乎总是会向 AMP 页面添加自定义样式。但是，请注意 AMP 对 CSS 的使用有一些限制

  • 样式可能只存在于文档头部的 <style amp-custom> 标签内，或者在需要时作为内联 style 属性。此限制可防止加载外部样式表，但也节省了网络请求，实现了缓存并提高了性能。

  • 一个 AMP 页面只能有一个 <style amp-custom> 标签（带有样式的标签）。

  • 页面包含的 CSS 不能超过 75K。

  • !important 规则受到限制。

  • 有关更多不允许或限制的 CSS 规则，请查看此处的文档。

要练习向您的 AMP 页面添加自定义样式，请将以下 <style amp-custom> 标签添加到您页面中的 <head> 中，并查看会发生什么。完成后，您可以从页面中删除样式。

<style amp-custom>
    body {
        font-family: sans-serif;
        line-height: 1.5rem;
        padding: 20px;
    }
    p, h2 {
        border: 1px dotted red;
    }
</style>

影响我们页面的自定义 CSS。

练习 2：转换我们 HTML 页面的其余部分

现在是时候纠正我们在上一个练习中发现的网站上的验证错误了。为此，我们必须将 AMP 样板模板的缺失部分添加到我们的基本 HTML 站点。

对于此练习和所有未来的练习，我们将应用我们所学到的知识，在 Glitch 中对我们的网站进行真实的代码更改。我们会在过程中提供一些提示。在每个练习的结尾，我们将提供完整的解决方案。尝试自己完成练习，但是如果您遇到困难或需要提示，请随时从解决方案部分复制代码。

此外，在每个课程的开始和结束时，我们都会提供一个 Glitch 模板，其中包含到目前为止我们完成的所有代码。如果您丢失了当前的 Glitch 页面或想从我们的解决方案开始，您可以从这些 Glitch 示例中复制代码，或者直接重新混合这些示例并从那里继续。

使用 AMP 样板的文档和上面的注释，更新您的 Glitch 项目，以便仅保留 <img> 标签验证错误。此外，为了帮助我们构建 Chico's Cheese Bikes 网站，我们提供了一些在整个培训中使用的 CSS。如果您打开此页面，您会看到带有您需要的样式的 <style amp-custom> 标签。您应该将这些样式复制到您正在处理的项目中。

解决方案

可以在此 Glitch 示例中找到解决方案。包含更改的页面部分应如下所示

<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Chico's Cheese Bicycles</title>
  <link rel="shortcut icon" href="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fcheese-favicon.png?1540228964214">
  <meta name="viewport"
      content="width=device-width,minimum-scale=1,initial-scale=1">
  <link rel="canonical" href="https://hungry-modem.glitch.me/">
  <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>
    ... styles elided due to length ...
  </style>
</head>

一个有效的 AMP 页面...几乎

如果您完成了上述所有练习，恭喜！您的页面几乎是一个有效的 AMP 页面。如果您打开您的页面和 Chrome DevTools（Mac 上为 Command+Option+I，Windows/Linux 上为 Control+Shift+I），然后选择控制台选项卡，您应该在控制台中看到此消息，表明 AMP 库已成功加载

Powered by AMP ⚡ HTML

接下来，如果您打开 AMP Validator 扩展，它会显示我们只剩下一个错误了

The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'?

这是一个需要理解的重要错误。某些 HTML 标记在 AMP 文档中是不允许的。在某些情况下，AMP 要求您使用替代方案。我们将这些自定义的、非标准的 HTML 标记称为“组件”，我们将在本培训的下一部分中更详细地讨论它们。

注意：您可以使用此处的 HTML 作为起点开始您未来的 AMP 页面。此 HTML 包括上面的 AMP 样板。它包含到目前为止我们已经介绍过的所有必需的标记和元素。或者，您可以使用 此处的样板生成工具使用其他功能自定义您的起点。

上一章 下一章