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

如何在Django项目中正确配置JS和CSS文件的路径？

admin
行业动态
2025-01-27
3

### Django项目中CSS和JS路径配置与引用方法：在Django项目中，通常在项目目录下的static文件夹中存放CSS和JS文件，并在settings.py中配置STATIC_URL和STATICFILES_DIRS。在HTML模板中使用{% load static %}标签及{% static ‘文件路径’ %}来引用这些静态文件。

在Django项目中，CSS和JS文件的路径配置是前端开发中的重要环节，合理的路径配置不仅能确保项目结构清晰，还能提高开发效率和维护性，以下将详细介绍如何在Django项目中配置CSS和JS路径：

一、创建静态文件夹

在Django项目的根目录下创建一个名为static的文件夹，用于存放所有的静态文件，包括CSS、JS和图片等，如果项目目录结构如下：

my_project/
│
├── manage.py
└── my_app/
    ├── __init__.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py

那么应该在my_project目录下创建static文件夹，并在其中创建css、js等子文件夹来分别存放CSS和JS文件，如下所示：

my_project/
│
├── manage.py
├── static/
│   ├── css/
│   │   └── style.css
│   ├── js/
│   │   └── script.js
└── my_app/
    ├── __init__.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py

二、配置settings.py文件

在my_project/settings.py文件中进行相关配置，以告诉Django静态文件的存储位置和访问URL。

1、设置STATIC_URL：这是静态文件的访问URL前缀，通常设置为/static/。

如何在Django项目中正确配置JS和CSS文件的路径？

2、设置STATICFILES_DIRS：这是一个列表，用于指定额外的静态文件目录，如果静态文件没有放在上述默认的static文件夹中，而是放在其他位置，就需要在这里添加这些位置的路径。

示例代码如下：

import os
设置静态文件的访问URL前缀
STATIC_URL = '/static/'
获取当前文件所在目录的父目录路径
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
设置静态文件目录列表，这里假设静态文件放在项目根目录下的static文件夹中
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

三、在HTML模板中引用静态文件

在Django的HTML模板中，使用{% load static %}标签加载静态文件模板标签，然后使用{% static '文件路径' %}来引用静态文件。

要引用static/css/style.css文件，可以这样写：

如何在Django项目中正确配置JS和CSS文件的路径？

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Website</title>
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
    <h1>Hello, World!</h1>
    <script src="{% static 'js/script.js' %}"></script>
</body>
</html>