blog_list.html，blog_detail.html，blogs_with_type.html這3個文件有大量的重復代碼，如果把這些重復的代碼提取到另外一個html文件中，也就是使用模板嵌套，就可以達到復用的目的。
- 在
blog templates文件夾下面建立一個新的文件base.html，並將重復的html代碼復制進去。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div>
<a href='{% url "home" %}'>
<h3>個人博客網站</h3>
</a>
</div>
</body>
</html>
- 使用模板語言
block來構建塊，用於其他html文件對其的引用
block以block block_name開頭，以endblock結束，其中block_name為自己取的塊名
修改base.html如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{% block title %}{% endblock %}</title>
</head>
<body>
<div>
<a href='{% url "home" %}'>
<h3>個人博客網站</h3>
</a>
</div>
{# 加一個橫線用於分割頁面 #}
<hr>
{% block content %}{% endblock %}
</body>
</html>
- 使用
extends引用base.html
blog_detail.html修改如下：
{% extends 'base.html' %}
{# 頁面標題 #}
{% block title %}
{{ blog.title }}
{% endblock %}
{# 頁面內容 #}
{% block content %}
<h3>{{ blog.title }}</h3>
<p>作者：{{ blog.author }}</p>
<p>發表時間：{{ blog.created_time|date:"Y-m-d G:m:s" }}</p>
<p>分類：
<a href='{% url "blogs_with_type" blog.blog_type.pk %}'>
{{ blog.blog_type }}
</a>
</p>
<p>{{ blog.content }}</p>
{% endblock %}
解釋：使用extends來擴展使用base.html
- 類似的修改
blogs_with_type.html和blog_list.html文件
blogs_with_type.html
{% extends 'base.html' %}
{# 頁面標題 #}
{% block title %}
{{ blog_type.type_name }}
{% endblock %}
{# 頁面內容 #}
{% block content %}
<h3>{{ blog_type.type_name }}</h3>
{% for blog in blogs %}
<a href="{% url 'blog_detail' blog.pk %}">
<h3>{{ blog.title }}</h3>
</a>
<p>{{ blog.content|truncatechars_html:30 }}</p>
{% empty %}
<p>-- 暫無博客，敬請期待 --</p>
{% endfor %}
<p>一共有{{ blogs|length }}篇博客</p>
{% endblock %}
blog_list.html
{% extends 'base.html' %}
{# 頁面標題 #}
{% block title %}
個人博客網站
{% endblock %}
{# 頁面內容 #}
{% block content %}
{% for blog in blogs %}
<a href="{% url 'blog_detail' blog.pk %}">
<h3>{{ blog.title }}</h3>
</a>
<p>{{ blog.content|truncatechars_html:30 }}</p>
{% empty %}
<p>-- 暫無博客，敬請期待 --</p>
{% endfor %}
<p>一共有{{ blogs|length }}篇博客</p>
{% endblock %}
再次運行服務，可以得到相同的結果。
模板文件放在
app文件夾還是放到項目文件夾，取決於這個模板文件是否可以被其他的app復用，是否會對app產生影響。我們博客的base.html最好放在項目文件夾中。
- 在
mysite文件夾下面新建templates文件夾(manage.py同級目錄），將blog base.html文件移動到該文件夾內。為了讓新的路徑能識別，需要在settings.py文件中進行設置。
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [
os.path.join(BASE_DIR, 'templates'),
],
'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',
],
},
},
]
再次啟動頁面，可以看到頁面結果一樣。
同理blog_detail.html， blog_list.html，blogs_with_type.html也可以移動到mysite templates目錄下。但為了避免混淆，可以在mysite templates目錄下新建一個blog文件夾，將這三個文件放到這個目錄下。
將
blog_detail.html，blog_list.html，blogs_with_type.html移動到mysite templates blog文件夾下面，修改app下blog views.py以找到該路徑。
from django.shortcuts import render_to_response,get_object_or_404
from .models import Blog, BlogType
# Create your views here.
def blog_list(request):
context = {}
context['blogs'] = Blog.objects.all()
return render_to_response('blog/blog_list.html', context)
def blog_detail(request, blog_pk):
context = {}
context['blog'] = get_object_or_404(BlogType, pk=blog_type_pk)
return render_to_response('blog/blog_detail.html', context)
def blogs_with_type(request, blog_type_pk):
context = {}
blog_type = get_object_or_404(BlogType, pk=blog_type_pk)
context['blogs'] = Blog.objects.fileter(blog_type=blog_type)
context['blog_type'] = blog_type
return render_to_response('blog/blogs_with_type.html', context)
再次啟動頁面，可以看到頁面結果一樣。
總結：通過模板嵌套，讓代碼更簡潔明了，但是顯示的頁面還是比較簡陋，這就產生了新的需求，使用css對頁面進行美化。