Django之模板

模板 Template

Django之模板

模板 Template

• Django模板中需要记两种符号：{{ }} 和 {% %}
• {{ }} 变量，在模板渲染时替换成值
• {% %} 标签，表示逻辑相关的操作

变量

变量

• {{ 变量名 }} 由数字字母和下划线组成
• 使用" . "来获取对象的相应属性值
• {{ 变量.索引 }} {{ 变量.key }} {{ 变量.属性 }} {{ 变量.方法 }}
• 优先级： .key > .属性和方法 > .索引

过滤器 Filters

过滤器 Filters

• 过滤器：用来修改变量的显示结果
• 语法：{{ 变量|filter_name }} {{ 变量|filter_name:参数 }}  ":"前后没有空格

内置过滤器

内置过滤器

default

• 给变量加默认值
• {{ value|default:“nothing” }} 给变量加默认值，如果value值没传的话就显示nothing

add

• 数字的加法，字符串的拼接，列表的拼接
• {{ value|add:“2” }} 如果value是数字4，输出为6；
• {{ first|add:second }} 如果first是[1,2,3]，second是[4,5,6]，输出为[1,2,3,4,5,6]

safe

• 告诉Django前面的字符串（value）不需要做转义
• {{ value|safe }}

upper lower title

• {{ value|upper }} 大写
• {{ value|lower }} 小写
• {{ value|title }} 标题

filesizeformat

• 将文件的大小显示成带单位的，即将值格式化为一个可读的文件尺寸，例如"13KB"
• {{ value|filesizefoemat }} 如果value是123456789，输出将会是117.7KB

slice

• {{ value|slice:“2:-1” }} 切片

length

• {{ value|length }} 返回变量的长度，如果value=[1，2，3，4]，输出为4

truncatechars truncatewords

• {{ value|truncatechars:9}} 根据字符的长度进行截断
• {{ value|truncatewords:9 }} 根据单词的长度进行截断

join

• 字符串的拼接，同python的str.join(list)
• {{ value|join:" // " }}

date

• 日期时间的格式化：{{ value|date:“Y-m-d H:i:s”}}
• USE_L10N = False
• DATETIME_FORMAT = “Y-m-d H:i:s”
• DATE_FORMAT = “Y-m-d”
• TIME_FORMAT = “H:i:s”

自定义过滤器函数

自定义filter、simple_tag、inclusion_tag

• 自定义过滤器只是带有一个或两个参数的python函数
• 变量（输入）的值 ----- 不一定是一个字符串
• 参数的值 ----- 可以有一个默认值，或完全省略
• 例如，在过滤器{{var | foo：“bar”}}中，过滤器foo将传递变量var和参数“bar”。

自定义过滤器步骤：

1. 在已经注册的app下创建一个python包，包的名字为templatetags；

2. 在python包中创建py文件，文件可自定义（mytags.py）;

3. 在py文件中写固定的内容：

   from django import template
   
   register = template.Library()  # register 名字不能错
   

4. 写函数 + 加装饰器

   自定义过滤器
   @register.filter
   def add_arg(value,arg):
   	return 'xxxx'
   
   自定义simple_tag，与自定义filter类似，只不过接收更灵活的参数
   @register.simple_tag
   def str_join(*arg,**kwargs):
   	return 'xxxx'
   
   自定义inclusion_tag，多用于返回html代码片段
   @register.inclusion_tag('li.html')
   def show_li(num):
   	return { 'num':range(1,num+1) }
   inclusion_tag作用：主页面以一定的语法给一个参数，调用某个函数，这个函数可以通过主页给的参数做一些处理，得到一些数据，将数据渲染到一个小的html模板中，然后将渲染后的小html模板返回给主页，渲染在调用的位置。
   

   li.html

   <ul>
   	{% for i in num %}
   		<li> {{ i }} </li>
   	{% endfor %}
   </ul>
   

5. 使用

   {% load mytags %}
   {{ 'alex'|add_arg:'dsb' }}             返回'xxxx'
   
   {% str_join 'a' 'b' k1='c' k2='d' %}   返回'xxxx'
   
   {% show_li 10 %}    在此html页面将参数10传递给函数show_li，调用show_li函数得到range(1,num+1)，将得到的数据在li.html中进行渲染，然后将渲染后的li.html返回给此html页面，渲染在调用的位置。
   

标签 Tag

标签 Tag

for

{% for i in list %}           for
	{{ forloop }}
	{{ i }}
{% endfor %}

{% for user in user_list %}    for......empty
	{{ user.name }}
{% empty %}
	{{ 空空如也 }}
{% endfor %}                   

• forloop.counter  当前循环的正序的序号 从1开始
• forloop.counter0 当前循环的正序的序号 从0开始
• forloop.revcounter 当前循环的倒序的序号 到1结束
• forloop.revcounter0 当前循环的倒序的序号 到0结束
• forloop.first 当前的循环是否是第一次循环 布尔值
• forloop.last 当前的循环是否是最后一次循环 布尔值
• forloop.parentloop 当前的循环的外层循环的相关参数

if

{% if user_list %}
  用户人数：{{ user_list|length }}
{% elif black_list %}
  黑名单数：{{ black_list|length }}
{% else %}
  没有用户
{% endif %}

• if语句支持 and, or, ==, >, <, !=, >=, <=, in, not in, is, is not判断
• 条件中不能写算数运算
• 不支持连续判断

with

定义一个中间变量
{% with alex.name as alex %}    将alex.name命名为alex
	{{ alex }}
{% endwith %}  

{% with alex = alex.name %}    将alex.name命名为alex
	{{ alex }}
{% endwith %}  

csrf_token

• {% csrf_token %}用于跨站请求伪造保护
• 在form表单里面写上{% csrf_token %}，form标签中就有一个隐藏的input标签，标签的name=“csrfmiddlewaretoken”，可以提交post请求

母板和继承

母板和继承

母板

• 提取多个页面的公共部分放到一个html文件中（base.html）
• 在页面中定义block块

继承

• 子页面中写{% extends ‘base.html’ %}
• 重写block块

注意点：

• {% extends ‘base.html’ %} 模板名字外带引号
• {% extends ‘base.html’ %}写在第一行
• 想要替换的内容要写在block块中
• 母板中多定义写block块，css/js块

组件

• 通过在母板中使用{% block xxx %}来定义块
• 在子页面中通过定义母板中的block名来对应替换母板中相应的内容
• {% block page-main %} {% endblock %}

组件

• 可以将常用的页面内容如导航条，页尾信息等组件保存在单独的文件中，然后在需要使用的地方导入
• 将一小段的html文本写入到文件中（nav.html）
• 在模板中写{% include ‘nav.html’ %}

静态文件

静态文件

• 配置

  STATIC_URL = '/static/'
  STATICFILES_DIRS = [os.path.join(BASE_DIR,'static')]
  

• 引入

  <link rel="stylesheet" href="/static/相对路径">
  <script src="/static/相对路径"></script>
  {% load static %}
  <link rel="stylesheet" href="{% static '相对路径' %}">