HTMX - 配置

HTMX 是一个 JavaScript 库，它使用 AJAX、CSS Transitions、WebSockets 和 服务器发送事件 来扩展您的 HTML。本指南将向您展示如何为您的项目配置 HTMX，涵盖基本和高级设置选项，以确保 HTMX 顺利为您工作。

HTMX 入门

HTMX 允许您以最小的努力为您的 Web 应用程序添加交互功能。首先将 HTMX 集成到您的项目中，并使用其属性使您的 HTML 元素具有响应性和动态性。

在您的项目中包含 HTMX

要开始使用 HTMX，您需要将其包含在您的 HTML 文件中。为此，您可以查看HTMX - 安装。

验证 HTMX 激活

HTMX 在页面加载时自动开始工作。您无需执行任何操作即可进行设置。

全局配置

HTMX 提供允许您设置适用于页面上所有 HTMX 元素的全局配置选项。您可以使用 htmx.config 对象设置全局配置。

// 启用模板片段
htmx.config.useTemplateFragments = true;

// 设置默认交换样式
htmx.config.defaultSwapStyle = "outerHTML";

// 设置默认交换延迟(以毫秒为单位)
htmx.config.defaultSwapDelay = 100;

以下是一些常用的全局配置选项:

• useTemplateFragments:如果设置为 true，HTMX 将使用模板标记来解析内容
• defaultSwapStyle:设置所有元素的默认交换样式(例如"innerHTML"、"outerHTML")
• defaultSwapDelay:设置交换内容前的默认延迟(以毫秒为单位)。
• timeout:设置 AJAX 请求的默认超时(以毫秒为单位)。
• historyCacheSize设置要缓存的历史记录条目数。

覆盖每个元素的配置

虽然全局配置适用于所有 HTMX 元素，您还可以使用属性配置单个元素。

以下是一些常用的元素特定属性

• hx-trigger:指定触发请求的事件。
• hx-target:指定要交换内容的目标元素
• hx-swap:定义应如何交换响应内容
• hx-boost:将普通锚点和表单转换为 AJAX 请求

示例

<button hx-post="/submit" hx-trigger="click" hx-target="#result" hx-swap="outerHTML">
    Submit
</button>

无论全局 defaultSwapStyle 设置如何，此按钮都将使用"outerHTML"交换。

高级配置选项

HTMX 还允许使用 JavaScript 进行更高级的配置。这些设置使您能够根据特定需求调整 HTMX。

示例

htmx.config.historyCacheSize = 20;
htmx.config.defaultSettleDelay = 100;
htmx.config.globalViewTransitions = true;
htmx.config.getCacheBusterParam = true;

此配置:

• 增加历史缓存大小
• 设置默认稳定延迟以实现更平滑的过渡
• 全局启用视图转换 API
• 向 GET 请求添加缓存清除参数

自定义标头配置

您可以向所有 HTMX 请求添加自定义标头。

htmx.config.headers = {
    'My-Custom-Header': 'my-custom-value'
};

调试配置

为了帮助调试，您可以记录当前配置。

console.log(JSON.stringify(htmx.config, null, 2));

这将以可读格式输出整个配置对象。

动态配置更改

您可以根据用户操作或应用程序状态动态更改配置。

document.getElementById('toggleHistory').addEventListener('click', function() {
    htmx.config.historyEnabled = !htmx.config.historyEnabled;
    console.log("History is now " + (htmx.config.historyEnabled ? "enabled" : "disabled"));
});

响应处理配置

HTMX 允许您控制如何在网页上处理服务器响应。您可以指定响应内容的去向和插入方式。

示例

<button hx-get="/api/data"
    hx-target="#result"
    hx-swap="innerHTML"
    hx-select="#data">
Load Data
</button>

单击此按钮时，将从"/api/data"获取数据，选择响应的"#data"部分，并通过替换其内部 HTML 将其插入"#result"元素中。

"hx-swap"属性还有其他选项，如"outerHTML"、"beforebegin"和"afterend"，用于不同的插入方法。

配置 HTMX

您可以通过几种不同的方式配置 HTMX，方法是使用 JavaScript 或直接将属性添加到 HTML。以下是可用于设置 HTMX 以适合您的项目的不同配置选项的概述