首页 > Web开发 > 详细

django使用html模板减少代码

时间:2016-04-22 23:57:11      阅读:499      评论:0      收藏:0      [点我收藏+]

看下面两个页面:

技术分享

 

技术分享

 

一个显示文章列表,一个显示文章详细信息,其中的部分内容相同,有可以重用的部分。

所有就此例可以设置三个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

 



django使用html模板减少代码

原文:http://www.cnblogs.com/hb91/p/5423172.html

(1)
(1)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!