Django配置本地静态文件(CSS/JS)完整步骤

作者:微光时间:2026-10-23 14:40:27浏览:515

本文详细讲解在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中配置和使用本地静态文件的完整流程,希望对学习与实践有所帮助。

作者最新文章