Eleventy2中的新功能

Eleventy2中的新功能，Eleventy（或11ty）是一种流行的静态站点生成器 (SSG)，被认为是速度、简单性、灵活性和网站性能方面最好的 Node.js 选项之一。本教程介绍了 2023 年 2 月发布的 2.0 版。

什么是静态站点生成器？

（如果您已经使用 SSG，请跳过……）

您可能熟悉WordPress，它是一种内容管理系统 (CMS)，为几乎一半的网站提供支持。WordPress 提供管理面板，允许您在数据库中编辑和存储内容。当用户访问 WordPress 页面时，它会将数据库内容拉入模板并返回 HTML。简单的用户界面结合丰富的主题和插件使 WordPress 成为客户的理想选择。

我要提出一个有争议的主张：CMS 是过度的，除非您有许多作者每天发布数次。WordPress 安装很简单，为非技术客户提供了强大的功能。不幸的是，管理内容、性能、依赖性和安全性的长期成本常常被低估。站点可能会因为所有者破坏页面、使站点变慢或安装被黑客入侵而失败。

SSG 在构建时完成大部分渲染工作，以创建一组静态前端 HTML 文件（必要时包含图像、CSS 和 JavaScript）。客户端更难破坏某些东西：您可以在部署之前测试生成的页面，保证良好的性能，并避免维护服务器端依赖项，例如运行时或数据库。破解实时静态站点并不容易，因为它是文件的集合。没有可利用的应用程序。

Eleventy 等 SSG 的前期成本较高，因为您需要开发专业知识。但长期维护和托管成本应该会降低。通过解耦 CMS，您可以两全其美：SSG 通过从客户的私有托管内容管理系统中提取内容来构建和部署站点。

为什么要使用Eleventy？

静态站点生成器应用程序很多，但 Eleventy 值得您考虑，因为：

  • 您无需配置即可构建更简单的站点
  • 您可以使用 Web 开发人员熟悉的 JavaScript (Node.js) 代码配置更高级的生成
  • 您可以从 Markdown 文件、JSON 数据或任何 API 中提取内容
  • 您可以选择流行的 HTML模板引擎，例如Liquid、Nunjucks、Handlebars、Mustache、EJS、Pug等。
  • 你没有绑定到 JavaScript 框架：生成的站点没有 JavaScript 依赖项，除非你有意添加它们
  • Eleventy 具有最小的安装尺寸之一，并且渲染速度比其他选项更快

Eleventy 2.0 改进和功能

Eleventy 2.0 提供更新和增强功能。现在让我们看看其中的一些。

更小的安装尺寸

2.0 版需要的依赖项减少了 32% npm，并将node_module目录重量从 155MB 减少到 34MB。安装速度提高了 30%，因此部署到Cloudflare 等静态主机的速度明显更快。

更快的构建时间

Eleventy 已经很快了，但是版本 2 将构建时间减少了多达 20%。

Eleventy 仍然是最快的 Node.js 静态站点构建器之一，大型站点的构建速度通常比 Astro 快 12 倍，比 Gatsby 快 15 倍，比 Next.js 快 37 倍。为了更快，您需要考虑使用 Go、Rust 或 C++ 构建的 SSG。

一个新的（实验性的）--incremental标志通过在受内容或模板更改影响的页面上执行部分构建来进一步缩短开发渲染时间。

新的开发服务器

一个新的轻量级和更快的开发服务器取代了 Browsersync。和以前一样，你用这个启动服务器：

npx eleventy --serve

http://localhost:8080然后在浏览器中打开。当您更改模板、内容、CSS、JavaScript、图像或其他内置资产时，页面会自动刷新。

新的 WebC 网络组件

一个名为 WebC 的新的服务器端兼容 Web 组件选项可用。考虑您在webc文件中创建的代码：

<!-- sitepoint-link.webc -->
<p><a href="https://www.sitepoint.com/">SitePoint</a></p>

本质上，这可以在使用自定义 HTML 元素的模板中使用：

<!-- page.webc -->
<!doctype html>
<html>
  <head>my page</head>
  <body>
    <h1>My page</h1>
    <sitepoint-link></sitepoint-link>
  </body>
</html>

新渲染插件

Render插件提供了一个短代码，允许您在另一个模板中渲染模板字符串。例如，这是 Liquid 中的 Markdown：

{% assign title = 'Hello' %}
<h1>{% echo title %}</h1>

{% renderTemplate "md" %}
A new paragraph.

## An H2 sub-title

* list item 1
* list item 2
* list item 3
{% endrenderTemplate %}

新的国际化插件

Eleventy 2.0 可以更轻松地以不同语言提供您的静态站点。这通常意味着在每种语言的不同 URL 上呈现相同的页面：

/about/index.html (default English "About" page)
/es/about/index.html (Spanish "About" page)
/fr/about/index.html (French "About" page)

然后在每个页面的 UI 中提供语言选择选项，或者在检查浏览器的 HTTP 请求标头后重定向服务器端Accept-Language。

国际化插件通过提供过滤器等功能使此过程更容易locale_url，使用户可以选择当前的语言。例如：

<a href="{{ "/about/" | locale_url }}">Blog</a>

/es/about/这会在西班牙语页面或/fr/about/法语页面上呈现 URL 。

新的 HTML<base>插件

HTML插件提供了允许您将基本路径应用于特定 URL 的选项。<base>

新的服务器边缘功能

Eleventy 2.0 允许动态服务器端边缘功能来处理登录、个性化内容、提交表单等。这是一个仅限于 Eleventy 支持者Netlify的实验性选项，但随着时间的推移，应该会出现对更多静态主机的支持。

启动新的 Eleventy 2.0 项目

我们的Eleventy 指南：与框架无关的静态站点生成器教程提供了安装和使用 SSG 的分步指南。

本教程使用此安装命令来安装最新版本的 Eleventy：

npm install @11ty/eleventy

如果有更高版本可用，您还可以使用此命令来保证安装 Eleventy 2.0：

npm install @11ty/eleventy@2

升级 Eleventy 1.0 站点

大多数网站应该没问题，但在尝试升级使用 Eleventy 1.0 开发的网站之前，请注意以下 2.0 版的重大更改：

    • 它需要 Node.js 14 或更高版本（同时检查您的部署构建脚本）
    • 它安装升级的模板引擎
    • 它禁用 Markdown 中的缩进代码块（它们可以重新启用）
    • 它从父目录名称中删除日期
    • 它在全局数据文件名中保留句点/点
  • 它删除了未记录的renderData功能
  • 它删除--passthroughall命令行标志以将文件复制到输出目录
  • eleventy.config.js它支持和eleventy.config.cjs以及的默认配置文件名.eleventy.js
  • addShortcode现在addFilter支持async功能

假设您有一个可用的 Eleventy 1.0 站点，请从您的项目目录安装 Eleventy 2.0 和升级帮助插件：

cd my-11ty-site
npm install @11ty/eleventy@2 @11ty/eleventy-upgrade-help@2

添加升级帮助作为Eleventy 配置文件中的最后.eleventy.js一个插件（命名为,eleventy.config.js或eleventy.config.cjs）。

// 11ty configuration
const
  dev = global.dev  = (process.env.ELEVENTY_ENV === 'development'),
  now = new Date();

module.exports = config => {

  /* --- PLUGINS --- */

  // navigation
  config.addPlugin( require('@11ty/eleventy-navigation') );

  /* --- TRANSFORMS -- */

  // inline assets
  config.addTransform('inline', require('./lib/transforms/inline'));

  // etc.

它使用单个@11ty/eleventy-navigation插件，因此在其下方添加升级帮助插件行：

// 11ty configuration
const
  dev = global.dev  = (process.env.ELEVENTY_ENV === 'development'),
  now = new Date();

module.exports = config => {

  /* --- PLUGINS --- */

  // navigation
  config.addPlugin( require('@11ty/eleventy-navigation') );

  // *** NEW: upgrade help ***
  config.addPlugin( require('@11ty/eleventy-upgrade-help') );

  /* --- TRANSFORMS -- */
  // etc.

现在启动 Eleventy 构建：

npx eleventy

您的控制台将显示如下输出：

[@11ty/eleventy-upgrade-help] PASSED This project is not using the previously deprecated and disabled by default `dataTemplateEngine` configuration property. Read more at https://www.11ty.dev/docs/data-preprocessing/
[@11ty/eleventy-upgrade-help] PASSED This project is not using the `--passthroughall` command line flag. Read more at https://www.11ty.dev/docs/copy/#passthrough-everything
[@11ty/eleventy-upgrade-help] NOTICE The `liquidjs` dependency was updated from 9.x to 10.x. This should not require action, but you can read the full release notes: https://github.com/harttle/liquidjs/releases/tag/v10.0.0
[@11ty/eleventy-upgrade-help] NOTICE Markdown’s indented code blocks have been disabled by default in 2.0. Unfortunately, this plugin does *NOT* currently test whether this change affects your content. You can re-enable this feature using `eleventyConfig.amendLibrary("md", mdLib => mdLib.enable("code"))`. Read more: https://www.11ty.dev/docs/languages/markdown/#indented-code-blocks
# etc...

进行任何必要的更改并重新运行 Eleventy 构建，直到所有测试显示PASSED或NOTICE。使用开发 Web 服务器在各种浏览器中测试您的站点，以确保它按预期工作：

npx eleventy --serve

完成后，您可以从 Eleventy 配置文件中删除升级帮助插件：

// REMOVE: upgrade help
// config.addPlugin( require('@11ty/eleventy-upgrade-help') );

从您的项目中卸载它：

npm uninstall @11ty/eleventy-upgrade-help@2

最后，根据需要更新您的 Git 存储库或构建。

Eleventy2中的新功能概括

Eleventy 是最好的 Node.js 静态站点生成器之一，2.0 版使其更具吸引力。原因总结如下：

  • 它是高度可配置的，JavaScript/Node.js 基础使 Web 开发人员的生活更轻松
  • 文档很好
  • 易于上手、快速安装和快速构建
  • 你可以使用任何你喜欢的模板系统
  • 它支持基本的页面功能，例如导航、分页和动态数据
  • 您可以使用 Git 或任何其他源代码控制系统备份和版本站点
  • 除非您需要，否则构建的网站不依赖于 JavaScript
  • 服务器端功能是可能的并且正在改进
  • 对于大多数站点来说，升级是无痛的（尤其是与我可以提到的其他 Node.js SSG 相比！）
  • 它正在积极开发和持续的赞助确保长期支持

有一些缺点：

  • 您需要开发专业知识才能开始
  • 你从空白的 HTML 开始：没有框架魔法
  • Eleventy 配置使用 CommonJS，尚不支持 ES Modules
  • Netlify 功能不错，但不能保证其他平台也会有类似的选项

相关推荐

2023如何学习SQL——初学者终极指南

Python异常处理

相关文章：

Node.js书籍适合初学者的13本书Node.js书籍 Flutter和React Native比较Flutter和React Native比较 最好用的Python代码编辑器最好用的Python代码编辑器 Maven构建前端资源Maven构建前端资源

Tags:

分类