用 HTMX 实现无刷新分页的完整指南

什么是 HTMX

HTMX 是一个轻量级库，允许你直接在 HTML 中使用属性来发起 AJAX 请求，无需编写 JavaScript。

为什么选择 HTMX

• 学习成本低：只需了解几个 HTML 属性
• 体积小：gzip 后仅 14KB
• 服务端友好：配合模板引擎返回 HTML 片段即可

实现分页

<button hx-get="/partials/articles?page=2"
        hx-target="#article-list"
        hx-swap="beforeend">
  加载更多
</button>

配合 Express 返回 HTML 片段：

app.get('/partials/articles', async (req, res) => {
  const page = parseInt(req.query.page) || 1;
  const articles = await db.all(
    'SELECT * FROM articles WHERE status = ? ORDER BY published_at DESC LIMIT 10 OFFSET ?',
    ['published', (page - 1) * 10]
  );
  res.render('partials/article-list', { articles });
});

总结

HTMX 让我们能够在不引入复杂前端框架的情况下，实现流畅的交互体验。对于个人博客这类项目，HTMX 是一个非常好的选择。