模板引擎的基本使用

视图函数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 模板的操作
def tmp_demo(request):
  # 分配数据
  context = {
      'var':'iloveyou',
      'arr':['aa','bb','cc'],
      'user':{'username':'admin','email':'admin@qq.com'},
      'con':'<h1 style="color:red;">iloveyou</h1>',
      # 'con':'<script>alert("hello")</script>'
      'num':12
      }

  # 加载模板
  return render(request,'tmp/1.html',context)
  # return render(request,'tmp/2.html',context)
  • 变量
1
2
3
4
5
6
7
8
9
10
<ul>
  <!-- 模板引擎的边界符  {{ aa }} -->
  <li>输出变量:{{ var }}</li>
  <li>输出列表:{{ arr }}</li>
  <li>输出列表中的指定元素:{{ arr.2 }}</li>
  <li>输出字典:{{ user }}</li>
  <li>输出字典中值:{{ user.username }}</li>
  <!-- 模板引擎中的注释 -->
  {# <li>输出字典中值:{{ user['username'] }}</li> #}
</ul>
  • 标签

for标签

1
{%  for ... in ... %} 循环逻辑{%  endfor %}

if标签

1
2
3
4
5
6
7
{%  if ... %}
     逻辑1
{%  elif ... %}
    逻辑2
{%  else  %}
    逻辑3
{%  endif %}

comment标签

1
2
3
{%  comment %}
    多行注释
{%  endcomment %}

include：加载模板并以标签内的参数渲染

1
{% include "base/index.html" %}

url：反向解析

1
{% url 'name' p1 p2 %}

csrf_token：这个标签用于跨站请求伪造保护

1
{%  csrf_token %}
1
2
3
4
5
6
7
8
9
10
11
12
13
{% include 'tmp/header.html'%}
<div style="min-height: 400px;">
  <ul>
    <li>
      模板引擎的标签 {% url 'tmp_demo'%}
    </li>

    {%  comment %}
        多行注释
    {%  endcomment %}
  </ul>
</div>
{% include 'tmp/footer.html'%}
  • 过滤器

转大小写

1
{{ var|upper|lower }}

关闭HTML自动转义

1
{{  data|safe  }}

可以在if标签中使用过滤器结合运算符

1
if list1|length > 1

过滤器能够被“串联”，构成过滤器链

1
name|lower|upper

过滤器可以传递参数，参数使用引号包起来

1
list|join:", "

default：如果一个变量没有被提供，或者值为false或空，则使用默认值，否则使用变量的值

1
value|default:"什么也没有"

date：根据给定格式对一个date变量格式化

1
value|date:'Y-m-d'
1
2
3
4
5
6
7
8
9
<ul>
  <li>过滤器的使用:转大写 {{ var|upper }}</li>
  <li>过滤器的使用:链式使用 {{ var|upper|lower }}</li>
  <li>自动转义HTML{{ con }}</li>
  <li>关闭自动转义{{ con|safe }}</li> #不自动编译标签

  <li>{{ arr|join:'</li><li>' }}</li>
  <li>默认值{{ abc|default:'AAA'}}</li>
</ul>
  • 模板运算

加

1
2
{{  value|add:10  }}
note:value=5,则结果返回15

减

1
2
{ {  value|add:-10  } }
结果返回-5，加一个负数就是减法了

乘

1
2
3
{%  widthratio 5 1 100 % }
note:等同于：(5 / 1) * 100 ，结果返回500，
withratio需要三个参数，它会使用参数1/参数2\*参数3的方式进行运算，进行乘法运算，使「参数2」=1

除

1
2
{%  widthratio 5 100 1 % }
note:等同于：(5 / 100) * 1,则结果返回0.05,和乘法一样，使「参数3」= 1就是除法了。

  • 自定义标签或过滤器

    1.在应用中创建一个 templatetags 文件夹,定义一个__init__.py(可写可不写)

    2,在 templatetags 包中定义 一个模块文件 diytags.py

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    from django import template
    register = template.Library()

    # 自定义过滤器
    @register.filter
    def yc_upper(val):
        # print ('val from template:',val)
        return val.upper()

    # 自定义标签
    from django.utils.html import format_html
    @register.simple_tag
    def jia(a,b):
        res = int(a) + int(b)
        return res

    3,在需要使用的模板中 导入 自定义的模块

1
2
3
4
5
<ul>
  {% load diytags%}
  <li>自定义过滤器转大写:{{ var|yc_upper }}</li>
  <li>自定义标签加法运算:{% jia 10 2%}</li>
</ul>

  • 模板继承

    编写继承的html：

1
2
3
4
5
6
7
8
9
{% extends 'base.html'%}

{% block title%}
<title>2.html</title>
{% endblock%}

{% block con%}
    2.html的内容显示
{% endblock%}

被继承的html：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    {% block title%}
    <title>模板文件</title>
    {% endblock%}
</head>
<body>
    <div style="height: 130px;background: #369;">
        <a href="/">首页</a>
    </div>
    <div style="height: 400px;">
        {% block con%}
            内容
        {% endblock%}
    </div>

    <div style="height: 130px;background: #ccc;"></div>
</body>
</html>