tango with django(第四章模版和多媒体文件)

　　在这一章，我们介绍Django模版引擎，同时展示怎样引用静态文件和多媒体文件，这两种都可以继承到应用网页中。

4.1 使用模版

　　截至到这个点，我们只是连接URL和视图。然而，Django框架是基于MVT(Model-View-Template)架构。在这一章，我们将会深入模版怎样和视图结合起来，接下来几章，和模型结合起来。

　　为什么使用模版？为了复用html代码，很多东西都是重复的。

配置模版文件夹

　　在Django项目目录(e.g.<workspace>/tango_with_django_project/)，创建一个templates的文件夹。在templates文件夹中创建rango目录。这个目录存储这和rango应用相关的模版。

　　把模版加入到项目设置中,不要写死路径。

TEMPLATE_DIR = os.path.join(BASE_DIR, 'templates')
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',
            ],
        },
    },
]

添加一个模版

　　在 templates/rango/文件夹下新建一个文件，添加如下内容。

<!DOCTYPE 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>
		</div>
	</body>
	
</html>

然后在rango/views.py中，修改

from django.shortcuts import render
from django.http import HttpResponse
from django.shortcuts import render

# Create your views here.

def index(request):
	# return HttpResponse("Rango says hey there partner!")
	context_dict = {'boldmessage': "Crunchy, creamy, cookie, candy, cupcake!"}
	return render(request, 'rango/index.html', context=context_dict)

def about(request):
	return HttpResponse("Rango says here is the about page.")

　4.2 静态多媒体文件

配置静态多媒体文件夹

在你的项目主目录，建一个static的文件夹，在static文件夹中创建一个images文件夹，在images这个目录下放入一个图片（rango.jpg）

修改主目录setting.py

STATIC_DIR = os.path.join(BASE_DIR, 'static')
STATICFILES_DIRS = [STATIC_DIR, ]
STATIC_URL = '/static/'

　　在浏览器中访问 http://127.0.0.1:8000/static/images/rango.jpg即可看到刚刚那张图片。

静态文件和模版

<!DOCTYPE html>
{% load staticfiles %}
<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="Picture of Rango" />
		</div>
	</body>
	
</html>

tango with django(第四章 模版和多媒体文件)

tango with django(第四章模版和多媒体文件)