一:模板语法的简介
为了使得页面设计和python的代码分离,我们需要学会使用Django自身所带有的模板系统来实现。
二:模板语法之取值
视图层给模板传参的两种方式:
方式一:
return render(request,'index.html',{'n':n})
方式二:
# 将当前所在的名称空间中的名字全部传递给前端页面 return render(request,'index.html',locals())
模板的接受方式:
{{ n }}
ps:
1:后端函数名到前端,会自动加括号调用,但是不支持传参。
2:后端传对象到前端,就相当于打印了这个对象。
前端获取后端传过来的容器类型的内部元素:统一采用句点符(.)
列表,字典取值:
{{l1.0}} # 获取列表第一个元素
{{dic.name}} # 获取字典值
{{div.hobby.0}} # 如果一次查询还是容器类型则继续可以点方式取值
对象取值:
{{obj.name}} # 获取对象的属性
{{obj.get_name}} # 获取对象的 方法
{{obj.get_cls}} # cls # 获取类方法
{{obj.get_static}} # 获取静态方法
ps:
1,如果对象调用的方法需要传参数,模板语法并不支持!
2,python自带的内置函数,如果是不传参数的可以直接加括号调用,但是不能调用带参数的!
3,用模板语法的注释{##}在检查网页中是不可见的,但是html的注释<!---->是可见的。
二:模板语法之过滤器
1,前端统计字符串的长度:
{{ l1|length }} # |前面的值会当做第一个参数传递给|后面的函数。
2,前端获取的数据如果是空的就会返回default后面默认的参数值:
{{ flag|default:'你这个东西是个空'}} #flag没有值的时候触发
3,将数字格式化成表示文件大小的单位:
{{ file_size|filesizeformat }} #将值格式化为一个 “人类可读的” 文件尺寸 (例如 '13 KB', '4.1 MB', '102 bytes', 等等)
4,前端可以展示原生时间(可以在前端经过过滤器处理时间的格式):
<p>{{ ctime|date:'Y-m-d' }}</p> # 格式化时间(不要加百分号)
5,前端可以进行字符串切片:
<p>字符串的切片操作:{{ res|slice:'0:8' }}</p> # 取到前8个字符 <p>{{ res|slice:'0:8:2' }}</p> # 取到前八个索引为奇数的字符
6,如果字符串多于指定的字符,那么会截断被翻译为省略号(...)
<p>{{ s|truncatechars:10 }}</p> # 截取固定的长度的字符串 三个点也算长度,也就是取前7个字符
7,按照空格截取文本内容(三个点不算字符)
<p>{{ res|truncatewords:4 }}</p> # 按照空格截取文本内容
8,给数字加一个值,如果第一个参数是字符串,会默认全转成字符串进行拼接:
<p>{{ 'hahah'|add:'heheheh' }}</p> # 字符串拼接 <p>{{ res|add:5}}</p> # 给res的值加上5
9,取消转义(******)
前端取消转义:
<p>{{ ht|safe }}</p> # 不管是html语言还是js语言都可以被safe转化为为安全模式,从而取消转义 <p>{{ sr|safe }}</p>
后端取消转义:
from django.utils.safestring import mark_safe xxx = mark_safe('<h1>我是h1标签</h1>')
三,模板语法之标签
1,for循环
{% for foo in l1 %} <p>{{ forloop }}</p> {% endfor %} # {'parentloop': {}, 'counter0': 0, 'counter': 1, 'revcounter': 5, 'revcounter0': 4, 'first': True, 'last': False}
2,if判断
{% if user %}
hello
{%else%}
world!
{% endif %}
3,混合使用:
{% for foo in l1%}
{% if forloop.first %}
第一次的我
{% elif forloop.last %}
最后一次的我
{% else %}
{{ foo }}
{% endif %}
{% endfor %}
4,可迭代对象被取空时:
{% for foo in l %} {% if forloop.first %} <p>这是我的第一次</p> {% elif forloop.last %} <p>这是最后一次了啊</p> {% else %} <p>嗨起来!!!</p> {% endif %} {% empty %} <p>你给我的容器类型是个空啊,没法for循环</p> {% endfor %}
5, for循环字典:
{% for foo in d.keys %} <p>{{ foo }}</p> {% endfor %} {% for foo in d.values %} <p>{{ foo }}</p> {% endfor %} {% for foo in d.items %} <p>{{ foo }}</p> {% endfor %}
6,with起别名:
{% with d.hobby.2 as h %}
{{ h }} # 在with内部使用h
{{ d.hobby.2 }} # 内部外部都可以使用这种方式取值
{% endwith %}
四,模板语法之自定义:
必经三路:
一,在应用名下新建一个名叫templatetags文件夹(名字固定)
二,在新建的文件夹内新建一个任意名称的py文件(如:my_tag.py)
三,在该py文件中需要固定写下面两句代码
from django import template register = template.Library()
自定义过滤器:
在my_tag.py文件下:
@register.filter(name='XBB') def index(a,b): return a+b
在模板中使用:
{% load my_tag %}
{{ 666|XBB:8 }} # 结果为666+8
自定义标签:
在my_tag.py文件下:
@register.simple_tag def plus(a,b,c): return a+b+c
在模板中使用:
{% load my_tags%}
{% plus 1 2 3 %}
自定义inclusion_tag(返回给前端页面):
@register.inclusion_tag('login.html',name='login') def login(n): l = [ '第%s项'%i for i in range(n)] return {'l':l}
新建一个login.html
<ul> {% for foo in l %} <li>{{ foo }}</li> {% endfor %} </ul>
总结:
1,要想使用自定义过滤器 标签 inclusion_tag 必须先在需要使用html页面加载你的py文件
{% load my_tag %}
2,在html中显示inclusion_tag的模板,只需输入其函数名和指明参数就行了
{% load my_tag %} # 加载文件
{% login 5 %} # 添加页面
五,模板的继承和导入
继承:
首先需要在被继承的模板中划分多个区域,例如:在home.html文件中
{# {% block 给区域起的名字 %}#} {% block content %} <div class="jumbotron"> <h1>Hello, world!</h1> <p>...</p> <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p> </div> {% endblock %}
ps:通常情况下一个模板应该至少有个block,一个里面是css代码块,一个里面是js代码块,一个里面是你想继承的页面主题内容。
子板继承模板:
{#继承语法:{% extends 'home.html' %}#} {% extends 'home.html' %} {% block content %} {# 然后根据block块的名字修改指定区域的内容#} <h1>登录页面</h1> <form action=""> <p>username:<input type="text" class="form-control"></p> <p>password:<input type="text" class="form-control"></p> <input type="submit" class="btn btn-success"> </form> {% endblock %}
导入:
模板的导入:将一段html当做模块的方式导入到另一个html展示
{% include '想导入的html文件名' %}
六,静态文件的配置:
第一种:直接写死
<link rel='stylesheet' href="{% static 'css/mycss.css'%}">
第二种:
{% load static %} # 先加载 <link rel='stylesheet' href="{% get_static_prefix %}css/mycss.css">