- codingsoho.com

博客五部曲之一 - 简单博客

24 模板继承

首先创建文件base.html，它将会是所有其他模板的父模板。

<!DOCTYPE html>
<html>
<head>
    <title>
        {% block head_title %}Blog Basic{% endblock %}
    </title>
    <style type="text/css">
        {% block style %}{% endblock %}
    </style>
</head>
<body>
    {% include "message_display.html" %}
    <div class="container">
        {% block content %}
        {% endblock content %}
    </div>
</body>
</html>

很重要的一个特性是block 标签，子模板继承父模板的所有内容，但是可以通过修改block的内容做相应的变化，但是整体结构基本不变。
我们在base.html添加block content，这个是最简单的内容块，是页面的主要内容所在，子模板可以通过重写这个block来实现自己的内容。
同时，在base模板，我们还添加了标题及样式相关的block，这些都会在子模板进一步实现。

更新post_form.html，首先用extends继承父模板内容，然后将form相关的内容移入content block内，写在block之外的内容是不会显示的。

{% extends "base.html" %}

{% block content %}
    <h1>Form</h1>
    <form method="POST" action="">{% csrf_token %}
        {{form.as_p}}
        <input type="submit" name="create post">
    </form>
{% endblock content %}

更新post_detail.html，另外我们进一步更新了另外两个block。在head_title block里，调用{{block.super}}，它会同时获取父模板的内容，如果没有该语句，它直接替换父block。
通过继承实现style block，添加了css，注意在block之外添加了<style></style>，这个对页面显示并不起作为，写在这儿只是为了编辑器识别，方便语法高亮和自动代码完成。

{% extends "base.html" %}

{% block head_title %}{{instance.title}} | {{block.super}}{% endblock %}

<style type="text/css">
{% block style %}
h1{
    color: red;
}
{% endblock %}
</style>

{% block content %}
    <h1>{{instance}}</h1>
    {{instance.title}}<br>
    {{instance.id}}<br>
{% endblock content %}

重命名index.html到post_list.html，并修改为如下。别忘了修改view里的response的template名字。

{% extends "base.html" %}

{% block content %}
    {{ block.super }}
    <h1>{{title}} is working!</h1>
    {% for object in object_list %}
        <a href="{{ object.get_absolute_url }}">{{object.title}}</a><br>
        {{object.id}}<br>
    {% endfor %}
{% endblock content %}

最后，介绍一个include tag，它可以直接引入另外一个html文件，本例中将message内容单独写成message_display.html，并在base.html里面通过include加入到页面。