扩展

htmx 支持扩展来增强其提供的核心超媒体基础设施。扩展机制减轻了核心库添加新功能的压力，使其能够专注于其主要目的：推广超媒体控制。

如果您有兴趣为 htmx 创建扩展，请参阅 构建 htmx 扩展。

htmx 扩展分为两类

核心扩展

名称描述
head-support提供对 htmx 请求中合并 head 标签信息（样式等）的支持。
htmx-1-compat将 htmx 2 的大多数行为更改回 htmx 1 的默认值。
idiomorph提供基于 idiomorph 变形库的 morph 交换策略，该库由 htmx 团队创建。
preload此扩展允许您在用户请求之前将 HTML 片段加载到浏览器的缓存中，以便额外的页面看起来对用户几乎是瞬时加载的。
response-targets此扩展允许您指定在收到不同的 HTTP 响应代码时要交换的不同目标元素。
sse直接从 HTML 提供对 服务器发送事件 的支持。
ws直接从 HTML 提供与 Web 套接字 服务器的双向通信

社区扩展

名称描述
ajax-header将 X-Requested-With 标头添加到 htmx 发出的所有请求
alpine-morphAlpine.js 现在有一个轻量级的 变形插件，此扩展允许您将其用作 htmx 中的交换机制，这对于在 htmx 交换整个 Alpine 组件时保留 Alpine 状态是必需的。
class-toolsclass-tools 扩展允许您指定将通过使用 classes 或 data-classes 属性切换到或从元素上切换的 CSS 类。
client-side-templates此扩展支持将 JSON/XML 请求响应通过客户端模板转换为 HTML，然后将其交换到 DOM 中。
debug此扩展包括记录其所在元素的所有 htmx 事件，可以通过 console.debug 函数或通过带有 DEBUG: 前缀的 console.log 函数进行记录。
disable-element此扩展在 htmx 请求期间禁用元素，当在触发请求的元素上配置时。请注意，此功能现在是 htmx 核心的一部分，通过 hx-disabled-elt 属性。
event-header此扩展将 Triggering-Event 标头添加到请求中。标头的值为触发请求的事件的 JSON 序列化版本。
include-valsinclude-vals 扩展允许您使用 include-vals 属性在请求中以编程方式包含值。此属性的值是一个或多个名称/值对，它们将作为 javascript 对象文字中的字段进行评估。
json-enc-custom此扩展的工作方式类似于 json-enc，但允许使用非常复杂的结构，例如嵌入 JSON 对象、列表或通过使用 name 属性来处理索引。
json-enc此扩展以 JSON 格式而不是 url 格式对参数进行编码。
loading-states此扩展允许您轻松管理请求正在进行时的加载状态，包括禁用元素，以及添加和删除 CSS 类。
morphdom-swap提供基于 morphdom 变形库的 morph 交换策略。
multi-swap此扩展允许您从 HTML 响应中交换多个标记的元素。您还可以为每个元素选择应使用哪种交换方法。
no-cache此扩展强制 HTMX 绕过客户端缓存并发出新请求。还添加了一个 hx-no-cache 标头，允许绕过服务器端缓存。
path-deps此扩展支持基于路径表达元素间依赖关系，灵感来自 intercooler.js 依赖机制。
path-params此扩展使用请求参数来填充路径变量。使用的参数将被移除，因此它们将不再在查询字符串或正文中发送。
remove-me允许您在指定时间间隔后删除元素。
replace-params此扩展使用请求参数替换现有参数。如果给定值为空字符串，则参数将被删除。此扩展在诸如分页、搜索等您只希望替换少数参数而不是重置所有参数的情况下很有用。
restored在使用 hx-boost 时检测到后退按钮事件时触发事件。
safe-noncesafe-nonce 扩展可用于提高应用程序/网站的安全性，并通过允许您安全地返回已知的受信任的内联脚本来帮助避免 XSS 问题。
signalr通过 SignalR 提供双向实时通信。