Django之模板层

一 模板简介

在刚刚介绍完的视图层中我们提到，浏览器发送的请求信息会转发给视图函数进行处理，而视图函数在经过一系列处理后必须要有返回信息给浏览器。如果我们要返回html标签、css等数据给浏览器进行渲染，我们可以在视图函数中这么做

  1. def current_datetime(request):
  2.     now = datetime.datetime.now()
  3.     html = "<html><body>It is now %s.</body></html>" % now
  4.     return HttpResponse(html)

上例所示，我们直接将HTML代码放到视图函数里，然后进行返回，这可以使我们很直观地看清楚浏览器从发送请求到看到前端界面内容的这个过程中视图函数的基本工作原理，但是这种将前端代码与后端代码耦合到了一起开发方式，会存在以下问题

  1. 1、程序的可维护性与可扩展性问题
  2. 前端界面一旦需要重新设计、修改，则必须对后端的Python代码进行相应的修改。 然而前端界面的修改往往比后端 Python 代码的修改要频繁得多，因此如果可以在不进行 Python 代码修改的情况下变更前端界面的设计，那将会方便得多。
  4. 2、开发效率问题
  5. Python 代码编写和 HTML 设计是两项不同的工作，大多数专业的网站开发环境都将它们分配给不同的人员（甚至不同部门）来完成。 专门的程序员去编写 Python代码、专门的设计人员去制作模板，这两项工作同时进行，效率才是最高的。

基于上述原因，将前端页面和Python的代码分离是一种不错的开发模式。 为此 Django专门提供了模板系统 (Template System，即模板层)来实现这种模式，这就是本章要具体讨论的问题。

django的模板=HTML代码+模板语法

存放于templates目录下的html文件称之为模板文件，如果我们想要返回的html页面中的数据是动态的，那么必须在html页面中嵌入变量，这便用到了django的模板语法，具体来说，django的模板语法有以下重点

  1. 一、变量：{{ 变量名 }}
  2.     1.1 深度查询：句点符的应用
  3.     1.2 过滤器
  4. 二、标签：{% 标签名 %}
  5. 三、自定义标签和过滤器
  6. 四、模板的导入和继承

下面就让我们来一一介绍它们

二 模板语法之变量

2.1 变量的基本使用

如果html代码中的数据不是固定死的，而是动态变化的，则必须在html中嵌入变量，为此，模板语法提供了变量的概念，允许我们在html代码中嵌入变量，我们只需要在视图函数中用render方法为html文件中指定的变量赋值即可，具体用法如下

test.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <p>{{ msg }}</p>
  9. <p>{{ dic }}</p>
  10. <p>{{ obj }}</p>
  11. <p>{{ li }}</p>
  12. </body>
  13. </html>

我们需要在视图函数中为模板test.html的变量名msg、li、dic、obj、obj_li赋值,views.py内容如下

  1. from django.shortcuts import render
  3. def test(request):
  4.     # 传给模板的变量值可以是任意python类型，如下
  5.     msg='hello world'
  6.     dic={'k1':1,'k2':2}
  7.     class Person(object):
  8.         def __init__(self,name,age):
  9.             self.name=name
  10.             self.age=age
  12.     obj=Person('egon',18)
  13.     li = [1,'aaa',obj]
  15.     return render(request,'test.html',{'msg':msg,'dic':dic,'obj':obj,'li':li})
  16.     # 注意：
  17.     # 1、render函数的第三个参数包含了要传给模板的变量值，是一个字典类型，该字典中的key必须与模板文件中的变量名相对应，render函数会去templates目录下找到模板文件，然后根据字典中的key对应到模板文件中的变量名进行赋值操作，最后将赋值后的模板文件内容返回给浏览器
  18.     # 2、可以将render函数的第三个参数简写为locals(),如下
  19.     return render(request,'test.html',locals()) #locals()会将函数test内定义的名字与值转换为字典中的k与v

2.2 深度查询之句点符的使用

当视图函数传给模板的值中包含多个元素时，若想取出其中的单个元素，就必须使用句点符了。

句点符既可以引用容器类型的元素，也可以引用对象的方法，如下

test.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  9. <!--调用字符串对象的upper方法，注意不要加括号-->
  10. <p>{{ msg.upper }}</p>
  12. <!--取字典中k1对应的值-->
  13. <p>{{ dic.k1 }}</p>
  15. <!--取对象的name属性-->
  16. <p>{{ obj.name }}</p>
  18. <!--取列表的第2个元素,然后变成大写-->
  19. <p>{{ li.1.upper }}</p>
  21. <!--取列表的第3个元素，并取该元素的age属性-->
  22. <p>{{ li.2.age }}</p>
  24. </body>
  25. </html>

2.3 过滤器

过滤器类似于python的内置函数，用来把视图传入的变量值加以修饰后再显示，具体语法如下

  1. {{ 变量名|过滤器名:传给过滤器的参数 }}

常用内置过滤器

  1. #1、default
  2. #作用：如果一个变量值是False或者为空，使用default后指定的默认值，否则，使用变量本身的值，如果value=’‘则输出“nothing”
  3. {{ value|default:"nothing" }}
  5. #2、length
  6. #作用：返回值的长度。它对字符串、列表、字典等容器类型都起作用，如果value是 ['a', 'b', 'c', 'd']，那么输出是4
  7. {{ value|length }}
  9. #3、filesizeformat
  10. #作用：将值的格式化为一个"人类可读的"文件尺寸(如13KB、4.1 MB、102bytes等等），如果 value 是 12312312321，输出将会是 11.5 GB
  11. {{ value|filesizeformat }}
  13. #4、date
  14. #作用：将日期按照指定的格式输出，如果value=datetime.datetime.now(),按照格式Y-m-d则输出2019-02-02
  15. {{ value|date:"Y-m-d" }}　　
  17. #5、slice
  18. #作用：对输出的字符串进行切片操作，顾头不顾尾,如果value=“egon“，则输出"eg"
  19. {{ value|slice:"0:2" }}　
  21. #6、truncatechars
  22. #作用：如果字符串字符多于指定的字符数量，那么会被截断。截断的字符串将以可翻译的省略号序列（“...”）结尾，如果value=”hello world egon 嘎嘎“，则输出"hello...",注意8个字符也包含末尾的3个点
  23. {{ value|truncatechars:8 }}
  25. #7、truncatewords
  26. #作用：同truncatechars，但truncatewords是按照单词截断，注意末尾的3个点不算作单词，如果value=”hello world egon 嘎嘎“，则输出"hello world ..."
  27. {{ value|truncatewords:2 }}
  29. #8、safe
  30. #作用：出于安全考虑，Django的模板会对HTML标签、JS等语法标签进行自动转义,例如value="<script>alert(123)</script>"，模板变量{{ value }}会被渲染成&lt;script&gt;alert(123)&lt;/script&gt;交给浏览器后会被解析成普通字符”<script>alert(123)</script>“，失去了js代码的语法意义，但如果我们就想让模板变量{{ value }}被渲染的结果又语法意义，那么就用到了过滤器safe，比如value='<a href="https://www.baidu.com">点我啊</a>'，在被safe过滤器处理后就成为了真正的超链接，不加safe过滤器则会当做普通字符显示’<a href="https://www.baidu.com">点我啊</a>‘
  31. {{ value|safe }}

其他过滤器（了解）

过滤器 描述 示例
upper 以大写方式输出 {{ user.name | upper }}
add 给value加上一个数值 {{ user.age | add:”5” }}
addslashes 单引号加上转义号  
capfirst 第一个字母大写 {{ ‘good’| capfirst }} 返回”Good”
center 输出指定长度的字符串，把变量居中 {{ “abcd”| center:”50” }}
cut 删除指定字符串 {{ “You are not a Englishman” | cut:”not” }}
date 格式化日期  
default 如果值不存在，则使用默认值代替 {{ value | default:”(N/A)” }}
default_if_none 如果值为None, 则使用默认值代替  
dictsort 按某字段排序，变量必须是一个dictionary {% for moment in moments | dictsort:”id” %}
dictsortreversed 按某字段倒序排序，变量必须是dictionary  
divisibleby 判断是否可以被数字整除 {{ 224 | divisibleby:2 }} 返回 True
escape 按HTML转义，比如将”<”转换为”&lt”  
filesizeformat 增加数字的可读性，转换结果为13KB,89MB,3Bytes等 {{ 1024 | filesizeformat }} 返回 1.0KB
first 返回列表的第1个元素，变量必须是一个列表  
floatformat 转换为指定精度的小数，默认保留1位小数 {{ 3.1415926 | floatformat:3 }} 返回 3.142 四舍五入
get_digit 从个位数开始截取指定位置的数字 {{ 123456 | get_digit:’1’}}
join 用指定分隔符连接列表 {{ [‘abc’,’45’] | join:’’ }} 返回 abc45
length 返回列表中元素的个数或字符串长度  
length_is 检查列表，字符串长度是否符合指定的值 {{ ‘hello’| length_is:’3’ }}
linebreaks 用

或
标签包裹变量

 {{ “Hi\n\nDavid”|linebreaks }} 返回

Hi

David
linebreaksbr 用
标签代替换行符		  
linenumbers 为变量中的每一行加上行号  
ljust 输出指定长度的字符串，变量左对齐 {{‘ab’|ljust:5}}返回 ‘ab ’
lower 字符串变小写  
make_list 将字符串转换为列表  
pluralize 根据数字确定是否输出英文复数符号  
random 返回列表的随机一项  
removetags 删除字符串中指定的HTML标记 {{value | removetags: “h1 h2”}}
rjust 输出指定长度的字符串，变量右对齐  
slice 切片操作， 返回列表 {{[3,9,1] | slice:’:2’}} 返回 [3,9] {{ 'asdikfjhihgie' | slice:':5' }} 返回 ‘asdik’
slugify 在字符串中留下减号和下划线，其它符号删除，空格用减号替换 {{ '5-2=3and5 2=3' | slugify }} 返回 5-23and5-23
stringformat 字符串格式化，语法同python  
time 返回日期的时间部分  
timesince 以“到现在为止过了多长时间”显示时间变量 结果可能为 45days, 3 hours
timeuntil 以“从现在开始到时间变量”还有多长时间显示时间变量  
title 每个单词首字母大写  
truncatewords 将字符串转换为省略表达方式 {{ 'This is a pen' | truncatewords:2 }}返回``This is ...
truncatewords_html 同上，但保留其中的HTML标签 {{ '<p>This is a pen</p>' | truncatewords:2 }}返回``<p>This is ...</p>
urlencode 将字符串中的特殊字符转换为url兼容表达方式 {{ ‘http://www.aaa.com/foo?a=b&b=c’ | urlencode}}
urlize 将变量字符串中的url由纯文本变为链接  
wordcount 返回变量字符串中的单词数  
yesno 将布尔变量转换为字符串yes, no 或maybe {{ True | yesno }}{{ False | yesno }}{{ None | yesno }} ``返回 ``yes``no ``maybe

三 模板语法之标签

标签是为了在模板中完成一些特殊功能,语法为{% 标签名 %}，一些标签还需要搭配结束标签 {% endtag %}

3.1 常用标签之for标签

  1. #1、遍历每一个元素：
  2. {% for person in person_list %}
  3.     <p>{{ person.name }}</p>
  4. {% endfor %}
  6. #2、可以利用{% for obj in list reversed %}反向循环。
  8. #3、遍历一个字典：
  9. {% for key,val in dic.items %}
  10.     <p>{{ key }}:{{ val }}</p>
  11. {% endfor %}
  13. #4、循环序号可以通过{{ forloop }}显示　
  14. forloop.counter            当前循环的索引值（从1开始）
  15. forloop.counter0           当前循环的索引值（从0开始）
  16. forloop.revcounter         当前循环的倒序索引值（从1开始）
  17. forloop.revcounter0        当前循环的倒序索引值（从0开始）
  18. forloop.first              当前循环是第一次循环则返回True，否则返回False
  19. forloop.last               当前循环是最后一次循环则返回True，否则返回False
  20. forloop.parentloop         本层循环的外层循环
  22. #5、for标签可以带有一个可选的{% empty %} 从句，在变量person_list为空或者没有被找到时，则执行empty子句
  23. {% for person in person_list %}
  24.     <p>{{ person.name }}</p>
  26. {% empty %}
  27.     <p>sorry,no person here</p>
  28. {% endfor %}
案例

url.py

  1. from django.urls import re_path
  2. from app01 import views
  4. urlpatterns = [
  5.     re_path(r'^test/',views.test)
  6. ]

view.py

  1. def test(request):
  2.     names=['egon','kevin']
  3.     dic={'name':'egon','age':18,'sex':'male'}
  5.     list1=[]
  7.     return render(request,'test.html',locals())

test.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <hr>
  9. {% for name in names %}
  10.     <p>{{ forloop.counter0 }} {{ name }}</p>
  11. {% endfor %}
  12. <!--
  13. 输出结果为：
  14. 0 egon
  15. 1 kevin
  16. -->
  18. <hr>
  19. {% for name in names reversed %}
  20.     <p>{{ forloop.revcounter0 }} {{ name }}</p>
  21. {% endfor %}
  22. <!--
  23. 输出结果为：
  24. 1 kevin
  25. 0 egon
  26. -->
  28. <hr>
  29. {% for k,v in dic.items %}
  30.     <p>{{ forloop.counter }} {{ k }} {{ v }}</p>
  31. {% endfor %}
  32. <!--
  33. 输出结果为：
  34. 1 name egon
  35. 2 age 18
  36. 3 sex male
  37. -->
  39. <hr>
  40. {% for item in list1 %}
  41.     <p>{{ item }}</p>
  42.     {% empty %}
  43.         <p>sorry,no value here</p>
  44. {% endfor %}
  45. <!--
  46. 输出结果为：
  47. sorry,no value here
  48. -->
  50. </body>
  51. </html>

3.2 常用标签之if标签

  1. # 1、注意：
  2. {% if 条件 %}条件为真时if的子句才会生效，条件也可以是一个变量，if会对变量进行求值，在变量值为空、或者视图没有为其传值的情况下均为False
  4. # 2、具体语法
  5. {% if num > 100 or num < 0 %}
  6.     <p>无效</p>
  7. {% elif num > 80 and num < 100 %}
  8.     <p>优秀</p>
  9. {% else %}
  10.     <p>凑活吧</p>
  11. {% endif %}
  13. #3、if语句支持 and 、or、==、>、<、!=、<=、>=、in、not in、is、is not判断。

案例

urls.py

  1. from django.urls import path,register_converter,re_path
  2. from app01 import views
  4. urlpatterns = [
  5.     # 输入http://127.0.0.1:8008/或者http://127.0.0.1:8008/index/都会转发给视图函数index
  6.     re_path(r'^$',views.index),
  7.     re_path(r'^index/$',views.index),
  9.     re_path(r'^login/',views.login),
  11. ]

views.py

  1. from django.shortcuts import render
  3. def index(request):
  4.     return render(request,'index.html')
  6. def login(request):
  7.     if request.method == 'GET':
  8.         return render(request,'login.html')
  10.     name=request.POST.get('name')
  11.     pwd=request.POST.get('pwd')
  12.     if name == 'egon' and pwd == '123':
  13.         current_user=name
  14.         return render(request,'index.html',locals())
  15.     else:
  16.         msg='账号或密码错误'
  17.         return render(request,'login.html',locals())

在templates目录下新建模板文件index.html与login.html

index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>首页</title>
  6. </head>
  7. <body>
  9. <h3>首页</h3>
  10. <!--
  11. 如果用户已经登录，则current_user变量有值，if判断结果为真，会打印变量current_user的值，为当前登录的用户名
  12. 如果用户没有登录，则current_user变量无值，if判断结果为假，会打印a标签要求用户先登录
  13. -->
  14. {% if current_user %}
  15.     <p>当前登录用户为：{{ current_user }}</p>
  16. {% else %}
  17.     <p><a href="/login/">请先登录</a></p>
  18. {% endif %}
  20. </body>
  21. </html>

login.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>登录页面</title>
  6. </head>
  7. <body>
  9. <form action="" method="POST">
  10.     {% csrf_token %}
  11.     <p>用户名：<input type="text" name="name"></p>
  12.     <p>密码：<input type="password" name="pwd"></p>
  13.     <p><input type="submit" value="提交"></p>
  14. </form>
  15. <!--输错账号密码时的提示信息-->
  16. <p style="color: red">{{ msg }}</p>
  17. </body>
  18. </html>

测试

  1. python manage.py runserver 8008 #在浏览器输入http://127.0.0.1:8008/,然后点击登录，输入账号密码进行验证......

3.3 常用标签之with标签

  1. # with标签用来为一个复杂的变量名起别名,如果变量的值来自于数据库，在起别名后只需要使用别名即可，无需每次都向数据库发送请求来重新获取变量的值
  2. {% with li.1.upper as v %}
  3.     {{ v }}
  4. {% endwith %}

3.4 常用标签之csrf_token标签

  1. # 当用form表单提交POST请求时必须加上标签{% csrf_token%}，该标签用于防止跨站伪造请求
  2. <form action="" method="POST">
  3.     {% csrf_token %}
  4.     <p>用户名：<input type="text" name="name"></p>
  5.     <p>密码：<input type="password" name="pwd"></p>
  6.     <p><input type="submit" value="提交"></p>
  7. </form>
  8. # 具体工作原理为：
  9. # 1、在GET请求到form表单时，标签{% csrf_token%}会被渲染成一个隐藏的input标签，该标签包含了由服务端生成的一串随机字符串,如<input type="hidden" name="csrfmiddlewaretoken" value="dmje28mFo...OvnZ5">
  10. # 2、在使用form表单提交POST请求时，会提交上述随机字符串，服务端在接收到该POST请求时会对比该随机字符串，对比成功则处理该POST请求，否则拒绝，以此来确定客户端的身份

四 自定义过滤器和标签

当内置的过滤器或标签无法满足我们需求时，我们可以自定义，具体操作步骤如下

1、在settings中的INSTALLED_APPS添加当前app的名字，不然django无法找到自定义的过滤器或标签

settings.py

  1. # 在settings.py中找到该列表，然后加以配置
  2. INSTALLED_APPS = [
  3.     'django.contrib.admin',
  4.     'django.contrib.auth',
  5.     'django.contrib.contenttypes',
  6.     'django.contrib.sessions',
  7.     'django.contrib.messages',
  8.     'django.contrib.staticfiles',
  9.     'app01.apps.App01Config',
  10.     'app01', # 添加当前app的名字
  11. ]

2、在文件夹app01中创建子文件夹templatetags(文件夹名只能是templatetags)

3、在templatetags新建任意.py文件，如my_tags.py，在该文件中自定义过滤器或标签，文件内容如下

  1. from django import template
  2. register = template.Library() # 注意变量名必须为register,不可改变
  4. #1、自定义过滤器
  5. @register.filter
  6. def my_multi_filter(v1 ,v2): # 自定义的过滤器只能定义最多两个参数，针对{{ value1 | filter_multi:value2 }}，参数传递为v1=value1,v2=value2
  7.     return  v1 * v2
  9. #2、自定义标签
  10. @register.simple_tag
  11. def my_multi_tag(v1, v2): # 自定义的标签可以定义多个参数
  12.     return v1 * v2
  14. #3、自定义标签扩展之mark_safe
  15. # 注释：我们可以用内置的标签safe来让标签内容有语法意义，如果我们想让自定义标签处理的结果也有语法意义，则不能使用内置标签safe了，需要使用mark_safe，可以实现与内置标签safe同样的功能
  16. from django.utils.safestring import mark_safe
  18. @register.simple_tag
  19. def my_input_tag(id, name):
  20.     res = "<input type='text' id='%s' name='%s' />" % (id, name)
  21.     return mark_safe(res)

4、自定义过滤器或标签必须重新启动django方可生效

5、自定义过滤器或标签的使用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  9. <!--必须先加载存有自定义过滤器和标签的文件-->
  10. {% load my_tags %}
  12. <!--salary的值为10，经过滤器my_multi_filter的处理结果为120-->
  13. {{ salary|my_multi_filter:12 }}
  15. <!--结果为2-->
  16. {% my_multi_tag 1 2 %}
  18. <!--
  19. 结果为一个input标签，该表的属性id="inp1" name="username"
  20. 注意：input的属性值均为字符串类型，所以my_input_tag后的两个值均为字符串类型
  21. -->
  22. {% my_input_tag "inp1" "username" %} 
  24. </body>
  25. </html>

对比自定义标签与自定义过滤器

  1. #1、自定义过滤器只能传两个参数，而自定义标签却可以传多个参数
  3. #2、过滤器可以用于if判断，而标签不能
  4. {% if salary|my_multi_filter:12 > 200 %}
  5.     <p>优秀</p>
  6. {% else %}
  7.     <p>垃圾</p>
  8. {% endif %}

五 模板的导入和继承

在实际开发中，模板文件彼此之间可能会有大量冗余代码，为此django提供了专门的语法来解决这个问题,主要围绕三种标签的使用：include标签、extends标签、block标签，详解如下

5.1、模板的导入之include标签

  1. #作用：在一个模板文件中，引入/重用另外一个模板文件的内容，
  2. {% include '模版名称' %}

案例：

可以把广告栏写到专门的文件里advertise.html

  1. <div class="adv">
  2.     <div class="panel panel-default">
  3.         <div class="panel-heading">
  4.             <h3 class="panel-title">Panel title</h3>
  5.         </div>
  6.         <div class="panel-body">
  7.             Panel content
  8.         </div>
  9.     </div>
  10.     <div class="panel panel-danger">
  11.         <div class="panel-heading">
  12.             <h3 class="panel-title">Panel title</h3>
  13.         </div>
  14.         <div class="panel-body">
  15.             Panel content
  16.         </div>
  17.     </div>
  18.     <div class="panel panel-warning">
  19.         <div class="panel-heading">
  20.             <h3 class="panel-title">Panel title</h3>
  21.         </div>
  22.         <div class="panel-body">
  23.             Panel content
  24.         </div>
  25.     </div>
  26. </div>

然后在base.html文件中用include标签引入advertise.html文件的内容

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
  7.           integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  8.     <style>
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  14.         .header {
  15.             height: 50px;
  16.             width: 100%;
  17.             background-color: black;
  18.         }
  20.     </style>
  21. </head>
  22. <body>
  23. <div class="header"></div>
  24. <div class="container">
  25.     <div class="row">
  26.         <div class="col-md-3">
  27.             <!--在base.html引入advertise.html文件的内容-->
  28.             {% include "advertise.html" %}
  29.         </div>
  30.         <div class="col-md-9"></div>
  31.     </div>
  32. </div>
  33. </body>
  34. </html>

5.2、模板的继承\派生之extends标签、block标签

  1. #作用：在一个模板文件中，引入/重用另外一个模板文件的内容
  2. {% extends "模版名称" %}
  3. #  也就是说include有的功能extends全都有，但是extends可以搭配一个block标签，用于在继承的基础上定制新的内容

案例

Django模版引擎中最复杂且最强大的部分就是模版继承了。我们以先创建一个基本的“骨架”模版，它包含我们站点中的全部元素，并且可以定义多处blocks ，例如我们创建base.html内容如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>
  6.         {% block title %}自定义title名{% endblock %}
  7.     </title>
  9.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
  10.           integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  11.     <style>
  12.         * {
  13.             margin: 0;
  14.             padding: 0;
  15.         }
  17.         .header {
  18.             height: 50px;
  19.             width: 100%;
  20.             background-color: #919191;
  21.             margin-bottom: 20px;
  22.         }
  24.     </style>
  26. </head>
  27. <body>
  28. <div class="header"></div>
  30. <div class="container">
  31.     <div class="row">
  32.         <div class="col-md-3">
  33.             <div class="list-group">
  34.                 {% block sidebar %}
  35.                     <a href="#" class="list-group-item active">服装城</a>
  36.                     <a href="#" class="list-group-item">美妆馆</a>
  37.                     <a href="#" class="list-group-item">超市</a>
  38.                     <a href="#" class="list-group-item">全球购</a>
  39.                     <a href="#" class="list-group-item">闪购</a>
  40.                     <a href="#" class="list-group-item">团购</a>
  41.                 {% endblock %}
  43.             </div>
  44.         </div>
  46.         <div class="col-md-9">
  47.             {% block content %}
  48.                 base.html页面内容
  49.             {% endblock %}
  50.         </div>
  51.     </div>
  53. </div>
  55. </body>
  56. </html>

模板base.html 定义了一个可以用于两列排版页面的简单HTML骨架。我们新建子模板index.html的主要工作就是继承base.html然后填充/覆盖其内部的blocks。

  1. {% extends "base.html" %}
  3. <!--用新内容完全覆盖了父模板内容-->
  4. {% block title %}
  5.     index页面
  6. {% endblock %}
  8. {% block sidebar %}
  9.     <!--该变量会将父模板中sidebar中原来的内容继承过来，然后我们可以在此基础上新增，否则就是纯粹地覆盖-->
  10.     {{ block.super }}
  12.     <!--在继承父模板内容的基础上新增的标签-->
  13.     <a href="#" class="list-group-item">拍卖</a>
  14.     <a href="#" class="list-group-item">金融</a>
  15. {% endblock %}
  17. {% block content %}
  18.     <!--用新内容完全覆盖了父模板内容-->
  19.     <p>index页面内容</p>
  20. {% endblock %}

我们通过django访问index.html看到内容如下(block标签的内容都完成了替换或更新)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>
  6.         index页面
  7.     </title>
  9.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
  10.           integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  11.     <style>
  12.         * {
  13.             margin: 0;
  14.             padding: 0;
  15.         }
  17.         .header {
  18.             height: 50px;
  19.             width: 100%;
  20.             background-color: #919191;
  21.             margin-bottom: 20px;
  22.         }
  24.     </style>
  26. </head>
  27. <body>
  28. <div class="header"></div>
  30. <div class="container">
  31.     <div class="row">
  32.         <div class="col-md-3">
  33.             <div class="list-group">
  34.                 <!--该变量会将父模板中sidebar中原来的内容继承过来，然后我们可以在此基础上新增，否则就是纯粹地覆盖-->
  35.                 <a href="#" class="list-group-item active">服装城</a>
  36.                 <a href="#" class="list-group-item">美妆馆</a>
  37.                 <a href="#" class="list-group-item">超市</a>
  38.                 <a href="#" class="list-group-item">全球购</a>
  39.                 <a href="#" class="list-group-item">闪购</a>
  40.                 <a href="#" class="list-group-item">团购</a>
  42.                 <!--在继承父模板内容的基础上新增的标签-->
  43.                 <a href="#" class="list-group-item">拍卖</a>
  44.                 <a href="#" class="list-group-item">金融</a>
  45.             </div>
  46.         </div>
  48.         <div class="col-md-9">
  49.             <!--用新内容完全覆盖了父模板内容-->
  50.             <p>index页面内容</p>
  51.         </div>
  52.     </div>
  54. </div>
  56. </body>
  57. </html>

总结与注意

  1. #1、标签extends必须放在首行，base.html中block越多可定制性越强
  3. #2、include仅仅只是完全引用其他模板文件，而extends却可以搭配block在引用的基础上进行扩写
  5. #3、变量{{ block.super }} 可以重用父类的内容，然后在父类基础上增加新内容，而不是完全覆盖
  7. #4、为了提升可读性，我们可以给标签{% endblock %} 起一个名字 。例如：
  8.     {% block content %}
  9.     ...
  10.     {% endblock content %}　　
  11. #5、在一个模版中不能出现重名的block标签。

静态文件配置

我们在编写模板文件时，需要大量引用css、js、图片等静态文件，如果我们将这些文件在服务端存放的路径都固定写死那么将非常不利于后期的扩展，我们可以这么做

1、settings.py

  1. STATIC_URL = '/static/' # 找到这一行，然后新增下述代码
  2. STATICFILES_DIRS = [
  3.     os.path.join(BASE_DIR, 'statics'),# 获取静态文件在服务端的绝对路径
  4. ]
  5. #STATIC_URL = '/static/'就是为静态文件的绝对路径起了一个别名，以后我们只需要用路径/static/即可

2、在项目根目录下新增文件夹statics，为了更便于管理，可以在statics下新建子文件夹css、js、img等

3、新建模板文件index.html,在该文件中对静态文件的引用如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" href="/static/css/my.css">
  7. </head>
  8. <body>
  9. <h4>我是红色的，点我就绿</h4>
  10. <img src="/static/img/rb.jpeg" alt="">
  12. <script src="/static/js/jquery-3.3.1.min.js"></script>
  13. <script src="/static/js/my.js"></script>
  15. </body>
  16. </html>

综上，在配置完settings.py后，所有的静态文件路径都可以采用别名/static/作为起始，这在一定程度上会有利于程序的扩展性，但如果我们在项目后期维护时，连/static/这个值也需要修改，那意味着所有模板文件中也都需要跟着改了，扩展性依然很差，为此，django在一个名为static.py的文件中定义了标签static、get_static_prefix，二者都可以解决该问题

test.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <!--注意：必须先加载文件static.py-->
  7.     {% load static %}
  8.     <!--注意：此处的static是一个定义在static.py中的一个标签，名字与文件名一样而已，不要搞混-->
  9.     <link rel="stylesheet" href="{% static 'css/my.css' %}">
  10. </head>
  11. <body>
  12. <h4>我是红色的，点我就绿</h4>
  13. <img src="{% static 'img/rb.jpeg' %}" alt="">
  15. {% load static %}
  16. <script src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
  17. <script src="{% static 'js/my.js' %}"></script>
  19. </body>
  20. </html>

标签static会接收传入的参数，然后这根据settings.py中变量STATIC_URL的值拼接出一个完整的路径，如果STATIC_URL = '/static/'，那么href="{% static 'css/my.css' %}"会被渲染成href="/static/css/my.css"，如果STATIC_URL = '/static123/'，那么href="{% static 'css/my.css' %}"会被渲染成href="/static123/css/my.css"。

标签get_static_prefix也可以完成同样的效果，只不过用法不同。我们不能为标签get_static_prefix传参，因为标签get_static_prefix代表的只是settings.py中STATIC_URL的值，所以我们需要做的是在get_static_prefix的基础上自行拼接路径，如下

test.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <!--注意：同样需要先加载文件static.py-->
  7.     {% load static %}
  8.     <!--使用标签get_static_prefix拼接路径-->
  9.     <link rel="stylesheet" href="{% get_static_prefix %}css/my.css">
  10. </head>
  11. <body>
  12. <h4>我是红色的，点我就绿</h4>
  13. <img src="{% get_static_prefix %}img/rb.jpeg" alt="">
  15. {% load static %}
  16. <script src="{% get_static_prefix %}js/jquery-3.3.1.min.js"></script>
  17. <script src="{% get_static_prefix %}js/my.js"></script>
  19. </body>
  20. </html>

如果STATIC_URL = '/static/'，那么href="{% get_static_prefix %}css/my.css"会被渲染成href="/static/css/my.css"，其它同理

04-01 Django之模板层的更多相关文章

  1. python 全栈开发，Day69(Django的视图层,Django的模板层)

    昨日内容回顾 相关命令: 1 创建项目 django-admin startproject 项目名称 2 创建应用 python manage.py startapp app名称 3 启动项目 pyt ...

  2. Django的模板层简介

    Django的模板层 如果我们想要利用视图函数返回一个页面,一种比较简单的方式是利用HttpResponse()方法返回一个含有html内容的字符串: def current_datetime(req ...

  3. Django框架-模板层

    Django框架-模板层 一.模板语法传值 1.验证是否python所有的数据类型都可以传递到前端 locals()的妙用:该方法虽然好用,但是在某些情况下会造成资源的浪费 结论:整型.浮点型.字符串 ...

  4. Django之模板层细说

    django的模板层,基于我们前面学习的内容,也知道主要语法是{{变量相关}}{%逻辑相关%},那么具体还有哪些内容呢?且听我娓娓道来. 模板层(模板语法) 标签 过滤器 自定义标签,过滤器,incl ...

  5. Django基础模板层(75-76)

    Django框架之模板层(d75)一 模版语法之变量: ** locals() 会把*该*视图函数内的变量,传到模板    ** return render(request, 'index.html' ...

  6. Django基础——模板层(template) （Day67）

    阅读目录 变量 标签 自定义过滤器和标签 模板层(template) 你可能已经注意到我们在例子视图中返回文本的方式有点特别. 也就是说,HTML被直接硬编码在 Python代码之中. 1 2 3 4 ...

  7. 5、Django之模板层

    一 模板简介 在刚刚介绍完的视图层中我们提到,浏览器发送的请求信息会转发给视图函数进行处理,而视图函数在经过一系列处理后必须要有返回信息给浏览器.如果我们要返回html标签.css等数据给浏览器进行渲 ...

  8. 053.Python前端Django框架模板层

    模板层 一 模板语法之变量 在 Django 模板中遍历复杂数据结构的关键是句点字符, 语法: {{ var_name }} [root@node10 mysite]# cat app01/urls. ...

  9. Django的模板层

    一 模版简介 你可能已经注意到我们在例子视图中返回文本的方式有点特别. 也就是说,HTML被直接硬编码在 Python代码之中. def current_datetime(request): now ...

随机推荐

  1. 华为HCNA乱学Round 10：PPP&PAP

  2. 第六次java实验报告

    Java实验报告 班级 计科二班 学号20188437 姓名 何磊 完成时间 2019/10/17 评分等级 实验四 类的继承 实验目的 理解异常的基本概念: 掌握异常处理方法及熟悉常见异常的捕获方法 ...

  3. PTA(Basic Level)1024.科学计数法

    科学计数法是科学家用来表示很大或很小的数字的一种方便的方法,其满足正则表达式 [+-][1-9].[0-9]+E[+-][0-9]+,即数字的整数部分只有 1 位,小数部分至少有 1 位,该数字及其指 ...

  4. 设置mysql 5.7 可以外部访问的办法

    这里记录一下. 一台服务器上面的mysql出现了 无法外面连的情况解决办法: . 先尝试在宿主机上面登录 mysql -uroot -p 输入密码,可以登录. 然后 use mysql # 切换数据库 ...

  5. # jsp及servlet学习笔记

    目录 jsp及servlet学习笔记 JSP(Java Server Page Java服务端网页) 指令和动作: servlet(小服务程序) jsp及servlet学习笔记 JSP(Java Se ...

  6. Codeforces 1194F. Crossword Expert

    传送门 考虑每一个位置的期望贡献 $P[i]$ 对于第 $k$ 个位置,设 $sum=\sum_{i=1}^{k}t[k]$,那么 $T-sum$ 即为用最短时间完成完位置 $k$ 后多出来的空闲时间 ...

  7. redmine3.4.6安装教程

    Redmine 是一个开源的.基于Web的项目管理和缺陷跟踪工具. 参考了网上各种文章,终于成功安装redmine-3.4.6. 1.下载安装railsinstaller-3.4.0.exe 官网下载 ...

  8. Java加密数据库

    一.背景 数据库配置以明文方式展示如图,会造成安全隐患,如果有黑客入侵会造成密码泄露,信息窃取和破坏等. 二.加密步骤 1.对数据库信息加密: 对数据库中的账号和密码信息进行加密(选择一种算法)然后替 ...

  9. O002、虚拟化

    参考https://www.cnblogs.com/CloudMan6/p/5233484.html   OpenStack 是云操作系统,要学习 OpenStack,首先需要掌握一些虚拟化和云计算的 ...

  10. 学会这 2 点，轻松看懂 MySQL 慢查询日志

    MySQL中的日志包括:错误日志.二进制日志.通用查询日志.慢查询日志等等.这里主要介绍下比较常用的两个功能:通用查询日志和慢查询日志. 1)通用查询日志:记录建立的客户端连接和执行的语句. 2)慢查 ...