htmx 支援擴展功能,以增強其提供的核心超媒體基礎架構。擴展機制減輕了核心函式庫添加新功能的壓力,使其可以專注於通用化超媒體控制的主要目的。
如果您有興趣為 htmx 建立擴展,請參閱建構 htmx 擴展。
htmx 擴展分為兩個類別
名稱 | 描述 |
---|---|
head-support | 提供在 htmx 請求中合併 head 標籤資訊(樣式等)的支援 |
htmx-1-compat | 將 htmx 2 的大部分行為變更回滾到 htmx 1 的預設值。 |
idiomorph | 基於 idiomorph 變形函式庫(由 htmx 團隊創建),提供 morph 交換策略。 |
preload | 此擴展允許您在使用者請求之前將 HTML 片段載入到瀏覽器的快取中,以便其他頁面對使用者來說幾乎可以瞬間載入。 |
response-targets | 此擴展允許您指定在收到不同的 HTTP 回應代碼時要交換的不同目標元素。 |
sse | 提供直接從 HTML 支援伺服器發送事件。 |
ws | 提供直接從 HTML 與 Web Socket 伺服器進行雙向通訊 |
名稱 | 描述 |
---|---|
ajax-header | 將 X-Requested-With 標頭添加到 htmx 發出的所有請求 |
alpine-morph | Alpine.js 現在有一個輕量的 morph 外掛,此擴展允許您將其用作 htmx 中的交換機制,這對於在整個 Alpine 元件被 htmx 交換時保留 Alpine 狀態是必要的。 |
class-tools | class-tools 擴展允許您使用 classes 或 data-classes 屬性來指定要切換到元素上或從元素上移除的 CSS 類別。 |
client-side-templates | 此擴展支援在 JSON/XML 請求回應被交換到 DOM 中之前,透過客戶端範本將其轉換為 HTML。 |
debug | 此擴展會記錄其所在元素的所有 htmx 事件,可以透過 console.debug 函式或使用 DEBUG: 字首的 console.log 函式進行記錄。 |
disable-element | 當在觸發請求的元素上設定時,此擴展會在 htmx 請求期間停用元素。請注意,此功能現在是 htmx 核心的一部分,透過 hx-disabled-elt 屬性實現 |
event-header | 此擴展會將 Triggering-Event 標頭添加到請求中。標頭的值是觸發請求的事件的 JSON 序列化版本。 |
include-vals | include-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-nonce | safe-nonce 擴展可用於提高應用程式/網站的安全性,並透過允許您安全地返回已知受信任的內聯腳本,來幫助避免 XSS 問題 |
signalr | 透過 SignalR 提供雙向即時通訊。 |