Django的静态文件图片、CSS、JS配置和模板展示及URL访问

我们在通过设置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错误。

Django的静态文件图片、CSS、JS配置和模板展示及URL访问

猜你喜欢