七、Django学习：模板嵌套

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对页面进行美化。