扩展

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

¥htmx supports extensions to augment the core hypermedia infrastructure it provides. The extension mechanism takes pressure off the core library to add new features, allowing it to focus on its main purpose of generalizing hypermedia controls.

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

¥If you are interested in creating an extension for htmx, please see Building htmx Extensions.

htmx 扩展分为两类：

¥htmx extensions are split into two categories:

核心扩展

¥Core Extensions

名称描述
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 套接字 服务器的双向通信

社区扩展

¥Community Extensions

名称 描述
ajax-header 为所有 htmx 请求添加 X-Requested-With 标头
alpine-morph Alpine.js 现在有一个轻量级的 morph 插件，此扩展允许你将其用作 htmx 中的交换机制，当整个 Alpine 组件被 htmx 交换时，这对于保留 Alpine 状态是必要的。
attribute-tools attribute-tools 扩展允许你使用 attributes 或 data-attributes 属性指定将在元素上交换或移除的属性。（类似于 class-tools）
class-tools class-tools 扩展允许你使用 classes 或 data-classes 属性指定将在元素上或元素外交换的 CSS 类。
debug 此扩展将通过 console.debug 函数记录其所在元素的所有 htmx 事件。请注意，在开发过程中，使用 htmx.logAll() 通常就足够了。
event-header 此扩展将 Triggering-Event 标头添加到请求中。标头的值是触发请求的事件的 JSON 序列化版本。
loading-states This extension allows you to easily manage loading states while a request is in flight, including disabling elements, and adding and removing CSS classes.
morphdom-swap 提供基于 morphdom 变形库的 morph 交换策略。
multi-swap This extension allows you to swap multiple elements marked from the HTML response. You can also choose for each element which swap method should be used.
no-cache 此扩展强制 HTMX 绕过客户端缓存并发出新请求。还添加了 hx-no-cache 标头以允许绕过服务器端缓存。
path-deps 此扩展支持基于路径表达元素间依赖，灵感来自 intercooler.js 依赖机制。
path-params This extension uses request parameters to populate path variables. Used parameters are removed so they won’t be sent in the query string or body anymore.
remove-me Allows you to remove an element after a specified interval.
replace-params This extension uses request parameters to replace existing parameters. If given value is empty string then parameter will be deleted. This extension would be useful in situations like pagination, search that you only want to replace only few parameters instead of reset all parameters.
restored 在使用 hx-boost 时，每当检测到后退按钮时都会触发事件
safe-nonce safe-nonce 扩展可用于提高应用/网站的安全性，并通过允许你安全地返回已知的受信任内联脚本来帮助避免 XSS 问题
hx-drag This extension allows htmx requests to be sent for drag drop
dynamic-url 允许使用 {varName} 占位符进行动态 URL 路径模板化，并通过可配置的自定义函数或 window. 回退机制进行解析。它不依赖于 hx-vals。当需要执行依赖于应用状态的路径请求时非常有用。
数据 API
client-side-templates This extension supports transforming a JSON/XML request response into HTML via a client-side template before it is swapped into the DOM.
json-enc This extension encodes parameters in JSON format instead of url format.
form-json 与 json-enc 类似，但具有类型保留。将表单数据转换为结构化 JSON，同时保持数字、布尔值和文件的正确类型（Base64 编码）。支持使用点 (.) 或括号 ([]) 符号的嵌套结构。
json-enc-custom This extension works similarly to json-enc but allows for very complex structures, such as embedding JSON objects, lists, or handling indexes, just by using the name attribute.
集成
amz-content-sha256 HTMX extension for interacting with AWS services that require the content hash as part of the request for data integrity verification.
signalr 通过 SignalR 提供双向实时通信。
旧版
disable-element 当在触发请求的元素上配置时，此扩展会在 htmx 请求期间禁用元素。请注意，此功能现已成为 htmx 核心的一部分，通过 hx-disabled-elt 属性实现。
include-vals include-vals 扩展允许你以编程方式在具有 include-vals 属性的请求中包含值。请注意，此功能现已成为 htmx 核心的一部分，通过 hx-vals 属性实现。