将HTML importmap与Django集成，用于现代Web开发
项目描述
from dj_importmap.settings import INSTALLED_APPS
dj-importmap: 像老板一样使用HTML importmap！
dj-importmaps旨在帮助您以djangonic方式声明您的importmap。
给我一个例子！
例如，以下
# importmaps.py in one of your Django apps
from importmap import static
importmaps = {
# From your static files
"SearchComponent": static("js/search-component.js"),
# Or declare directly from a CDN
"StimulusJS": "https://unpkg.com/stimulus@3.2.2/dist/stimulus.umd.js"
}
这将生成以下
<script type="importmap">
{
"imports": {
"SearchComponent": "/static/js/search-component.js",
"StimulusJS": "https://unpkg.com/stimulus@3.2.2/dist/stimulus.js"
}
}
</script>
现在，您可以使用JS模块，就像什么都没发生一样
import {Controller, Application} from "StimulusJS"
import * as Search from "SearchComponent"
export default class {
// ...
}
酷！我该如何使用它？
-
从PyPI安装
pip install dj-importmap
-
添加到您的`INSTALLED_APPS
INSTALLED_APPS = [ # ... "importmap" # ... ]
-
在您的根
urls.py旁边创建一个importmaps.py，或在您的Django应用中importmaps = { # ... }
-
将
{% importmap %}添加到您的模板中{% load importmap %} <!doctype html> <html lang="fr" data-fr-scheme="light"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>…</title> <!-- This must be placed before the very first <script> in order to work --> {% importmap %} </head> </html>
您就可以开始了！
高级用法
每个应用的importmaps.py
您可以为整个Django项目和每个应用声明不同的importmap。默认情况下，当您在模板中调用{% importmap %}时，dj-importmap将按INSTALLED_APPS中声明的应用的顺序合并它们，后者优先于前者。
如果您想在特定应用中使用在 importmaps.py 中声明的，可以使用 {% importmap "app_name" %}，其中 app_name 与您 Django 应用的 apps.py 中声明的 AppConfig.name 相对应。在这种情况下，如果存在，{% importmap %} 将将应用的 importmaps.py 合并到项目的 importmaps.py 中。
dj-importmap 期望在项目的 urls.py 旁边找到项目的 importmaps.py，如 settings.ROOT_URLCONF 所声明。
或者，如果声明了 settings.ROOT_IMPORTMAPCONF 并指向一个有效的 Python 模块，dj-importmap 将将其作为项目的根导入映射。
生成的 <script> 的额外 HTML 属性
{% importmap %} 接受 kwargs 以允许您向生成的 <script> 添加任意 HTML 属性
{% importmap defer="true" %}
<!-- Using attributes with chars unauthorized in Django templates -->
{% importmap defer="true" "yes" as "data-is-cool" %}
<!-- Attribute without value -->
{% importmap defer="true" "yes" as "data-is-cool" %}
注意：尝试将没有值的 HTML 属性作为 {% importmap %} 的第一个参数指定会导致与可选应用名称的歧义。在这种情况下，{% importmap %} 将引发一个 TemplateSyntaxError。{% importmap %} 提供了一种通过将其第一个参数设置为一系列破折号来抑制这种歧义的可能性
<!-- TemplateSyntaxError: ambiguity -->
`{% importmap %}`
<!-- Ok -->
{% importmap "--" defer %}
下载文件
下载适用于您的平台的文件。如果您不确定选择哪个，请了解有关 安装包 的更多信息。
源分布
构建分布
dj_importmap-0.0.1.tar.gz 的散列
| 算法 | 散列摘要 | |
|---|---|---|
| SHA256 | 36b7fcca1d597b083f8301b8aaf45336a40a14d263c9926da0859de0a442e481 |
|
| MD5 | d0bf5d1e32dfe0134de4a2097cff0932 |
|
| BLAKE2b-256 | 91bda54fd2986b448eead5d171b9f1918df5eda68bc40f4deaef9ff34ae8f27f |
dj_importmap-0.0.1-py3-none-any.whl 的散列
| 算法 | 散列摘要 | |
|---|---|---|
| SHA256 | 4da810c849d2764d93abf321a3ac064a016e75d367fdf70d3e04d4530d73001e |
|
| MD5 | 3843bc5f7068e4ec7e00025c1d5aea3c |
|
| BLAKE2b-256 | f7c974cf2f350f1bc6ace029ae9a8ed92ac6dc14094936f3dfc0f1ec04390177 |
