Django 模板层 静态文件
模版语法重点:
变量:{{ 变量名 }}
1 深度查询 用句点符
2 过滤器
标签:{{% % }}
模板语法之变量
在 Django 模板中遍历复杂数据结构的关键是句点字符, 语法:{{变量名}}
index.html
{#模板语言注释:前端看不到#} {#相当于print了该变量#} <h1>模板语言之变量</h1> <p>字符串:{{ name }}</p> <p>数字:{{ age }}</p> <p>列表:{{ ll }}</p> <p>元祖:{{ tu }}</p> <p>字典:{{ dic }}</p> {#只写函数名:相当于函数名(),执行该函数#} <p>函数:{{ test }}</p> {#对象内存地址#} <p>对象:{{ lqz }}</p> <p>列表套对象:{{ person_list }}</p> <p>字典套对象:{{ person_dic }}</p> {#深度取值#} <p>列表第0个值:{{ ll.0 }}</p> <p>列表第3个值:{{ ll.3 }}</p> <p>字典取值:{{ dic.name }}</p> <p>字典取列表值:{{ dic.ll }}</p> {#再继续取值,继续点#} <p>对象取数据属性:{{ lll.name }}</p> <p>对象取绑定给对象的函数属性:{{ lll.get_name }}</p> <p>对象取绑定给类的函数属性:{{ lll.cls_test }}</p> <p>对象取静态方法:{{ lll.static_test }}</p> <p>把对象列表中egon年龄取出来:{{ person_list.1.age }}</p> {#拓展:不能调有参数的方法#} <p>字符串的方法:{{ name.upper }}</p>
views.py
def index(request): name = 'lll' age = 18 ll = [1, 2, 'lll', 'egon'] ll2=[] dic2={} tu = (1, 2, 3) dic = {'name': 'lll', 'age': 18, 'll': [1, 2, 4]} # 函数 def test(): print('lll') return 'zhouxiang dsb' # 在模板上相当于执行该函数,并打印 print(test()) # 类和对象 class Person(): def __init__(self, name, age): self.name = name self.age = age def get_name(self): return self.name @classmethod def cls_test(cls): return 'cls' @staticmethod def static_test(): return 'static' # 模板里不支持带参数 def get_name_cs(self,ttt): return self.name lll=Person('lll',18) fff=Person('fff',18) person_list=[lll,fff] person_dic={'lll':lll} file_size=1024 import datetime ctim=datetime.datetime.now() h1='<h1>hello</h1>' script='<script>alert(111)</script>' user='' # return render(request,'index.html',{'name':name}) # locals() 会把*该*视图函数内的变量,传到模板 return render(request, 'index.html', locals())
模板语法之过滤器
{{obj|filter__name:param}} 变量名字|过滤器名称:变量
里面变量可以参照上面的views.py
<h1>模板语言之过滤器</h1> {#后面就是个python中的函数,|前面的,是函数的第一个参数,冒号后面的是第二个参数#} <p>统计字符串长度:{{ name|length }}</p> <p>统计列表长度:{{ ll|length }}</p> <p>过滤器之默认值:{{ ll2|default:'没有值' }}</p> {# filesizeformat当前值或者传入文件的大小 #} <p>过滤器之filesizeformat--1:{{ 1024|filesizeformat }}</p> <p>过滤器之filesizeformat--2:{{ file_size|filesizeformat }}</p> {# date 按Nov. 9, 2018这种格式输出 ctim传入的是datetime.datetime.now() #} <p>过滤器之不使用date:{{ ctim }}</p> <p>过滤器之date:{{ ctim|date:'Y-m-d' }}</p> {#前闭后开区间 #} <p>过滤器之slice:{{ ll|slice:'2:-1' }}</p> {#支持步长#} <p>过滤器之slice-字符串:{{ name|slice:'0:3:3' }}</p> {#三个起步#} {# 取5-3个 剩下用三个点代替 #} <p>过滤器之truncatechars:{{ 'dafdadaf'|truncatechars:5 }}</p> {# 取三个如果有没取尽的用三个 #} <p>过滤器之truncatewords:{{ '我 dfaf ga dfgaas 你 dgf adaf'|truncatewords:5 }}</p> {# 有safe会解析传过来的 html语句 没有不解析 #} <p>过滤器之不用safe:{{ h1 }}</p> <p>过滤器之用safe:{{ h1|safe }}</p> <p>过滤器之不用safe:{{ script }}</p> {#<p>过滤器之用safe:{{ script|safe }}</p>#} {# add会让两个值相加,数字和字符串不会相加会报错 字符串是拼接 数字是相加 #} <p>过滤器之用add:{{ 12|add:'1' }}</p> <p>过滤器之用add:{{ 'egon'|add:'dsb' }}</p>
模板语言之标签
<h1>模板语言之标签</h1> {% for foo in ll %} {{ forloop }} <p>{{ forloop.first }}--->{{ forloop.counter0 }}--->{{ forloop.revcounter }}----->{{ foo }}</p> {% endfor %} {% for foo in ll %} {% for i in person_list %} 取出外层是第几次循环 {{ forloop.parentloop.counter }} <p>{{ forloop.first }}--->{{ forloop.counter0 }}--->{{ forloop.revcounter }}----->{{ foo }}</p> {% endfor %} {% endfor %} **************循环的对象是空,才会走到empty,而不是对象里面的东西为空 {% for foo in dic2 %} <p>{{ foo }}</p> {% empty %} 傻逼了 {% endfor %} 只循环字典的话,取到的是key值 {% for foo in dic %} 取到value的值 {% for foo in dic.values %} 取到key 和 value的值 {% for k,foo in dic.items %} <p>{{ k }}----->{{ foo }}</p> {% empty %} 傻逼了 {% endfor %} {% if user %} <a href="">退出</a> {% else %} <a href="">登录</a> <a href="">注册</a> {% endif %} {#for循环判断如果是第一次,打印第一次,其他打印正常值#} {% for foo in ll %} {% if forloop.first %} <p>第一次的我 </p> {% elif forloop.last %} <p>最后的我 </p> {% else %} <p>{{ foo }}</p> {% endif %} {% endfor %} <hr> with 相当于取别名,作用:变量太长,可以简化 {% with name as ttt %} {{ ttt }} {{ name }} {{ user }} {% endwith %} ------ {% with dic.ll.2 as ttt %} {{ ttt }} {{ ttt }} {% endwith %} -for ,if,with 都要有结束
自定义标签过滤器
<h1>自定义标签过滤器</h1> {% load mytag %} {#传多个参数的话:可以:'aaa:bb:cc',也可以:传列表#} <p>{{ 'lqz'|yyy:'nb' }}</p> <h4>使用自定义的标签</h4> <p>{% add_nb 'egon' %}</p> <p>{% add_3 'egon' 'is' 'dsb' %}</p> <hr> 过滤器,可以用在if判断中 {% if 'lqz'|yyy:'nb' %} <p>肯定是True</p> {% endif %} 标签不能用在if判断(报错)
模板导入与继承
导入
模版导入-->写了一个好看的组件,可以复用, 1 写一个模板 2 在模板中:{% include '模板的名字'%}
例如下面的两个页面代码 导入 使用{% include ‘left.html’%} 就会将left.html内的html代码导入到index内 在left内的标签使用class定义样式只要index内有定义那么会被渲染上去。页面解析的时候就相当于left。html的代码存在于index 内
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> {% load static %} <link rel="stylesheet" href="{% static 'utils/bootstrap-3.3.7-dist/css/bootstrap.css' %}"> <style type="text/css"> .head{ height: 100px; background:aquamarine; } .right-top{ margin-bottom: 10px; } </style> </head> <body> <div class="head"></div> <div class="container-fluid content"> <div class="row"> <div class="col-md-3"> {% include 'left.html' %} </div> <div class="col-md-9"> <div class="right-top" style="background: pink;height: 50px"> {% block content_top %} {% endblock %} </div> <div class="right-middle" style="background: #d43f3a;height: 50px" > {% block content_middle %} {% endblock %} </div> {% block content_main %} 我是母版内容 {% endblock %} </div> </div> </div> </body> </html>
<ul> <a href="{% url 'temp1' %}"><li>a</li></a> <a href="{% url 'temp2' %}"><li>b</li></a> <li>c</li> <li>d</li> <li>e</li> </ul>
继承
模板的继承 1 写一个母版,留一个可扩展的区域(盒子),可以留多个盒子(留的越多,可扩展性越高) {%block 名字%} 可以写内容 {%endblock%} 2 在子模板中使用: {%block 名字%} 子模板的内容 {%endblock 名字%}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> {% load static %} <link rel="stylesheet" href="{% static 'utils/bootstrap-3.3.7-dist/css/bootstrap.css' %}"> <style type="text/css"> .head{ height: 100px; background:aquamarine; } .right-top{ margin-bottom: 10px; } </style> </head> <body> <div class="head"></div> <div class="container-fluid content"> <div class="row"> <div class="col-md-3"> {% include 'left.html' %} </div> <div class="col-md-9"> <div class="right-top" style="background: pink;height: 50px"> {% block content_top %} {% endblock %} </div> <div class="right-middle" style="background: #d43f3a;height: 50px" > {% block content_middle %} {% endblock %} </div> {% block content_main %} 我是母版内容 {% endblock %} </div> </div> </div> </body> </html>
{% extends 'index.html' %} {% block content_top %} <p>toptoptop</p> <p>toptoptop</p> {% endblock %} {% block content_middle %} <p>middle</p> <p>middle</p> {% endblock %} {% block content_main %} <p>main</p> <p>main</p> <p>main</p> {% endblock %}
{% extends 'index.html' %} {% block content_top %} <p>temp2</p> <p>temp2</p> {% endblock %} {% block content_middle %} <p>temp2</p> <p>temp2</p> {% endblock %} {% block content_main %} <p>temp2</p> <p>temp2</p> <p>temp2</p> {% endblock %}
extends
标签是这里的关键。它告诉模版引擎,这个模版“继承”了另一个模版。当模版系统处理这个模版时,首先,它将定位父模版——在此例中,就是“index.html”。
那时,模版引擎将注意到 index.html
中的两个 block
标签,并用子模版中的内容来替换这些block。
静态文件
有时候项目进行更改的时候会更改static 相应的settings配置也会变更但是每个页面也要变更就会增大工作量,所以就需要静态文件配置
第一种方式 {% load static %} <link rel="stylesheet" href="{% static 'css/mycss.css' %}"> 第二种方式 {% load static %} <link rel="stylesheet" href="{% get_static_prefix %}css/mycss.css">