htmx Head 标签支持扩展

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.6/dist/htmx.min.js" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" 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 请求来自一个 boosted 元素，则使用以下合并算法：

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

如果您希望在任一情况下覆盖此行为，可以在新的 <head> 标签上放置 hx-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>

事件

此扩展触发以下事件：