当前位置：首页 > 行业动态 > 正文

如何在Django模板中加载JavaScript文件？

admin
行业动态
2025-01-16
4

在 Django 模板中加载 JavaScript 文件，可以使用 {% load static %} 标签来引用静态文件。，，“ html，，，，，Document， {% load static %}，，，，，，，“

在Django项目中，加载JavaScript文件是一个常见的需求，为了确保JavaScript文件能够正确加载并执行，我们需要进行一些配置和代码编写，下面将详细介绍如何在Django模板中加载JavaScript文件：

一、配置静态文件路径

需要在Django项目的settings.py文件中配置静态文件的路径，这包括设置静态文件的URL前缀和存储路径。

import os
from pathlib import Path
BASE_DIR = Path(__file__).resolve().parent.parent
STATIC_URL = '/static/'
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

二、在urls.py中添加静态文件映射

在项目的urls.py文件中添加对静态文件的URL映射，这样可以确保在开发环境中能够通过URL访问静态文件。

from django.conf import settings
from django.conf.urls.static import static
from django.contrib import admin
from django.urls import path
from myapp import views
urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.index, name='index'),
] + static(settings.STATIC_URL, document_root=settings.STATICFILES_DIRS[0])

三、在模板中加载JavaScript文件

在Django模板中使用{% load static %}标签来加载JavaScript文件，这个标签会自动将静态文件的URL前缀添加到文件路径前面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Django Template</title>
    {% load static %}
    <script src="{% static 'js/script.js' %}"></script>
</head>
<body>
    <h1>Hello, Django!</h1>
</body>
</html>

四、示例表格

为了更好地理解上述步骤，下面是一个示例表格，展示了在不同文件中需要进行的配置和代码：

文件名	代码或配置
`settings.py`	`STATIC_URL = '/static/'`
	`STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),)`
`urls.py`	`+ static(settings.STATIC_URL, document_root=settings.STATICFILES_DIRS[0])`
`template.html`	`{% load static %}`