有没有想过如何构建一个可以使用和不使用 JavaScript 的分页列表？在本文中，Manuel 解释了如何利用 Eleventy 和 Alpine.js 来利用渐进增强的力量并做到这一点。 我构建的大多数站点都是静态站点，其中包含由静态站点生成器生成的 HTML 文件或由Wordpress或CraftCMS等 CMS 在服务器上提供的页面。我只在顶部使用 JavaScript 来增强用户体验。我将它用于诸如披露小部件、手风琴、飞出式导航或模式之类的东西。 大多数这些功能的要求都很简单，因此使用库或 台湾电话号码清单 框架就有点过分了。然而，最近，我发现自己处于这样一种情况，即在没有框架帮助的情况下用 Vanilla JS 从头开始​​编写组件会过于复杂和混乱。 轻量级框架 # 我的任务是向现有项目列表添加多个过滤器、排序和分页。我不想使用像 Vue 或 React 这样的 JavaScript 框架，只是因为我在网站的某些地方需要帮助，而且我不想更改我的堆栈。我咨询了 Twitter，人们建议使用最小框架，如lit、petite-vue、hyperscript、htmx或Alpine.js。我选择了 Alpine，因为它听起来正是我想要的： “Alpine 是一种坚固的、最小的工具，可以直接在你的标记中组合行为。把它想象成现代网络的 jQuery。放入脚本标签并开始。” 高山.Js # Alpine 是一个轻量级 (~7KB) 集合，包含 15 个属性、6 个属性和 2 个方法。我不会深入探讨它的基础知识（查看Hugo Di Francesco撰写的这篇关于 Alpine 的文章或阅读Alpine 文档），但让我快速向您介绍一下 Alpine：

注意： 如果您已经熟悉 Alpine.js，则可以跳过此介绍直接进入本文的主要内容。 假设我们想将一个包含许多项目的简单列表变成一个披露小部件。您可以使用原生 HTML 元素：详细信息和摘要，但对于本练习，我将使用 Alpine。

很简约！您可以使用 JavaScript 增强现有的静态内容，而无需编写一行 JS。当然，您可能需要编写一些 JavaScript，尤其是在您处理更复杂的组件时。 一个静态的、分页的列表 # 好的，现在我们了解了 Alpine.js 的基础知识，我想说是时候构建一个更复杂的组件了。