Django 静态文件

静态文件

   在一个Django项目中,我们可能用到很多静态文件(图片,前端库,框架),那么如何去调用这些静态文件其实在Django里面有了非常高明的处理方式。

   下面就看一看如何在Django项目中配置自己的静态文件,以及如何去使用它们。

创建目录

   首先我们需要在根目录下创建出一个static的文件夹用于存放静态文件,其次可以按照下面的规则进行创建目录以方便管理。

-- static	静态文件根目录
	-- public	公用文件夹,存放所有APP共有的资源
    	-- js
    	-- css
    	-- imges
    	-- modules 
    -- app01		APP01自己用的一些静态文件
    	-- js
    	-- css
    	-- imges
    	-- modules
    -- app02
    	-- js
    	-- css
    	-- imges
    	-- modules

   创建好目录之后,可以在public中放入一些静态文件了,如jQuerybootstrop等等。

   那么我这里就放一个自己写的css文件吧,放在app01css中,命名为h1-style.css

h1{
    background: red;
    color: #fff;
}

配置文件

   静态文件创建好了之后需要进行配置,打开项目全局文件夹中的settings.py,找到最下面

STATIC_URL = '/static/'  # 静态文件路径映射别名(十分重要,默认都是static,一般不更改)
STATICFILES_DIRS = ( # 必须是这个名字
    os.path.join(BASE_DIR,"static"),  # 真实的静态文件路径,注意逗号
)

引用文件

测试工作

   在配置完成后,我们可以对静态文件进行测试工作了。

   第一步:建立urls路由视图解析关系

from django.conf.urls import url
from django.contrib import admin
from app01 import views

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^static_test/', views.static_test),
]

   第二步:编写视图函数

from django.shortcuts import render

def static_test(request):
    return render(request,"static_test.html")

   第三步:编写HTML文档static_test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>static_test</h1>
</body>
</html>

   此时我们启动Django服务后发现<h1>并没有样式,这是由于还没对css文件进行引入。

静态解析

   现在在HTML文档中,我们就可以引用这个h1-style.css文件了。

   以下方式属于静态解析,是根据STATIC_URL这个变量值来进行查询的,也就是说如果你真实的静态文件根目录名字不叫static而是叫其他的,只要你在配置文件中进行了配置,那么在引入的时候通通使用STATIC_URL的变量值进行引入。

   注意静态引入的方式十分依赖于STATIC_URL起的别名,你的别名是什么,引入的目录名就应该是什么。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link rel="stylesheet" href="/static/app01/css/h1-style.css"> <!-- 静态解析,依赖别名 -->
    
    <title>Document</title>
</head>
<body>
    <h1>static_test</h1>
</body>
</html>

动态解析

   动态解析也依赖于STATIC_URL这个变量,不过在使用动态解析时STATIC_URL变量值(拼接路径映射别名)可以随意进行更换。

   他相当于找到这个变量,然后再用{% static '/app01/css/h1-style.css' %}后面的部分去与这个变量的别名映射即我们配置的路径做拼接,拼接上就找到了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    {% load static %} 
    <link rel="stylesheet" href="{% static '/app01/css/h1-style.css' %}"> <!-- 动态解析,不依赖别名 -->

    <title>Document</title>
</head>
<body>
    <h1>static_test</h1>
</body>
</html>
posted @ 2020-09-08 15:37  云崖先生  阅读(308)  评论(0编辑  收藏  举报