HTMX - 配置

---

---

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

HTMX入门

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

在您的项目中包含HTMX

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

验证HTMX激活

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

全局配置

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

// Enable template fragments
htmx.config.useTemplateFragments = true;

// Set default swap style
htmx.config.defaultSwapStyle = "outerHTML";

// Set default swap delay (in milliseconds)
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>

此按钮将使用“outerHTML”交换，而不管全局defaultSwapStyle设置。

高级配置选项

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

示例

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

此配置

• 增加了历史缓存大小
• 设置默认的settle延迟以获得更流畅的过渡
• 全局启用视图转换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”部分，并将其插入到“#result”元素中，替换其内部HTML。

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

配置HTMX

您可以通过几种不同的方式配置HTMX，无论是使用JavaScript还是直接向HTML添加属性。以下是用于设置HTMX以适应您的项目的不同配置选项的概述