模板继承就是网站的多个页面可以共享同一个页面布局或者是页面的某几个部分的内容。通过这种方式你就需要在每个页面复制粘贴同样的代码了。 如果你想改变页面某个公共部分，你不需要每个页面的去修改，只需要修改一个模板就行了，这样最大化复用，减少了冗余，也减少了出错的几率，而且你敲的代码也少了。

创建一个base模板

一个base模板就是你全站所有页面都会继承的最基本的网站框架模板。我们在blog/templates/blog/中创建一个base.html模板：

blog

└───templates

    └───blog

            base.html

            post_list.html

打开base.html，然后将post_list.html的所有内容都复制过来，现在它的内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
{% load staticfiles %}
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="http://fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
<title>Django Girls Blog</title>
</head>
<body>
    <div class="page-header">
        <h1><a href="/">Django Girls Blog</a></h1>
    </div>
    <div class="content">
        <div class="row">
            <div class="col-md-8">
                {% for post in posts %}
                    <div class="post">
                        <h1><a href="">{{ post.title }}</a></h1>
                        <p>published: {{ post.published_date }}</p>
                        <p>{{ post.text|linebreaks }}</p>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
</body>
</html>

在base.html中，将…块替换成下面的：

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<body>
    <div class="page-header">
        <h1><a href="/">Django Girls Blog</a></h1>
    </div>
    <div class="content">
        <div class="row">
            <div class="col-md-8">
            {% block content %}
            {% endblock %}
            </div>
        </div>
    </div>
</body>

我们其实就是将{% for post in posts %}{% endfor %} 替换成了{% block content %}{% endblock %}。 在base.html中我们创建了一个名字为content的block，其他页面可以通过继承base.html， 替换这个content块来生成新的页面，页面其他内容保持不变。

保存后，再修改post_list.html页面，只保留的内容：

1
2
3
4
5
6
7
 
{% for post in posts %}
    <div class="post">
        <h1><a href="">{{ post.title }}</a></h1>
        <p>published: {{ post.published_date }}</p>
        <p>{{ post.text|linebreaks }}</p>
    </div>
{% endfor %}

然后添加这句到post_list.html页面的最开始部分：

{% extends 'blog/base.html' %}

这句话的意思就是该模板继承自blog/base.html模板

还有一步就是要将刚刚的内容放到{% block content %}和 {% endblock content %}之间，这时候整个页面是这样的：

1
2
3
4
5
6
7
8
9
10
 
{% extends 'blog/base.html' %}
{% block content %}
{% for post in posts %}
    <div class="post">
        <h1><a href="">{{ post.title }}</a></h1>
        <p>published: {{ post.published_date }}</p>
        <p>{{ post.text|linebreaks }}</p>
    </div>
{% endfor %}
{% endblock content %}

保存后刷新页面，看下是不是能正常工作：

Django1.9开发博客（6）- 模板继承的更多相关文章

  1. Django1.7开发博客

    转自: http://www.pycoding.com/articles/category/django 基于最新的django1.7写的,通俗易懂,非常适合新手入门. 感谢博主! 参考教程: htt ...

  2. Django1.9开发博客（14）- 集成Xadmin

    xadmin是一个django的管理后台实现,使用了更加灵活的架构设计及Bootstrap UI框架, 目的是替换现有的admin,国人开发,有许多新的特性: 兼容 Django Admin 使用 B ...

  3. Django1.9开发博客（7）- 实现功能

    到目前为止我们已经完成了一个django应用的所有基础部分. 包括url配置.视图.模型和模板.接下来开始继续完善我们的博客系统了. 首先我们需要一个显示每篇文章的详细页面,对不? 文章详情 对于首页 ...

  4. Django1.9开发博客（12）- i18n国际化

    国际化与本地化的目的为了能为各个不同的用户以他们最熟悉的语言和格式来显示网页. Django能完美支持文本翻译.日期时间和数字的格式化.时区. 另外,Django还有两点优势: 允许开发者和模板作者指 ...

  5. Django1.9开发博客（11）- 富文本与代码高亮

    TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,支持目前流行的各种浏览器,由JavaScript写成. 功能配置灵活简单(两行代码就可以将编辑器嵌入网页中),支持AJAX.另一特点是加载速度 ...

  6. Django1.9开发博客（8）- 继续完善

    到现在为止我们已经完成的差不多了,并且基本的东西都已经学到了,是时候用起来了. 我们的博客还有很多功能需要完善,下面抛砖引玉新增几个功能,还有其他功能等你自己去发现和实现. 草稿箱 之前我们新建文章的 ...

  7. Django1.9开发博客（9）- 用户认证

    你应该注意到了一点,当你去新建.修改和删除文章的时候并不需要登录,这样的话任何浏览网站的用户都能随时修改和删除我的文章.这个可不是我想要的! 编辑和删除的认证 我们需要保护post_new, post ...

  8. Django1.9开发博客（13）- redis缓存

    Redis 是一个高性能的key-value数据库.redis的出现, 很大程度补偿了memcached这类keyvalue存储的不足,在部分场合可以对关系数据库起到很好的补充作用. 它提供了Pyth ...

  9. Django1.9开发博客（10）- 全文搜索

    Django本身不提供全文检索的功能,但django-haystack为其提供了全文检索的框架. django-haystack能为Django提供whoosh,solr,Xapian和Elastic ...

随机推荐

  1. [Android Tips] 18. Enable/Disable WiFi via adb

    adb shell svc wifi enable|disable Awesome ADB

  2. Fiddler---前端利器

    摘要:Fiddler是一个不错的工具,可以用来调试HTTP协议.工具很强大,本篇根据现有使用总结了下,以后有更多使用再做补充. 在做HTTPS协议对接的时候,拿不到数据,不得不找个工具试下,确定是接收 ...

  3. excel转换日期格式，将yyyymmdd类型日期转换成yyyy-mm-dd等日期类型方法

    源数据日期格式:例如: 20160420 20160422 目标日期格式类型: 2016-4-20 2016-4-22 或 2016/04/20 2016/04/22 方法: 一.选中相应数据的单元格 ...

  4. 网页中调用Google地图

    <html> <head>  <meta http-equiv="Content-Type" content="text/html; cha ...

  5. paper 94：视觉领域博客资源1之中国部分

    这是收录的图像视觉领域的博客资源的第一部分,包含:中国内地.香港.台湾 这些名人大家一般都熟悉,本文仅收录了包含较多资料的个人博客,并且有不少更新,还有些名人由于分享的paper.code或者数据集不 ...

  6. html5，output标签应用举例

    <form action="" id="myform" oninput="num.value=parseInt(num1.value)+pars ...

  7. Excel中设置下拉列表的来源怎么选择其他工作表的内容

    我就简单的说一下 SHEET1 的A1 要引用SHEET2的a1:a2的内容 在数据有效性里面选序列 输入=INDIRECT("sheet2!a1:a2") 或者你可以按楼上的意思 ...

  8. Css Study - 横向MENU

    http://cssmenumaker.com/menu/tabbed-chrome-and-blue HTML <div id="topMenu"> <ul&g ...

  9. 腾讯数据总监：运营人员必须掌握的APP基础数据分析体系(没有比这篇更系统全面的)

    导读:在互联网企业,任何一个APP都要事先规划好数据体系,才允许上线运营,有了数据才可以更好的科学运营.因此本文将为大家介绍APP的基础数据指标体系.主要分为五个维度,包括用户规模与质量.参与度分析. ...

  10. js !!条件判断或运算的作用

    今天看到一个判断语句非常奇怪: if(!!selected){} //为什么是双'!'号呢? 自己查了下资料终于明白了这其中的原理: 原来'!!'会将表达式转为Boolean类型的数据. 如果'!un ...