django css js

在Django项目中，CSS和JS文件的管理和引用是前端开发的重要组成部分，下面将详细介绍如何在Django中设置和使用本地的CSS与JS文件。

一、创建静态文件夹

1、位置选择：在Django项目的根目录下，通常与manage.py同级的位置创建一个名为static的文件夹，这个文件夹将用于存放所有的静态文件，包括CSS、JavaScript以及图像等。

2、目录结构：在static文件夹内，可以根据需要进一步创建子文件夹来分类管理不同类型的静态文件，可以创建css文件夹用于存放CSS文件，js文件夹用于存放JavaScript文件，images文件夹用于存放图片文件等。

二、配置settings.py

1、设置STATIC_URL：在settings.py文件中找到STATIC_URL设置项，将其值设置为/static/，这个设置定义了静态文件的URL前缀，即在浏览器中访问静态文件时的路径前缀。

2、配置STATICFILES_DIRS：找到STATICFILES_DIRS设置项，这是一个元组，用于指定Django查找静态文件的目录列表，需要将之前创建的static文件夹的路径添加到这个元组中，可以使用os.path.join函数来动态构建路径，确保在不同操作系统下都能正确识别。

import os

HERE = os.path.dirname(os.path.abspath(__file__))

HERE = os.path.join(HERE, '../')

STATICFILES_DIRS = (os.path.join(HERE, 'static/'),)

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

1、引入CSS文件：在需要使用CSS样式的HTML模板文件中，通过<link>标签引入CSS文件。href属性的值应为静态文件相对于STATIC_URL的路径，如果CSS文件位于static/css/style.css，则在HTML中应这样引用：

<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">

2、引入JS文件：类似地，通过<script>标签引入JavaScript文件。src属性的值同样应为静态文件相对于STATIC_URL的路径，如果JS文件位于static/js/script.js，则在HTML中应这样引用：

<script type="text/javascript" src="{% static 'js/script.js' %}"></script>

四、收集静态文件（可选）

1、命令介绍：在开发过程中，直接按照上述步骤就可以正常引用静态文件，但在部署到生产环境时，通常需要将所有的静态文件收集到一个指定的目录中，以便Web服务器能够正确地提供这些文件，这时可以使用Django提供的collectstatic命令。

2、使用方法：在终端或命令行中进入Django项目的根目录，然后运行以下命令：

python manage.py collectstatic

该命令会读取settings.py中的静态文件相关设置，并将所有符合条件的静态文件复制到STATIC_ROOT所指定的目录中，需要注意的是，在使用collectstatic命令之前，需要在settings.py中配置好STATIC_ROOT选项，指定收集静态文件的目标目录。

在Django中使用本地的CSS和JS文件主要涉及创建静态文件夹、配置settings.py以及在HTML文件中正确引用这些文件等步骤，通过合理地组织和管理静态文件，可以使Django项目的前端开发更加高效和规范，同时也便于项目的部署和维护。