Django 静态文件配置
一、静态文件配置
在 settings.py 文件的最后添加
# settings.py
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.1/howto/static-files/
# STATIC SETTINGS
STATIC_URL = '/static/'
# BASE_DIR 是项目的绝对地址
STATIC_ROOT = os.path.join(BASE_DIR, 'collect_static')
# 以下不是必须的 各个app共用的文件可以放在这
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'common_static'),
)
二、各个文件夹的作用
STATIC_ROOT
- 是在部署的时候才发挥作用，执行 python managy.py collectstatic ，会在工程文件下生成(STATIC_ROOT )文件夹，把各个app下的静态文件收集到这个目录下。当然，需要配置Nginx。
STATICFILES_DIRS 静态文件的安放位置有两种 app/static
- 在每个 app 里面新建一个 static 文件夹，将静态文件放到里面在加载静态文件时。
- 例如要在模板中用到静态文件，Django 会自动在每个app里面搜索 static 文件夹。
- STATICFILES_DIRS 在所有的 app 文件外面，manage.py 同级目录下创建 common_static 目录公共的文件夹，也就是 STATICFILES_DIRS: common_static。
- 因为有些静态文件不是某个 app 独有的，那么就可以把它放到一个公共文件夹里面，方便管理。
- 注意，建立一个公共的静态文件的文件夹只是一种易于管理的做法，但是不是必须的，app是可以跨app应用静态文件的，因为最后所有的静态文件都会在 STATIC_ROOT 里面存在。
- 那现在的问题是：如何让 Django 知道你把一些静态文件放到app 以外的公共文件夹中呢，那就需要配STATICFILES_DIRS了。
STATIC_URL 静态路由映射。
- Django 利用 STATIC_URL 来让浏览器可以直接访问静态文件。
三、Django静态文件的引用
两个查找路径，在 static 标签中引用文件时有两个查找路径：
- app下的 static
- 工程下的 commen_static（STATICFILES_DIRS）
查找机制：
- STATICFILES_DIRS 告诉 Django。
- 首先，到 STATICFILES_DIRS 里面寻找静态文件。
- 其次，再到各个app的 static 文件夹里面找。
- django 查找静态文件是惰性查找，查找到第一个，就停止查找了。
四、STATIC_URL 详解
Django 用 STATIC_URL 来让浏览器可以直接访问静态文件，例如：STATIC_URL = '/static/'
浏览器上输入
- http://127.0.0.1:8000/static/img/1.png
- http://127.0.0.1:8000/static/img/2.png
那么就相当与访问
- /common_static/img/1.png
- /static/img/2.png
也就是说STATIC_URL = '/static/' 可以定位到各个app下的 static/ 和工程下的 commen_static/。
所以在浏览器上，利用前缀 STATIC_URL 的具体内容，来映射 app 下的 static 和 STATICFILES_DIRS，http://127.0.0.1:8000/static/ 相当于本地地址的 app/static 和 STATICFILES_DIRS。
五、static 静态文件模板使用
在 templates 目录下，使用设置的静态目录，新建 index.html 文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
{# 第一种写法 #}
<link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.min.css">
<script src="/static/bootstrap-3.3.7/js/bootstrap.min.js"></script>
{# 第二种写法 前缀动态匹配#}
<link rel="stylesheet" href="{% static 'bootstrap-3.3.7/css/bootstrap.min.css' %}">
<script src="{% static 'bootstrap-3.3.7/js/bootstrap.min.js' %}"></script>
</head>
<body>
<h3 class="text-center">index page</h3>
{% load static %}
<img src="{% static 'img/xyz.png' %}"/>
</div>
</body>
</html>1 在模板中添加一行 {% load static %}，告诉 Django 模板引擎要在模板中使用静态文件；这样，便可以使用 static 模板标签引入静态目录中的文件。
2 static 'img/xyz.png' 告诉 Django，要显示目录名中 img/xyz.png 的文件。
3 static 标签会在 img/xyz.png 前加上 STATIC_URL 的指定URL，得到 /static/img/xyz.png。
4 Django 模板引擎生成如下html：
<img src="/static/img/xyz.png" />
如果使用：
<img src="{{ STATIC_URL }}img/xyz.png" />
需要在 setting.py 中添加些设置
4.1 INSTALLED_APPS 中，加入 'django.contrib.staticfiles' ，这个一般都有。
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles'
]4.2 TEMPLATES 中，context_processors 中，加入 'django.template.context_processors.static'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [BASE_DIR / 'templates'],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
'django.template.context_processors.static'
],
},
},
]
