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

创建一个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. 【转】Ubuntu防火墙设置

    1.安装 sudo apt-get install ufw 2.启用 sudo ufw enable sudo ufw default deny 运行以上两条命令后,开启了防火墙,并在系统启动时自动开 ...

  2. 使用maven来管理您的java项目

    maven是一个项目管理工具,使用maven可以自动管理java项目的整个生命周期,包括编译.构建.测试.发布和报告等.在大型项目开发中,使用maven来管理是必不可少的. 一.安装maven 1.W ...

  3. (转载)移动WEB前端开发资源整合

    收藏起来,感谢原文大大:Bon~~~ 原文链接:http://www.ccwebsite.com/development-of-resource-integration-in-mobile-termi ...

  4. UE4 自定义物理表面类型(Surface Type)

    如果想在UE4中实现在接触到不同物体表面时发出不同的声音或者效果时,比如人在不同的表面上速度会不同,子弹打到不同的表面时会出现不同的特效等,我们可以使用UE4中的表面类型来实现(Surface Typ ...

  5. http协议 301和302的原理及实现

    一.来看看官方的说法: 301,302 都是HTTP状态的编码,都代表着某个URL发生了转移,不同之处在于:  301 redirect: 301 代表永久性转移(Permanently Moved) ...

  6. [转] java集合详解

    结合框架体系应该最重要的是如何灵活利用三种接口,set,map,list,他们如何遍历,各有什么特征,怎么样去处理,这是关键,在这个基础上再去掌握在什么场合用什么类型的接口.比如说list和set,s ...

  7. mysql limit查询优化

    mysql数据库中的查询语句有关limit语句的优化. 一般limit是用在分页的程序的分页上的,当应用数据量够小时,也许感觉不到limit语句的任何问题,但当查询数据量达到一定程度时,limit的性 ...

  8. Json.net对于导航属性的处理(解决对象循环引用)

    对于两张表A.B多对多的关系中,A的导航属性中有B,B的导航属性中有A,这样Json.net对A或者B对象序列化时会形成死循环 所以对于导航属性要加标签 首先在A.B实体类工程(Model)中引用Js ...

  9. Linux 多线程编程 实例 1

    子线程循环 10 次,接着主线程循环 100 次,接着又回到子线程循环 10 次,接着再回到主线程又循环 100 次,如此循环50次,试写出代码. #include <pthread.h> ...

  10. 浙江理工2015.12校赛-A

    孙壕请一盘青岛大虾呗 Time Limit: 5 Sec Memory Limit: 128 MB Submit: 577 Solved: 244 Description 话说那一年zstu与gdut ...