• 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"> 

  • 相关阅读:
    POJ:1185-炮兵阵地(状压dp入门)
    LightOj:1422-Halloween Costumes
    HDU:4632-Palindrome subsequence
    POJ:2955-Brackets(经典:括号匹配)
    POJ:2342-Anniversary party(树形dp入门题目)
    HUD:2853-Assignment(KM算法+hash)
    HDU:2255-奔小康赚大钱(KM算法模板)
    POJ:3020-Antenna Placement(二分图的最小路径覆盖)
    POJ:3041-Asteroids(匈牙利算法模板)
    SVN
  • 原文地址:https://www.cnblogs.com/lzhshn/p/13487980.html
Copyright © 2020-2023  润新知