3-静态文件

人のエゴで造られた虚にだけはなりたくはなくて / 2024-02-28 / 原文

模板文件

我们将html文件都默认放在templates这个文件夹下，这个文件夹一般在项目根目录新建即可

静态文件

我们将网站所使用的静态文件默认都放在static文件夹下

静态文件：前端已经写好，能直接使用的文件
	网站写好的JS文件
	网站写好的CSS文件
	网站用到的图片文件
	第三方框架
	...
拿来直接就可以使用的文件

一般情况我们在static文件夹下还会对文件进行划分

js文件夹
css文件夹
img文件夹
plugins文件夹
...

在浏览器中输入url能够看到对应的资源，是因为后端提前开设了相关的接口，如果访问不到资源，说明后端没有开设相关资源的端口。

静态文件配置

后端配置

在settings.py文件中，找到STATIC_URL，在它下面添加下面的代码

STATIC_URL = '/static/'  # 类似于访问静态文件的令牌

# 添加下面的这段代码即可
# 静态文件配置
# 默认查找位置是当前APP的目录下
# 这个配置定义了静态文件应用在启用 FileSystemFinder 查找器时将穿越的额外位置

# 方式1：
# 需要先导入os模块
STATICFILES_DIRS  = [
    os.path.join(BASE_DIR, 'static')
]

# 方式2：
# 不需要导入模块，因为django已经导入过pathlib模块了
STATICFILES_DIRS = [BASE_DIR / 'static']

设置好了以后，通过浏览器访问静态文件的路径，就可以得到对应文件了，例如：

127.0.0.1:8000/static/hero.png

前端配置

在html页面最顶部添加{% load static %}，告诉 Django模板引擎要在模板中使用静态文件；这样，便可以使用 static 模板标签引入静态目录中的文件

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h2>跟着光、成为光、散发光</h2>
    {{ hero_dict }}
    {{ now }}
    <p>下面是一张很好看的图片</p>
    <img src="{% static 'img/hero.png' %}" alt="这是一张英雄的图片">
</body>
</html>

img/hero.png告诉 Django，要显示目录名中 img/hero.png 的文件。

static 标签会在 img/hero.png 前加上 STATIC_URL 的指定URL，得到 /static/img/hero.png

Django 模板引擎生成如下html：

<img src="/static/img/hero.png" />

如果使用

<img src="{{ STATIC_URL }}img/hero.png" />

需要在 setting.py 中添加些设置

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'
]

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'
            ],
        },
    },
]