这里首先要鄙视一下刘江的博客教程(https://www.liujiangblog.com/),关于django的部分,直接就是把官方那个教程搬过来了,并且没有任何说明是搬过来的。
推荐涂伟忠的自强学堂(https://code.ziqiangxuetang.com/django/django-tutorial.html),人家至少是自己写的。
关于静态资源,有三重内容:简单的静态资源,放在各个APP下面;与某个APP无关的公共的静态资源,放在STATICFILES_DIRS
;用来将所有静态资源收集到一起,使用STATIC_ROOT。
STATIC_URL = '/static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'other_static'), # 由于公共资源通常放在根目录下,这里直接写成'other_static'也是可以的 ] STATIC_ROOT = 'collect_static'
在django中,django.contrib.staticfiles
将每个应用程序(以及您指定的任何其他位置)中的静态文件收集到一个易于在生产中使用的位置。这是django在处理静态资源的一个最高纲领,包含3个方面:
- 优先查找公共的静态资源;
- 其次查找各个app里的静态资源;
- 当部署时,需要将所有静态资源收集到一个文件夹里,他们的相对路径会保持不变。
STATICFILES_DIRS,通常放置公共资源,django会查找指定的路径,所以如果你放在根目录下,直接丢一个文件夹名称就可以,不需要像一些教程里搞的很复杂:os.path.join(BASE_DIR, 'other_static')。
STATIC_URL,是针对某个app的,'/static/'表示在这个app的文件夹下,需要设置一个叫static的文件夹,放置静态资源。
STATIC_ROOT,是在部署例如nginx时,将所有的静态资源都收集到一起,运行命令:python3 manage.py collectstatic,此时会将所有静态文件统统复制到指定的文件夹下。按上述所写,这个文件夹位于项目的根目录。
结合到一起,如果你的css路径是:app_1/static/app_1/base.css,复制到collect_static时,显示为:collect_static/app_1/base.css!
凑巧你在另一个app_2里,也习惯于将最基础的那个css配置也命名为base.css,则他们被收集到一起时,会因为多了一层目录,而被区分开,不会覆盖:collect_static/app_1/base.css,collect_static/app_2/base.css。
假设你不这么干,直接在static里放着一个base.css,此时另外一个app里也是这么干的,当运行collectstatic命令时,就会出问题!所以django官方用心良苦告诉我们:在app下面建立static文件夹后,一定要在之内再建立一个和app同名的文件夹,然后再在这个文件夹里放置具体的静态文件。
接着,在根目录下,建立2个文件夹,一个叫other_static,用来放公用的静态资源;一个叫collect_static,用来收集所有静态资源。
在other_static下再建立一个文件夹image,表示存放图片,其中放置一张图片:timg.jpeg。
以上是配置相关的,下面看模板里如何写:
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>KNote-{% block title %}start page{% endblock %}</title> {% load static %} <link href="{% static 'notebook/base.css' %}" type="text/css" rel="stylesheet"> </head> <footer> <img src="{% static 'image/timg.jpeg' %}"> <p>a notebook for Miss kiki</p> <p>powerd by python & django & bootstrap</p> </footer>
请注意:
模板里写的路径,都是配置里所定义的放置静态内容的文件夹之后的路径!比如图片,在模板里,不用考虑other_static这个文件夹,只需要写image/...就行,css文件也是类似的!
当用F12查看器时,静态资源显示的都是static/...,并不会显示真正django工程里设置的各种静态文件夹及其路径。例如:
<link href="/static/notebook/base.css" type="text/css" rel="stylesheet">
<img src="/static/image/timg.jpeg">