118-django中的css、图片等静态资源的使用

这里首先要鄙视一下刘江的博客教程(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"> 

原文地址:https://www.cnblogs.com/lzhshn/p/13487980.html