扩展

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-morphAlpine.js 现在有一个轻量级的 morph 插件,此扩展允许你将其用作 htmx 中的交换机制,当整个 Alpine 组件被 htmx 交换时,这对于保留 Alpine 状态是必要的。
class-toolsclass-tools 扩展允许你使用 classesdata-classes 属性指定将在元素上或元素外交换的 CSS 类。
client-side-templates此扩展支持通过客户端模板将 JSON/XML 请求响应转换为 HTML,然后再将其交换到 DOM 中。
debug此扩展包括记录元素所在元素的所有 htmx 事件,可通过 console.debug 函数或带有 DEBUG: 前缀的 console.log 函数记录。
disable-element当在触发请求的元素上配置时,此扩展会在 htmx 请求期间禁用元素。请注意,此功能现在通过 hx-disabled-elt 属性成为 htmx 核心的一部分
event-header此扩展将 Triggering-Event 标头添加到请求中。标头的值是触发请求的事件的 JSON 序列化版本。
include-valsinclude-vals 扩展允许你以编程方式在具有 include-vals 属性的请求中包含值。此属性的值是一个或多个名称/值对,将被评估为 javascript 对象字面量中的字段。
json-enc此扩展以 JSON 格式而不是 url 格式对参数进行编码。
form-jsonjson-enc 类似,但具有类型保留。将表单数据转换为结构化 JSON,同时保持数字、布尔值和文件的正确类型(Base64 编码)。支持使用点 (.) 或括号 ([]) 符号的嵌套结构。
json-enc-custom此扩展的工作方式与 json-enc 类似,但允许非常复杂的结构,例如嵌入 JSON 对象、列表或处理索引,只需使用 name 属性即可。
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 提供双向实时通信。
amz-content-sha256HTMX 扩展用于与需要内容哈希作为数据完整性验证请求的一部分的 AWS 服务进行交互。
hx-drag此扩展允许为拖放事件发送 htmx 请求