模板继承就是网站的多个页面可以共享同一个页面布局或者是页面的某几个部分的内容。通过这种方式你就需要在每个页面复制粘贴同样的代码了。 如果你想改变页面某个公共部分,你不需要每个页面的去修改,只需要修改一个模板就行了,这样最大化复用,减少了冗余,也减少了出错的几率,而且你敲的代码也少了。
创建一个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 %}
|
保存后刷新页面,看下是不是能正常工作:
最新文章
- Win7下Doxygen配置与使用
- 从csv文件导数据到MySQL
- 重拾OS的实现
- HDU 4738 Caocao&#39;s Bridges(Tarjan)
- 装过photoshop后出现configuration error
- javascript和“主流大型语言”(c# JAVA C++等)的差异
- AS3 - 数组Array的几个常用方法(附样例)
- c++ 概念及学习/c++ concept&;learning(二)
- Java文件分割
- BZOJ 3262 陌上花开 CDQ分治
- iOS学习之自定义视图时,在屏幕发生旋转时触发重新布局方法
- Php开发完全跨站点跨域名单点(SSO)同步登录和注销
- Socket基础(一)
- Android设备定制为永不锁屏
- 你不知道的JavaScript上卷笔记
- Mac OS X下安装和配置Maven
- PS图片去色
- 一个基于RBAC的通用权限设计清单
- 神奇的Scala Macro之旅(四)- BeanBuilder
- ggplot2 aes函数map到data笔记
热门文章
- linux中ONBOOT=yes的含义
- MyBatis操作指南-配置结果映射一对一,一对多,多对多(基于注解)
- C# xml压缩包不解压的情况下解析xml内容
- Python 迭代器&;生成器
- Ubuntu 12.04安装vim和配置
- windows系统调用 遍历进程的虚拟地址
- emacs + quicklisp + slime
- 【svn】一个设置,少写几个字
- 微信开发那点事(No.001)
- [转] ubuntu开启SSH服务