Django - 静态文件配置(CSS、HTML、图片、字体文件等)

    除了服务器生成的HTML外,Web应用程序通常还需要提供其他文件(例如图像,JavaScript或CSS),这些文件是呈现完整Web页面所必需的。在Django中,我们将这些文件称为“静态文件”。

    对于小型项目来说,这没什么大不了的,因为您可以将静态文件保存在Web服务器可以找到的位置。但是,在较大的项目(尤其是由多个应用程序组成的项目)中,处理每个应用程序提供的多组静态文件变得很棘手。

    django.contrib.staticfiles做的目的是:它将每个应用程序(以及您指定的任何其他位置)中的静态文件收集到一个易于在生产中使用的位置。

    在settings.py中最底下有一个叫static的文件夹,主要用来加载一些模板中用到的资源,提供给全局使用。


1 详解

1.1 前提:

  • 确保在DEBUG为True
  • 确保INSTALLED_APPS安装了django.contrib.staticfiles模块
  • settings.py下添加:STATIC_URL = '/static/'

settings.py

DEBUG = True

INSTALLED_APPS = [
    'django.contrib.staticfiles',	# 必须有
]

STATIC_URL = '/static/'

1.2 配置

(1)在APP下新建文件夹static,然后在这个static文件夹下创建一个当前APP的名字的文件夹,再把静态文件放到这个文件夹下:(类似于Templates配置)

在模板中这样调用:

{% load static %}								# 声明
<img src="{% static 'front/logo.jpg' %}">		# 调用

在模板中声明

{% load static %}{% load staticfiles %}

调用资源的时候使用:

{% static XXX %}

XXX就相当于STATICFILES_DIRS的一个位置。

(2)在项目下新建文件夹static,再新建和APP同名的文件夹,把该APP用到的静态文件,全放在这里面
如果有一些静态文件是不和任何APP挂钩的。那么可以在settings.py中添加STATICFILES_DIRS,以后DTL就会在这个列表的路径中查找静态文件。比如可以设置为:(类似于Templates配置)

STATICFILES_DIRS = [
    os.path.join(BASE_DIR,'static')
]

在模板中这样调用:

{% load static %}
<link rel="stylesheet" href="{% static 'index.css' %}">

1.3 简洁配置

如果不想每次在模版中加载静态文件时都使用{% load static %},那么就把static标签变成Django内置标签:

(1)在settings.py中的TEMPLATES/OPTIONS下添加'builtins':['django.templatetags.static']
(2)在模板中就可以直接使用static标签

 <img src="{% static 'front/logo.jpg' %}">
 <link rel="stylesheet" href="{% static 'index.css' %}">

2 个人喜好配置

1、settings.INSTALLED_APPS下添加:django.contrib.staticfiles

2、settings.py下添加:STATIC_URL = '/static/'

3、settings.py下添加:(此处有的不是用[],而是小括号(),但是会报加载不进来错误)

STATICFILES_DIRS = [
    os.path.join(BASE_DIR,"static")
]

4、在项目下新建文件夹static,再新建和APP同名的文件夹,把该APP用到的静态文件,全放在这里面

5、在settings.py中的TEMPLATES/OPTIONS下添加'builtins':['django.templatetags.static']

6、在模板中使用静态文件

<img src="{% static 'front/logo.jpg' %}">
<link rel="stylesheet" href="{% static 'index.css' %}">

参考资料

Django模版中加载静态文件配置详解

发布了115 篇原创文章 · 获赞 4 · 访问量 4603

猜你喜欢

转载自blog.csdn.net/weixin_43999327/article/details/104238614