# 使用Django和HTMX简化动态Web开发（第三部分）：与Django集成秉持“自带电池 (Batteries Included)”理念的强大后端**[[Django]]**，与巧妙利用后端新鲜出炉的HTML片段的**[[HTMX]]**，二者结合堪称天作之合。本文将继续“**使用Django和HTMX简化动态Web开发**”系列，作为第三部分，我们将探讨在实际Django项目中集成HTMX的两种具体方法。 ![django-htmx结合的图片](/media/whitedec/blog_img/cd6a017531894572b0123aa2e403ef4b.webp) ----- ## 1. 不使用第三方包直接集成 {#sec-ca790606f6d7} 这是最纯粹、最轻量级的方法。无需复杂的安装过程，只需在HTML模板中添加一行脚本，即可立即使用HTMX的功能。 ### 安装方法 {#sec-1b32901b18e3} HTMX官方文档提供了多种安装方法，但最快捷的方式无疑是利用**CDN**。 * **利用CDN（最快）：** 只需将以下代码放入`base.html`的``标签内。 ```html ``` * **直接下载：** 如果安全或离线环境是您的优先考量，可以下载[htmx.min.js](https://www.google.com/search?q=https://unpkg.com/htmx.org/dist/htmx.min.js)并将其放入项目的`static`文件夹中，然后指定路径。 * **npm：** 如果您正在使用构建系统，可以通过`npm install htmx.org`命令进行安装。 [前往HTMX安装官方文档](https://htmx.org/docs/#installing) ----- ## 2. 使用django-htmx包 {#sec-e127afe305db} 在Django生态系统中，存在一个专门的库，可以帮助您更“Django式”地使用[[HTMX]]。它就是**django-htmx**。 ### 安装与配置 {#sec-1fad40addfc9} 按照[django-htmx官方文档](https://django-htmx.readthedocs.io/en/latest/installation.html)的说明，执行以下步骤。 1. **安装包** ```bash python -m pip install django-htmx ``` 2. **注册到INSTALLED_APPS** ```python INSTALLED_APPS = [ ..., "django_htmx", ..., ] ``` 3. **添加中间件** ```python MIDDLEWARE = [ ..., "django_htmx.middleware.HtmxMiddleware", ..., ] ``` ----- ### django-htmx有多便捷？ {#sec-9b3f39c88466} [[HTMX]]本身就是一个非常简洁的工具，因此，是否真的有必要额外安装**django-htmx**这个包？这确实会让人产生疑问。事实上，即使没有这个包，实现核心功能也毫无障碍。但如果我们深入了解它提供的便利功能，就会明白为什么许多开发者会选择它。根据**django-htmx**的官方文档，该包最显著的特点是通过**中间件扩展了`request`对象**。注册中间件后，会生成一个`request.htmx`属性，通过它我们可以非常方便地获取以下详细信息： * **请求信息查询：** `boosted`, `current_url`, `current_url_abs_path`, `history_restore_request`, `prompt` * **目标与触发器控制：** `target`, `trigger`, `trigger_name`, `triggering_event` 此外，它还支持**两个专用的模板标签**，以协助模板开发。 * `{% htmx_script %}`: 这是一个主要标签，用于插入HTMX库脚本。 * `{% django_htmx_script %}`: 当HTMX通过CDN或静态文件直接引入时，这是一个辅助标签，用于额外插入调试所需的扩展脚本。尤其令人印象深刻的是`django_htmx.http`模块中包含的**11个实用方法**。其中，`trigger_client_event()`无疑是亮点。它允许服务器端轻松配置`HX-Trigger`头部并随响应发送，从而使得**服务器能够直接控制客户端事件**。一旦熟悉，这将是一个非常强大且频繁使用的工具。当然，所有这些功能开发者也可以通过编写自定义中间件或手动操作HTTP头部来实现。因此，如果像我一样偏爱亲手构建的开发者，可能不会觉得它是一个必需的包。总而言之，**django-htmx**并非“不可或缺”，但它确实是一个**“能显著提升开发体验”**的包。其官方文档内容不多，只需投入一两个小时即可充分掌握，因此您可以根据自己的项目特点决定是否引入。 ----- ## 总结 {#sec-2c0be77e7e31} 如果您只是想实现简单的开关按钮或几个点赞功能，那么**直接使用（CDN）**就足够了。避免增加不必要的依赖性，这可能是最经济的做法。然而，如果项目规模不断扩大，并且需要在一个视图中同时处理整个页面和部分页面，那么**django-htmx**就值得考虑了。哪种方式更吸引您呢？事实上，django-htmx并非一个沉重的包，它相当轻量，所以直接安装并使用也可能是一个不错的选择。这很大程度上取决于开发者的个人偏好和习惯，比如“我要最小化依赖包”或者“我更喜欢亲手实现大部分功能”。但无论您做出何种选择，有了[[HTMX]]，您都将有机会摆脱[[JavaScript]]的束缚，重新体验HTML的简洁之乐。 **相关文章阅读** : - [使用Django和HTMX简化动态Web开发（第一部分）](/ko/whitedec/2025/1/27/django-htmx-dynamic-web-simplification/) - [使用Django和HTMX简化动态Web开发 - Ajax（第二部分）](/ko/whitedec/2025/1/27/django-htmx-dynamic-web-simplification-2/) - [使用Django和HTMX简化动态Web开发（第三部分）：Django集成方法](/zh-hans/whitedec/2025/1/27/django-htmx-dynamic-web-simplification-3/) - [使用Django和HTMX简化动态Web开发（第四部分）：Payload传输方式](/zh-hans/whitedec/2025/1/27/django-htmx-csrf-token-integration/) - [使用 Django 和 HTMX 简化动态 Web 开发：Form 和 Serializer 的应用](/zh-hans/whitedec/2026/4/22/django-htmx-forms-serializer-usage/) - [使用 Django 和 HTMX 简化动态 Web 开发：Trigger 运用指南](/zh-hans/whitedec/2026/4/23/django-htmx-dynamic-web-development-trigger/)