静态文件
在一个Django
项目中,我们可能用到很多静态文件(图片,前端库,框架),那么如何去调用这些静态文件其实在Django
里面有了非常高明的处理方式。
下面就看一看如何在Django
项目中配置自己的静态文件,以及如何去使用它们。
创建目录
首先我们需要在根目录下创建出一个static
的文件夹用于存放静态文件,其次可以按照下面的规则进行创建目录以方便管理。
-- static 静态文件根目录
-- public 公用文件夹,存放所有APP共有的资源
-- js
-- css
-- imges
-- modules
-- app01 APP01自己用的一些静态文件
-- js
-- css
-- imges
-- modules
-- app02
-- js
-- css
-- imges
-- modules
创建好目录之后,可以在public
中放入一些静态文件了,如jQuery
,bootstrop
等等。
那么我这里就放一个自己写的css
文件吧,放在app01
的css
中,命名为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>