如何在Django模板中包含JavaScript？

Question

如何在Django模板中包含JavaScript？

javascriptpythondjangodjango-templatesdjango-staticfiles

29

我正在进行一个项目，并按照文档进行操作。但是我没有成功地包含JavaScript。

以下是我的设置：

STATIC_URL = '/static/'

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "static"),
)

STATIC_ROOT = '/static/'

TEMPLATE_DIRS = (
    os.path.join(BASE_DIR, 'templates'),
)

所以，我在我的项目中创建了一个static文件夹，并且里面有一个JavaScript文件。

myproject/static/app.js

我的urls.py文件：

urlpatterns = [
    url(r'^$', 'app.views.home'),
    url(r'^admin/', include(admin.site.urls)),
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

在我的模板中： myproject/templates/base.html:

<!DOCTYPE html>
<head>
  {% load static %}
  <script src="{% static 'app.js' %}"></script>   
  <title>Site</title>
</head>
<body>
<img src="{% static 'img.png' %}" alt="Mon image" />
  {% block content %}{% endblock %}
</body>
</html>

我的其他模板：

{% block content %}
    hello world
{% endblock %}

我在这里有一个“你好世界”。

http://127.0.0.1:8000/

但是我没有我的形象或脚本。

我尝试了很多不同的方法，但我从来没有成功过。

- BoumTAC

在使用“static”标签之前，尝试使用完整的URL获取文件（例如/static/myproject/img.png）。这样，您可以通过Django找到文件的位置（有时可能会有些棘手）。 - martinarroyo

Django文档提供了有关如何包含静态文件（如JS）的指南 https://docs.djangoproject.com/en/3.2/howto/static-files/ - Max

6个回答

4

您的模板应该使用{% load staticfiles %}而不是{% load static %} 源代码： https://docs.djangoproject.com/en/1.8/howto/static-files/ 此外，os.path.join(BASE_DIR, "static") 只会查找您应用程序中的静态文件，例如app/static/app/static.js。如果您有属于项目本身而不是特定应用程序的静态文件，您需要显式添加文件夹。请参阅我提到的文档页面上的“配置静态文件”第4点。

- Jorick Spitzen

2

我先按照文档操作，但是没有成功。我尝试使用load static和load staticfiles，但还是不行。 - BoumTAC

2

根据我的理解，STATICFILES_DIRS 应该在 settings.py 中定义，格式如下：

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
]

请查看文档 documentation。

- canishk

1

在基目录下创建名为“static”的目录，即与项目目录处于相似的级别。然后在settings.py中添加以下内容。

STATIC_URL = '/static/'
#setting for static files
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),) code here

- chintan bhatt

0

我是新手程序员，所以我的观点可能有些片面。首先，你需要检查你的树形目录是否符合 Django 文档的要求，因为你可能有更多的应用程序。

这意味着你应该在 your_app/static/your_app/ 中创建三个文件夹，分别对应 css、images 和 js，并放入它们各自的文件。

此外，请注意你的静态 URL 应该与你的静态根目录不同。

完成上述步骤后，你需要告诉 Django 每个应用程序的静态文件在哪里，因此你需要在 STATICFILES_DIRS 中声明。

最后，你需要运行 collectstatic 命令。

我还不知道如何将每个应用程序的 js 文件连接到模板中，所以无法提供更多帮助。希望这能对你有所帮助。

- Victor Orgaz

0

你可以在Django模板中包含CSS和JavaScript。*我的回答解释了如何在Django Admin中包含JavaScript。

例如，下面显示了static/my_app1/css/hello.css、static/my_app1/js/hello.js和templates/index.html这些文件。

django-project
 |-core
 |  └-settings.py
 |-my_app1
 |-my_app2
 |-static
 |  └-my_app1
 |     |-css
 |     |  └-hello.css # Here
 |     └-js
 |        └-hello.js # Here
 |
 └-templates
    └-index.html # Here

然后，在TEMPLATES中，将BASE_DIR / 'templates'设置为DIRS，并在settings.py中将BASE_DIR / 'static/'设置为STATICFILES_DIRS，如下所示，以便Django可以识别django-project下的templates和static文件夹。*My answer解释了如何设置Django模板，并推荐按照my answer的指示设置whitenoise来禁用浏览器缓存Django的静态文件。

# "settings.py"

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            BASE_DIR / 'templates' # Here
        ],
        ...
    },
]

...

STATIC_URL = 'static/'
STATIC_ROOT = 'staticfiles/'
STATICFILES_DIRS = [
    BASE_DIR / 'static/' # Here
]

最后，按照下面所示，在index.html中添加<link rel="stylesheet" ...>和<script ...></script>。

{# "index.html" #}

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="{% static 'my_app1/css/hello.css' %}">
</head>
<body>
    <script src="{% static 'my_app1/js/hello.js' %}"></script>
</body>
</html>

- Super Kai - Kazuya Ito

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Charlesthk · Accepted Answer

urls.py

from django.conf.urls import include, url
from django.contrib import admin

urlpatterns = [
    url(r'^admin/', include(admin.site.urls)),
]

settings.py

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "static"),
)

STATIC_URL = '/static/'

# remove STATIC_ROOT

base.html

您的标题标签未关闭。

<!DOCTYPE html>
<head>
  {% load static %}
  <script src="{% static 'app.js' %}"></script>   
  <title>Site</title>
</head>
<body>
<img src="{% static 'img.png' %}" alt="Mon image" />
  {% block content %}{% endblock %}
</body>
</html>