Eleventy AMP 插件介绍

我很高兴地介绍 AMP 插件的新版本，该插件适用于 Eleventy。Eleventy 是一款静态网站生成器，提供了一种简单的方法来管理您的模板并构建您的网站。如果您想让您的静态网站更具交互性或需要嵌入第三方内容，它与 AMP 非常搭配。借助新的 AMP Eleventy 插件，在您的模板中使用 AMP 组件变得更加简单，无需担心设置 AMP 模板或导入 AMP 组件。

AMP 的核心是一个 Web 组件框架。这些组件在设计时考虑了性能和可访问性，在许多不同的环境中都很有用。此插件是一个很好的例子，说明您可以将 AMP 仅仅用作组件库。例如，该插件提供了选择退出 AMP 缓存交付和自托管 AMP 运行时的选项。这使您可以完全控制页面如何以及在何处提供服务。继续阅读以详细了解该插件及其使用方法。

何时应将 AMP 与 Eleventy 一起使用？

如果您发布的是一个简单的博客，只包含文本和图像，则无需使用 AMP。实际上，在这种情况下，使用纯 HTML + CSS 更合理。

如果您想在您的网站上使用更高级的功能，而无需重新发明轮子，则使用 AMP 很有意义。

高级 UI 组件，例如轮播或图像灯箱画廊。
视觉效果，例如淡入、视差、折叠标题等。
第三方嵌入，例如 YouTube、Twitter、Instagram。AMP 的好处是它提供了一套丰富的第三方集成，这些集成都经过优化并经过适当的沙箱处理，因此不会降低网站的性能。
导航功能，例如使用 amp-sidebar 的可访问且移动友好的菜单，或使用 amp-next-page 在不同页面之间实现连续滚动体验。这些都是常见的特性，一遍又一遍地重新发明它们令人厌烦。

以下是一个图像轮播的示例，它在加载时淡入并包含一个灯箱模式。在此示例中，您可以在 Markdown 文件中直接使用 AMP 组件。AMP 组件开箱即用，AMP Eleventy 插件负责导入所有必需的 AMP 组件脚本并设置 AMP 文档。

# Hello AMPHTML World

<amp-carousel lightbox amp-fx="fade-in" layout='responsive' width='600' height='400' type='slides'>
  <amp-img src='https://picsum.photos/id/1015/600/400' layout='fill'></amp-img>
  <amp-img src='https://picsum.photos/id/1016/600/400' layout='fill'></amp-img>
  <amp-img src='https://picsum.photos/id/1018/600/400' layout='fill'></amp-img>
</amp-carousel>Code language: HTML, XML (xml)

带有淡入和灯箱的 AMP 轮播示例

AMP 的另一个好处是它提供了一套丰富的经过优化的第三方集成。其中一些是通过简码直接内置到 AMP Eleventy 插件中的。

Checkout this video:
{% video "my-video.mp4" %}
Or this tweet (the number specifies the embed height):
{% twitter "1182321926473162752" 472 %}
Here is a Youtube video:
{% youtube "v0BVLgEEuMY" %}
And of course Instagram:
{% instagram "BMQ8i4lBTlb" %}Code language: JavaScript (javascript)

该插件还默认应用 Web 性能最佳实践。它集成了 AMP 优化器，并使用 eleventy-img 自动优化图像。这意味着您可以开箱即用地获得最佳的 AMP 性能。

不过，关于使用 AMP 需要注意的一点是，AMP 只能在页面上独占使用时才能保证其性能。例如，AMP 运行时只能在页面加载时避免内容偏移，前提是它可以提前计算页面上每个元素的高度。如果您需要在页面上使用 AMP 组件或 amp-script 不支持的功能，最好使用其他技术。但是，我们正在努力将 AMP 组件作为独立组件提供，以便将来也能支持这些用例。

入门

要开始使用，请通过 NPM 安装 AMP Eleventy 插件

$ mkdir eleventy-amp-demo
$ cd eleventy-amp-demo
$ npm init --yes
$ npm install @ampproject/eleventy-plugin-amp --save-dev

然后将该插件添加到您的 Eleventy 配置 .eleventy.js 中

const ampPlugin = require('@ampproject/eleventy-plugin-amp');
module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(ampPlugin);
};Code language: JavaScript (javascript)

就是这样，现在您可以开始创建您的内容了

$ echo '# Hello World

![image](https://unsplash.it/500/400)

{% twitter "1182321926473162752"  472 %}' > index.mdCode language: PHP (php)

要本地提供您的网站，您需要安装 Eleventy 并运行它

$ npm install -g @11ty/eleventy
$ eleventy --serve

好了！您现在可以通过访问 http://localhost:8080 来查看您的新 AMP 网站。

关闭缓存的 AMP 和运行时自托管

您可以将 AMP 仅仅用作 UI 组件库，而无需依赖任何 AMP 缓存。内置了两个（可选）功能来实现这一点。

选择退出 AMP 缓存：阻止 AMP 缓存提供您的页面（例如，在 Google 搜索或 Bing 中显示时）。如果您希望您的网站不从不同的 AMP 缓存来源提供服务，这可能很有意义。此功能将从 <html> 标签中删除闪电符号，这将阻止 AMP 缓存提供您的页面。
运行时自托管：AMP 不断改进，为了自动获取最新功能，最好从 cdn.ampproject.org 加载 AMP 运行时和组件脚本。但是，如果您希望更细粒度地控制要使用的 AMP 版本，您也可以自行托管 AMP 运行时。AMP Eleventy 插件集成了 fetch-runtime 模块（来自 AMP 工具箱），该模块将在您的网站构建过程中下载 AMP 运行时。这也提供了额外的性能优势，因为初始渲染不需要建立到 cdn.ampproject.org 的第二个 HTTPS 连接。

您可以通过以下选项启用这些功能

eleventyConfig.addPlugin(pluginAmp, {
    ampCache: false, 
    downloadAmpRuntime: true,
    ampRuntimeHost:
      process.env.ENV === 'prod' ? 'https://your-domain.com' : 'http://localhost:8080',
 });Code language: CSS (css)

确保在您的 package.json 构建脚本中设置环境变量

"scripts": {
    "build": "ENV=prod eleventy",
    "watch": "eleventy --watch",
    "serve": "eleventy --serve"
  }Code language: JavaScript (javascript)

一瞥更快的 AMP 页面的未来

AMP 团队一直在努力提高 AMP 的性能。Eleventy 插件让您有机会在今天使用许多即将推出的功能。

更小的 AMP 运行时捆绑包，这得益于 JavaScript 模块。
优化的英雄图像性能。您可以使用 data-hero 属性标记英雄图像，以确保这些图像尽可能快地渲染，并且不依赖于 AMP 运行时的可用性。
加载时更少的 HTTPS 连接，方法是自托管 AMP 运行时。

要启用这些功能，请将以下选项添加到您的配置中

eleventyConfig.addPlugin(pluginAmp, {
    ampCache: false,
    downloadAmpRuntime: true,
    ampRuntimeHost:
      process.env.ENV === 'prod' ? 'https://your-domain.com' : 'http://localhost:8080',
    experimentEsm: true,
    experimentImg: true,
    validation: false,
    imageOptimization: {
      urlPath: '/img/',
    },
  });Code language: JavaScript (javascript)

需要注意的是，AMP 验证器目前还不支持这些功能，这意味着您的 AMP 页面不符合从 AMP 缓存中提供的条件。但在您的来源上，这将为您提供 AMP 提供的最佳性能。

总结

试试看，并告诉我们您的想法！Eleventy AMP 插件提供了一种简单的方法来快速使用 AMP 创建一个新网站。为了让您更容易上手，我们还提供了一个 AMP 博客入门模板，您可以立即使用它来开始使用。

作者：Sebastian Benz，Google 开发者倡导者

{{#initial}}重要组件{{/initial}}{{^initial}}组件{{/initial}}

{{#initial}}<{{title}}>{{/initial}}{{^initial}}{{title}}{{/initial}}

{{#initial}}热门文章{{/initial}}{{^initial}}结果{{/initial}}

{{title}}

;(

出现错误…

¯\_(ツ)_/¯

未找到结果。

Eleventy AMP 插件介绍

何时应将 AMP 与 Eleventy 一起使用？

入门

关闭缓存的 AMP 和运行时自托管

一瞥更快的 AMP 页面的未来

总结