我们在通过设置settings.py文件来实现静态文件在模板中调取和url直接访问
①Django项目文件夹下建立static/images 两个文件夹
②配置settings.py (添加了变量STATIC_DIR 、STATICFILES_DIRS 两个变量,这里需要注意变量名称如果不对的话无法访问到静态文件)
# ...省略代码...
# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
TEMPLATE_DIR = os.path.join(BASE_DIR,'templates')
STATIC_DIR = os.path.join(BASE_DIR,'static') # 本次新建
# ...省略代码...
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [TEMPLATE_DIR,],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
STATICFILES_DIRS = [STATIC_DIR,] # 本次新建
# ...省略代码...
STATIC_URL = '/static/' # 注意检查有没有这个变量
③重启Django服务器即可通过url访问
重点剖析:
STATIC_DIR 和 STATICFILES_DIRS 这两个变量是用于服务器内部调用文件的路径位置;
STATIC_URL 是用于客户端通过url来访问静态文件的位置。
【将静态文件写入html模板中】
配置好上面之后我们就可以在html模板中进行调用了
<!DOCTYPE html>
{% load staticfiles %} <!-- 表示要引入静态文件,需要放在html标签前面,避免无法通过验证 -->
<html>
<head>
<title>Rango</title>
</head>
<body>
<h1>Rango says...</h1>
<div>
hey there partner! <br />
<strong>{{ boldmessage }}</strong><br />
</div>
<div>
<a href="/rango/about/">About</a><br />
<img src="{% static "images/rango.jpg" %}" alt="picturt of Rango" /> <!-- 引入指定的静态文件 -->
</div>
</body>
</html>
【调用css和js】
<!DOCTYPE html>
{% load staticfiles %} <!-- 表示要引入静态文件,需要放在html标签前面,避免无法通过验证 -->
<html>
<head>
<title>Rango</title>
<!-- 调用CSS -->
<link rel="stylesheet" href="{% static "css/base.css" %}" />
<!-- 调用JS -->
<script src="{% static "js/jquery.js" %}"></script>
</head>
<body>
<h1>Rango says...</h1>
<div>
hey there partner! <br />
<strong>{{ boldmessage }}</strong><br />
</div>
<div>
<a href="/rango/about/">About</a><br />
<img src="{% static "images/rango.jpg" %}" alt="picturt of Rango" /> <!-- 引入指定的静态文件 -->
</div>
</body>
</html>
[29/Jul/2018 22:34:20] "GET / HTTP/1.1" 200 640
[29/Jul/2018 22:34:21] "GET /static/css/base.css HTTP/1.1" 404 1649
[29/Jul/2018 22:34:21] "GET /static/js/jquery.js HTTP/1.1" 404 1649
因为我们没有这个CSS和JS文件,所以服务器和客户端都会报404错误。