内容

扩展

htmx 提供了一种扩展机制，允许你自定义库的行为。扩展在 javascript 中定义，然后通过 hx-ext 属性启用。

以下是安装 idiomorph 扩展的方法，它允许你使用 Idiomorph DOM 变形算法进行 htmx 交换：

<head>
  <script src="https://unpkg.com/[email protected]/dist/idiomorph-ext.min.js"></script>
</head>
<body hx-ext="morph">
  ...
  <button hx-post="/example" hx-swap="morph" hx-target="#content">
    Update Content
  </button>
  ...
</body>

首先包含扩展名（应该在 htmx.js 之后包含），然后通过 hx-ext 属性按名称引用扩展名。这使您能够使用 morph swap。

核心扩展

htmx 支持一些“核心”扩展，这些扩展由 htmx 开发团队支持：

  • head-support - 支持在 htmx 请求中合并 head 标签信息（样式等）
  • htmx-1-compat - 恢复 htmx 1 默认值和功能
  • idiomorph - 支持 morph 使用 idiomorph 的交换策略
  • 预加载 - 允许你预加载内容以获得更好的性能
  • response-targets - 允许你根据 HTTP 响应代码定位元素（例如404）
  • sse - 支持服务器发送事件
  • ws — 支持 Web Sockets 你可以在扩展页面上查看所有可用的扩展。

创建扩展

如果你有兴趣向 htmx 添加自己的扩展，请参阅 扩展文档。