htmx 头部标签支持扩展

head-support 扩展为 htmx 请求的响应添加了对 head 标签 的支持。

htmx 最初是一个专注于 body 标签内 HTML 部分替换的库。因此，合并额外信息如 head 标签并不是库的重点。（这与例如 TurboLinks 形成对比，后者专注于将通过 AJAX 检索的整个网页合并到浏览器中。）

hx-boost 属性使 htmx 更接近于这种完整 HTML 文档支持的世界，并最终添加了对从 head 元素中提取 title 标签的支持，但完整的 head 标签支持从未是库的功能。此扩展解决了这一不足。

安装

安装 head-support 的最快方式是通过 CDN 加载。请记住，始终在扩展之前包含核心 htmx 库，并启用扩展。

<head>
    <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.7/dist/htmx.min.js" integrity="sha384-ZBXiYtYQ6hJ2Y0ZNoYuI+Nq5MqWBr+chMrS/RkXpNzQCApHEhOt2aY8EJgqwHLkJ" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/htmx-ext-head-support@2.0.2" integrity="sha384-cvMqHzjCJsOHgGuyB3sWXaUSv/Krm0BdzjuI1rtkjCbL1l1oHJx+cHyVRJhyuEz0" crossorigin="anonymous"></script>
</head>
<body hx-ext="head-support">
...

未压缩版本也可从 https://cdn.jsdelivr.net/npm/htmx-ext-head-support/dist/head-support.js 获取。

虽然 CDN 方法简单，但您可能需要考虑在生产环境中不使用 CDN。安装 head-support 的下一个最简单方法是将它复制到您的项目中。从 https://cdn.jsdelivr.net/npm/htmx-ext-head-support 下载扩展，将其添加到项目中的适当目录，并在需要的地方使用 <script> 标签包含它。

对于 npm 风格的构建系统，您可以通过 npm 安装 head-support：

npm install htmx-ext-head-support

安装后，您需要使用适当的工具将 node_modules/htmx-ext-head-support/dist/head-support.js（或 .min.js）打包。例如，您可以将扩展与来自 node_modules/htmx.org/dist/htmx.js 的 htmx 核心以及项目特定代码打包在一起。

如果您使用打包器管理 JavaScript（例如 Webpack、Rollup）：

import `htmx.org`;
import `htmx-ext-head-support`;

使用

<body hx-ext="head-support">
...
</body>

安装此扩展后，htmx 接收的所有包含 head 标签的响应（即使它们不是带有根 <html> 元素的完整 HTML 文档）都将被处理。

head 标签的处理方式取决于 htmx 请求的类型。

如果 htmx 请求来自提升元素，则使用以下合并算法：

如果 htmx 请求来自非提升元素，则所有内容将被_追加_到现有的 head 元素中。

如果您希望在任一情况下覆盖此行为，您可以将 hx-head 属性放置在新 <head> 标签上，并使用以下两个值之一：

控制合并行为

除此之外，您还可以使用以下属性控制单个元素的合并行为：

示例

作为一个示例，考虑现有文档中的以下 head 标签：

<head>
<link rel="stylesheet" href="https://the.missing.style">
<link rel="stylesheet" href="/css/site1.css">
<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
</head>

如果 htmx 接收到一个包含此新 head 标签的请求：

<head>
<link rel="stylesheet" href="https://the.missing.style">
<link rel="stylesheet" href="/css/site2.css">
<script src="/js/script2.js"></script>
<script src="/js/script3.js"></script>
</head>

则将发生以下操作：

最终的 head 元素将如下所示：

<head>
<link rel="stylesheet" href="https://the.missing.style">
<script src="/js/script2.js"></script>
<link rel="stylesheet" href="/css/site2.css">
<script src="/js/script3.js"></script>
</head>

事件

此扩展触发以下事件：