静态文件
在一个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>
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
