扩展

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

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

htmx 扩展分为两类：

  • 核心扩展 - 由 htmx 团队支持
  • 社区扩展 — 得到更广泛社区的支持

核心扩展

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

社区扩展

扩展名称 描述
ajax-header 为 htmx 发出的所有请求添加 X-Requested-With 头
alpine-morph Alpine.js 现在有一个轻量级的 morph 插件，这个扩展允许你将其用作 htmx 中的交换机制，当你通过 htmx 交换整个 Alpine 组件时，这对于保留 Alpine 状态。
class-tools class-tools 扩展允许你使用 classes 或 data-classes 属性指定将在元素上或元素外交换的 CSS 类。
client-side-templates 此扩展支持通过客户端模板将 JSON/XML 请求响应转换为 HTML，然后再交换到 DOM。
debug 此扩展包括通过带 DEBUG: 前缀的函数 console.debug 或 console.log 记录其所在元素的所有 htmx 事件。
disable-element 当在触发请求的元素上配置时此扩展在 htmx 请求期间禁用元素。请注意，此功能现在通过属性 hx-disabled-elt 成为 htmx 核心的一部分
event-header 此扩展将 Triggering-Event 头添加到请求中。HTTP 头的值是触发请求的事件的 JSON 序列化格式。
include-vals 此 include-vals 扩展允许你以编程方式使用 include-vals 属性在请​​求中包含值。此属性的值是一个或多个名称/值对，它们将被视为 javascript 对象文字中的字段。
json-enc-custom 此扩展的工作原理与 json-enc 类似，但允许非常复杂的结构，例如嵌入 JSON 对象、列表或处理索引，只需使用名称属性即可。
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-nonce 该safe-nonce扩展可用于提高应用程序/网站的安全性，并通过允许你安全地返回已知的受信任内联脚本来帮助避免 XSS 问题
signalr 通过 SignalR 提供双向实时通信。
amz-content-sha256 HTMX 扩展用于与AWS 服务交互时对内容哈希作为数据完整性验证请求的一部分。
hx-drag 该扩展允许 htmx 发送拖放事件