Django + htmx 模式

这个仓库是我在使用Django <https://www.djangoproject.com/>_和htmx <https://htmx.org/>_开发项目时所使用和开发的模式的粗略汇编，包含完整的示例代码。

文档旨在在GitHub上查看：https://github.com/spookylukey/django-htmx-patterns/ 如有需要，代码可以在本地运行。

我的目标是记录和分享：

1. 所需的基本模式和控制流程
2. 通过一些实用工具可以做出的一些改进

除非另有说明，这里展示的代码仅依赖于Django和htmx。我不会将其打包成一个库。相反，它被发布到公共领域，我鼓励你复制粘贴它来满足自己的需求。（关于原因，请参见"方法"文档）。

有一些Django包为这里提到的某些内容提供了快捷方式，比如django-htmx <https://github.com/adamchainz/django-htmx>_，但为了清晰起见，我不会使用任何这些包。

目录

• 方法 <./approach.rst>_
• 基础模板 <./base_template.rst>_
• 头部 <./headers.rst>_
• POST请求 <./posts.rst>_
• 使用单独模板的局部视图 <./separate_partials.rst>_
• 单一视图的单独局部视图 <./separate_partials_single_view.rst>_
• 内联局部视图 <./inline_partials.rst>_
• 组合的单一视图操作 <./actions.rst>_
• 视图重启 <./view_restart.rst>_
• django-functest模式 <./django_functest.rst>_
• 模态对话框 <./modals.rst>_
• 表单验证 <./form_validation.rst>_

这是一个进行中的工作，我会尽量保持更新。欢迎提交PR。

简而言之

这个仓库最大的贡献是：

• 模板中的内联局部视图和块选择 <https://github.com/spookylukey/django-htmx-patterns/blob/master/inline_partials.rst#block-selection-in-the-template>_。

  这是一种模式，允许你将页面的各个部分保持在一起，以实现"行为的局部性"，并避免视图代码需要知道使用了哪些模板片段/局部视图。对htmx的模板代码更改通常只需要将模板的某些部分包装在Django模板的block中，并添加标准的htmx属性。对htmx的视图代码更改通常只需要在视图函数上添加一个装饰器：@for_htmx(use_block_from_params=True)。

  这种模式极大地提高了Django中htmx的可用性。

• 字段级htmx表单验证的完整示例 <./form_validation.rst>_，同时保留Django的Form抽象及其所有优点。

• 实现模态对话框的优雅模式 <./modals.rst>_

要求

• Django <https://www.djangoproject.com/>_

• htmx <https://htmx.org/>（有关安装建议，请参见基础模板 <./base_template.rst>）

• 这里最好的模式需要django-render-block <https://github.com/clokep/django-render-block>_::

  pip install django-render-block

怪物

我的示例代码包括可以被拥抱或踢来改变状态的悲伤和快乐的怪物。请注意，我不赞成踢怪物，也不建议拥抱它们。

代码文件夹

在代码文件夹 <./code/>_中有一个演示应用，包含文档中所有内容的完整工作示例。

要在本地安装，创建并激活一个虚拟环境，然后执行以下操作::

cd code pip install -r requirements.txt python manage.py migrate python manage.py runserver

反馈

非常欢迎你的反馈！如果你喜欢这个仓库，请给它加星，也请在讨论区 <https://github.com/spookylukey/django-htmx-patterns/discussions>_分享你的想法。

链接

一些其他不错的htmx资源：

• 如何在90秒内创建Django表单（使用HTMX）🐎 <https://www.photondesigner.com/articles/submit-async-django-form-with-htmx>_ - 简短的文章（和视频），展示如何快速开始在Django中使用HTMX
• 如何在Django中使用htmx <https://www.mattlayman.com/blog/2021/how-to-htmx-django/>_ - 教程博客文章
• django-htmx <https://github.com/adamchainz/django-htmx>_ - 实用工具库，附带有用的文档
• django-htmx-fun <https://github.com/guettli/django-htmx-fun>_ - Django/htmx示例应用
• django-siteajax <https://github.com/idlesign/django-siteajax>_ - 包含一些与本仓库类似的想法

如果你喜欢这个仓库，你可能还会从我的其他一些资源中受益：

• django-functest <https://github.com/django-functest/django-functest>_
• Django视图 — 正确的方式 <https://spookylukey.github.io/django-views-the-right-way/>_