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


1184 浏览 5 years, 3 months

24 模板继承

版权声明: 转载请注明出处 http://www.codingsoho.com/

首先创建文件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加入到页面。