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

查找合适的组件

专家模式关闭

专家模式

使用专家模式来隐藏面向初学者的 Web 开发指导。

到目前为止，我们使用的组件都相当简单。对于 <amp-img> 和 <amp-youtube>，访问文档，查看一个示例，并将其复制到我们的网站就足够了。对于这些组件的更高级功能，或者对于更复杂的组件，我们需要从文档中读取和吸收更多信息。

为了有效地开发 AMP 网站，学习如何浏览 AMP 组件文档非常重要。在本系列培训的每一部分中，我们将广泛地练习这项技能。

接下来，我们想要添加一组奶酪自行车产品的图片，供用户滚动浏览。为此，我们将使用图片轮播组件。轮播是一个包含一组项目的元素，可以像幻灯片一样滑动浏览。AMP 对轮播的实现是组件：<amp-carousel>。此组件不是内置的，因此您需要在页面的 <head> 中添加其脚本。

当我们查看 <amp-carousel> 的文档时，我们正在寻找诸如此类问题的答案

  • 此组件的作用是什么？

  • 如何使用此组件？

  • 如何使用属性自定义此组件？

  • 如何对此组件进行样式设置？

  • 我是否需要包含一个额外的脚本来启用此组件？

  • 此组件支持哪些布局？

<amp-carousel> 的 AMP 文档页面。

查看 <amp-carousel> 的文档中的以下项目

  • 描述 - 每个组件的文档顶部都有一个简短的描述。它总结了组件是什么以及它存在的原因。

  • 行为部分 - 此部分解释了组件的工作原理。它通常会提供一些示例代码以及组件外观的预览。

  • 属性列表 - 我们在上一节关于 Web 组件的部分中讨论了自定义属性。这些属性允许我们以某些方式自定义我们的 AMP 组件。此部分包含不同属性的列表、它们的可能值以及属性控制的内容。

  • 样式设置部分 - 此部分解释了如何使用 CSS 更改此组件的外观。除了通过标签名称或 ID 进行样式设置外，许多组件还提供了其他 CSS 类，可用于更改组件在某些状态下的外观。例如，<amp-carousel> 提供了类 .amp-carousel-button，允许开发人员重新设置更改轮播幻灯片的按钮的样式。

  • 必需的脚本标记 - 此标记位于文档的顶部，需要将其添加到我们网站的 <head> 中才能使组件正常工作。大多数组件都需要这些额外的脚本才能正常工作。

  • 支持的布局 - 我们在上一节中讨论了 layout 属性。它控制元素在屏幕上的呈现方式。此部分解释了哪些布局对此组件有效。

这些项目几乎在所有 AMP 组件的文档中都列出。让我们使用其中的一个示例来探索文档

<amp-carousel id="carousel-with-preview"
    width="450"
    height="300"
    layout="responsive"
    type="slides">
<amp-img src="images/image1.jpg"
      width="450"
      height="300"
      layout="responsive"
      alt="apples"></amp-img>
<amp-img src="images/image2.jpg"
      width="450"
      height="300"
      layout="responsive"
      alt="lemons"></amp-img>
<amp-img src="images/image3.jpg"
      width="450"
      height="300"
      layout="responsive"
      alt="blueberries"></amp-img>
</amp-carousel>

此轮播包含三个图像，供用户滑动浏览。此轮播组件实例（id、width、height、layout 和 type）的属性分为三组：所有 HTML 元素通用的属性 (id)、所有 AMP 组件通用的属性 (width、height 和 layout) 以及轮播组件独有的属性 (type)。

在 <amp-carousel> 的文档中，我们看到该组件可以具有 type 属性。它显示 type 的有效输入包括 slides 和 carousel。

这意味着，如果您未指定 type，则默认值为 carousel。

提示：某些属性根本不需要值。这些属性称为 布尔属性。在这些情况下，属性的默认值为 false，当附加到元素或组件时，值为 true。

<amp-carousel> 组件可以使用许多其他自定义属性。首次使用 AMP 组件时，请浏览文档，了解所有可以通过属性自定义组件外观或行为的方法。

练习 5：创建图像幻灯片

让我们练习使用文档将 <amp-carousel> 添加到我们的项目中。在具有以下设置的 <p class="main-text"> 元素下添加一个轮播

  • 为轮播提供 responsive 布局。

  • 为轮播提供 slides 类型的 type。

  • 将三个图像添加到轮播中：assets/cheddar-chaser.jpg、assets/cheese.jpg 和 assets/mouse.jpg。

  • 如果用户尝试超出最后一张幻灯片，则使轮播图像循环回到开头。

推荐的样式指南

  • 为轮播提供 412 的 width 和 309 的 height。

  • 为每个图像提供 412 的 width 和 309 的 height。

在您进行更改后，查看实时页面以检查您的工作。您的页面应如下所示

我们页面中的轮播。

解决方案

以下是您添加到项目中的代码可能的外观

<amp-carousel layout="responsive" width="412" height="309" type="slides" loop>
    <amp-img src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fcheddar-chaser.jpg?1540228205366"
             width="412" height="309" layout="responsive"></amp-img>
    <amp-img src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fcheese.jpg?1540228223785"
             width="412" height="309" layout="responsive"></amp-img>
    <amp-img src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fmouse.jpg?1540228223963"
             width="412" height="309" layout="responsive"></amp-img>
</amp-carousel>

请记住在 <head> 中包含 <amp-carousel> 脚本

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

发现新的组件

当我们继续开发我们的奶酪自行车网站时，我们并不总是知道我们想要添加的 AMP 组件的名称来实现某些所需的新功能。AMP 社区已经创建了大量的组件，可以处理许多不同类型的功能：广告和分析、动态内容、布局、媒体、演示和社会。在开发 AMP 网站时，通常会得到一组新功能的要求，然后搜索 AMP 组件列表以查找满足这些要求的组件。

发现新的 AMP 组件的第一种方法是使用您喜欢的搜索引擎或 AMP 项目站点上的搜索功能。这是直接转到您已知道名称的组件的文档的有效方法。此外，您可以搜索您感兴趣的组件的描述以查找结果。例如，搜索“YouTube 视频”将显示 <amp-youtube> 作为第一个结果。同样，搜索“可折叠内容”将显示 <amp-accordion> 组件作为第一个结果。

查找组件的另一种方法是使用AMP 组件参考页面。它包含 AMP 支持的组件列表。每个组件条目都包括组件的名称以及对组件提供的功能的简短描述。我们可以通过单击组件的名称来访问组件的文档。正如我们之前了解到的，文档将更深入地介绍组件的行为。根据这些信息，我们应该能够确定组件是否满足我们的需求，或者我们是否需要搜索其他组件。在以后的培训中，我们将讨论如果没有单个组件满足我们所有要求该怎么办。

AMP 组件参考页面。

最后，我们可能仍然对组件在我们网站上的行为方式有疑问，或者我们可能不清楚如何在更复杂的情况下使用组件。amp.dev 上的 AMP 示例部分包含许多展示 AMP 组件的页面，展示了配置这些组件以满足现代网站中常见用例的各种方法。通常，您可以直接从组件的文档转到组件的相应 AMP 示例页面。

<amp-carousel> 组件的 AMP 示例页面。

社交媒体链接在现代网页中很常见。AMP 为我们提供了现成的链接按钮，允许用户通过单击一下即可在他们的社交媒体上分享您的页面，从而帮助您提高用户参与度。

使用 AMP 文档，在 <amp-youtube> 组件下方添加按钮，让用户单击一下即可分享我们的页面。但是，您需要在 AMP 组件参考中导航和搜索以找到相关的 AMP 组件。（提示：本节的标题应该可以帮助您找到您要查找的内容。）

找到正确的组件后，单击组件的名称以访问其文档。使用该文档添加以下组件

  • 为用户提供在以下平台上分享您的页面的选项：电子邮件、LinkedIn、Tumblr 和 Twitter。

推荐的样式指南

  • 将 AMP 组件包装在具有 social-bar 类的 div 中。

  • 为每个 AMP 组件提供 44 的 width 和 height。

完成此任务后，您的页面应包含用户分享您网站的按钮

嵌入在页面中的社交媒体按钮。

解决方案

<div class="social-bar">
  <amp-social-share type="email" width="44" height="44"></amp-social-share>
  <amp-social-share type="linkedin" width="44" height="44"></amp-social-share>
  <amp-social-share type="tumblr" width="44" height="44"></amp-social-share>
  <amp-social-share type="twitter" width="44" height="44"></amp-social-share>
</div>

请记住在 <head> 中包含 <amp-social-share> 脚本

<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>

上一章 下一章