htmx Head 标签支持扩展

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

¥The head-support extension adds support for head tags in responses to htmx requests.

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

¥htmx began as a library focused on partial replacement of HTML within the body tag. As such, merging additional information such as the head tag was not a focus of the library. (This is in contrast with, for example, TurboLinks, which was focused on merging entire web pages retrieved via AJAX into the browser.)

hx-boost 属性使 htmx 更接近完全 HTML 文档支持的世界，并且最终添加了从 head 元素中提取 title 标签的支持，但完全 head 标签支持从未成为库的功能。此扩展解决了该缺点。

¥The hx-boost attribute moved htmx closer to this world of full HTML-document support & support for extracting the title tag out of head elements was eventually added, but full head tag support has never been a feature of the library. This extension addresses that shortcoming.

安装

¥Installing

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

¥The fastest way to install head-support is to load it via a CDN. Remember to always include the core htmx library before the extension and enable the extension.

<head>
    <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.5/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 上还有一个未缩小的版本。

¥An unminified version is also available at 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> 标签将其包含在内。

¥While the CDN approach is simple, you may want to consider not using CDNs in production. The next easiest way to install head-support is to simply copy it into your project. Download the extension from https://cdn.jsdelivr.net/npm/htmx-ext-head-support, add it to the appropriate directory in your project and include it where necessary with a <script> tag.

对于 npm 样式的构建系统，你可以通过 npm 安装 head-support：

¥For npm-style build systems, you can install head-support via npm:

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 核心和项目特定代码打包在一起。

¥After installing, you’ll need to use appropriate tooling to bundle node_modules/htmx-ext-head-support/dist/head-support.js (or .min.js). For example, you might bundle the extension with htmx core from node_modules/htmx.org/dist/htmx.js and project-specific code.

如果你使用打包器来管理你的 javascript（例如 Webpack、Rollup）：

¥If you are using a bundler to manage your javascript (e.g. Webpack, Rollup):

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

使用

¥Usage

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

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

¥With this installed, all responses that htmx receives that contain a head tag in them (even if they are not complete HTML documents with a root <html> element) will be processed.

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

¥How the head tag is handled depends on the type of htmx request.

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

¥If the htmx request is from a boosted element, then the following merge algorithm is used:

如果 htmx 请求来自非增强元素，则所有内容将附加到现有的 head 元素。

¥If the htmx request is from a non-boosted element, then all content will be appended to the existing head element.

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

¥If you wish to override this behavior in either case, you can place the hx-head attribute on the new <head> tag, with either of the following two values:

控制合并行为

¥Controlling Merge Behavior

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

¥Beyond this, you may also control merging behavior of individual elements with the following attributes:

示例

¥Example

例如，请考虑现有文档中的以下 head 标签：

¥As an example, consider the following head tag in an existing document:

<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 标签的请求：

¥If htmx receives a request containing this new head tag:

<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>

然后将发生以下操作：

¥Then the following operations will occur:

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

¥The final head element will look like this:

<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>

事件

¥Events

此扩展触发以下事件：

¥This extension triggers the following events: