看下面两个页面:
一个显示文章列表,一个显示文章详细信息,其中的部分内容相同,有可以重用的部分。
所有就此例可以设置三个html文件:重用部分,目录部分,文章部分。
重用部分:
base.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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
<!DOCTYPE html>
<!DOCTYPE html>
< html lang = "zh-CN" >
{% load staticfiles %}
< head >
< meta charset = "utf-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< title >首页</ title >
< script type = "text/javascript" src = "{% static " bootstrap/js/jquery-2.0.0.min.js" %}"> </ script >
< script type = "text/javascript" src = "{% static " bootstrap/js/jquery-ui.js" %}"></ script >
< link href = "{% static " rel = "external nofollow" bootstrap/css/bootstrap-combined.min.css" %}" rel = "stylesheet" media = "screen" >
< script type = "text/javascript" src = "{% static " bootstrap/js/bootstrap.min.js" %}"s></ script >
</ head >
< body >
< div class = "container-fluid" id = "LG" >
< div class = "row-fluid" >
< img src = "{% static " img/head1.png" %}" alt = "返回主页" >
< div class = "span12" >
</ div >
</ div >
< div class = "row-fluid" >
< div class = "span2" >
</ div >
< div class = "span6" >
< ul class = "nav nav-tabs" >
< li class = "active" >
< a href = "#" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" >首页</ a >
</ li >
< li >
< a href = "#" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" >资料</ a >
</ li >
< li >
< a href = "#" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" >信息</ a >
</ li >
</ ul >
{% block context %}
添加内容
{% endblock context %}
</ div >
< div class = "span4" >
</ div >
</ div >
</ div >
</ body >
</ html >
|
使用{%blockcontext%}{%endblockcontext%}标签,添加不同内容
目录部分
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
{% extends "blog/base.html" %}
{% block context %}
{% if latest_article_list %}
< ul >
{% for article in latest_article_list %}
< li >
< a href = "{% url 'blog:detail' article.id %}" rel = "external nofollow" >
{{ article.title }} </ a >
</ li >
{% endfor %}
</ ul >
{% else %}
< p >No articles are available.</ p >
{% endif %}
{% endblock context %}
|
使用{%extends"blog/base.html"%}载入模板文件,模板文件的位置为相对于templates的路径。
文章部分:
detail.html
1
2
3
4
5
|
{% extends "blog/base.html" %}
{% block context %}
< h1 >{{ article.title }}</ h1 >
< p >{{ article.content }}</ p >
{% endblock context %}
|
django文档地址:http://python.usyiyi.cn/django_182/ref/templates/language.html
总结
以上就是本文关于django使用html模板减少代码代码解析的全部内容,希望对大家有所帮助。如有不足之处,欢迎留言指出。感谢朋友们对本站的支持!
原文链接:http://www.cnblogs.com/hb91/p/5423172.html