本文详细讲解在Django项目中如何配置并调用本地的CSS和JavaScript文件。通过创建static目录、修改settings.py中的STATICFILES_DIRS配置,以及在HTML模板中正确引用资源路径,实现静态文件的本地化管理与加载。
Django静态文件配置概述
本文主要介绍如何在Django项目中正确配置和使用本地的CSS与JavaScript文件,并通过具体示例代码展示详细操作步骤,为相关开发工作提供参考。
网络上关于Django使用本地CSS/JS的文章众多,但许多内容表述不够清晰或存在误导。
本文基于实际验证通过的有效方案进行记录,确保配置方法可用。
创建static目录与资源存放
首先,在与manage.py文件相同的层级目录下创建一个名为static的文件夹,并将所需的CSS、JS以及图片等资源文件存放其中,也可包含子文件夹。
项目目录结构示例如下:
项目目录结构示例
➜ FileService git:(master) ✗ tree
.
├── 2kill_port.sh
├── FileService
│ ├── __init__.py
│ ├── __pycache__
│ │ ├── __init__.cpython-37.pyc
│ │ ├── settings.cpython-37.pyc
│ │ ├── urls.cpython-37.pyc
│ │ └── wsgi.cpython-37.pyc
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
├── db.sqlite3
├── en_bg.jpg
├── fileoperation
│ ├── __init__.py
│ ├── __pycache__
│ │ ├── __init__.cpython-37.pyc
│ │ ├── admin.cpython-37.pyc
│ │ ├── models.cpython-37.pyc
│ │ └── views.cpython-37.pyc
│ ├── admin.py
│ ├── apps.py
│ ├── migrations
│ │ ├── __init__.py
│ │ └── __pycache__
│ │ └── __init__.cpython-37.pyc
│ ├── models.py
│ ├── templates
│ │ ├── bg_homg.html
│ │ └── home.html
│ └── views.py
├── files
│ ├── 11.log
│ ├── 22.log
│ ├── 44.log
│ ├── th.jpeg
│ ├── �\217�\225快�\205�\ 2020-01-08\ �\213�\215\2101.50.03.png
│ └── �\235�\231��\212��\224\200�\207��\201.pdf
├── kill_port.sh
├── manage.py
└── static
├── images
│ └── en_bg.jpg
└── style
└── style.css
修改settings.py配置
接下来,只需在FileService/settings.py配置文件的末尾添加以下代码即可完成静态文件路径的配置:
STATICFILES_DIRS配置代码
STATIC_URL = '/static/'
STATICFILES_DIRS=[
os.path.join(BASE_DIR,'static')
]
HTML模板中引入资源
最后,在需要使用的HTML模板文件中,通过以下方式引入静态资源:
HTML引入示例代码
<head>
<link rel="stylesheet" type="text/css" href="../static/style/style.css" rel="external nofollow" />
<meta charset="UTF-8">
<title>文件传输</title>
</head>
以上即为Django中配置和使用本地静态文件的完整流程,希望对学习与实践有所帮助。