看下面两个页面:
一个显示文章列表,一个显示文章详细信息,其中的部分内容相同,有可以重用的部分。
所有就此例可以设置三个html文件:重用部分,目录部分,文章部分。
重用部分:
base.html
1 <!DOCTYPE html> 2 <!DOCTYPE html> 3 <html lang="zh-CN"> 4 {% load staticfiles %} 5 <head> 6 <meta charset="utf-8"> 7 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 8 <meta name="viewport" content="width=device-width, initial-scale=1"> 9 <title>首页</title> 10 11 <script type="text/javascript" src="{% static "bootstrap/js/jquery-2.0.0.min.js" %}"> </script> 12 <script type="text/javascript" src="{% static "bootstrap/js/jquery-ui.js" %}"></script> 13 <link href="{% static "bootstrap/css/bootstrap-combined.min.css" %}" rel="stylesheet" media="screen" > 14 <script type="text/javascript" src="{% static "bootstrap/js/bootstrap.min.js" %}"s></script> 15 </head> 16 17 <body> 18 <div class="container-fluid" id="LG"> 19 <div class="row-fluid"> 20 <img src="{% static "img/head1.png" %}" alt="返回主页"> 21 <div class="span12" > 22 </div> 23 </div> 24 25 <div class="row-fluid"> 26 <div class="span2"> 27 </div> 28 <div class="span6"> 29 <ul class="nav nav-tabs"> 30 <li class="active"> 31 <a href="#">首页</a> 32 </li> 33 <li> 34 <a href="#">资料</a> 35 </li> 36 <li > 37 <a href="#">信息</a> 38 </li> 39 </ul> 40 {% block context %} 41 添加内容 42 {% endblock context %} 43 </div> 44 <div class="span4"> 45 </div> 46 </div> 47 </div> 48 </body> 49 </html>
使用 {% block context %} {% endblock context %}标签,添加不同内容
目录部分
index.html
1 {% extends "blog/base.html" %} 2 {% block context %} 3 {% if latest_article_list %} 4 <ul> 5 {% for article in latest_article_list %} 6 <li> 7 <a href="{% url ‘blog:detail‘ article.id %}"> 8 {{ article.title }} </a> 9 </li> 10 {% endfor %} 11 </ul> 12 {% else %} 13 <p>No articles are available.</p> 14 {% endif %} 15 {% endblock context %}
使用 {% extends "blog/base.html" %} 载入模板文件,模板文件的位置为相对于templates的路径。
文章部分:
detail.html
1 {% extends "blog/base.html" %} 2 {% block context %} 3 <h1>{{ article.title }}</h1> 4 <p>{{ article.content }}</p> 5 {% endblock context %}
django文档地址:http://python.usyiyi.cn/django_182/ref/templates/language.html
原文:http://www.cnblogs.com/hb91/p/5423172.html