118-django中的css、图片等静态资源的使用
2020-08-11 23:10 lzhshn 阅读(470) 评论(0) 编辑 收藏 举报这里首先要鄙视一下刘江的博客教程（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">
