Django 模板层

Django模板层

　　模板层的主要任务就是如何将页面呈现给用户，用户能看到的所有东西都是属于模板层进行呈现的。

　　 HTML文件就是模板，模板是会先经过渲染，再呈现给用户。

　　学习模板层主要有以下两点：

　　变量相关或处理均使用{{}}，即模板变量。

　　逻辑相关或处理均使用{%%}，即模板标签。

模板变量传值

　　其实在聊Django视图层的时候介绍的render()方法中就允许将视图函数中的变量传递给模板。

　　模板中使用{{name}}即可完成调用。

def test(request):
    username = "云崖先生"
    return render(request,"test.html",locals())

<body>
    {{username}}
</body>

传值类型

　　 Python中所有基本数据类型均可以进行模板传递，但是函数、类等可调用类型会出现一些令人意外的情况。

　　注意：可调用类型传递时会自动加括号调用，并将返回值进行渲染（如果没有返回值则为None），但是不支持参数的传递。

　　后端返回：

def test(request):

    STR = "云崖先生"
    INT = 100
    FLOAT = 11.11
    BOOL = True
    DICT = {"v1":"k1"}
    SET = {"1","2","3"}
    TUPLE = (1,2,3)
    LIST = [1,2,3,4]

    def func():
        return "function"

    class T1(object):
        pass

    return render(request,"test.html",locals())

　　模板接收：

<body>

    <p>{{STR}}</p>
    <p>{{INT}}</p>
    <p>{{FLOAT}}</p>
    <p>{{BOOL}}</p>
    <p>{{DICT}}</p>
    <p>{{SET}}</p>
    <p>{{TUPLE}}</p>
    <p>{{LIST}}</p>
    <p>{{func}}</p>  <!-- 不支持参数传递 -->
    <p>{{T1}}</p>  <!-- 实例化出了一个类 -->
    
</body>

　　渲染结果：

云崖先生

100

11.11

True

{'v1': 'k1'}

{'1', '2', '3'}

(1, 2, 3)

[1, 2, 3, 4]

function

<app01.views.test.<locals>.T1 object at 0x000001C1E00ACB38>

元素取出

　　无论后端的变量是list或者dict，均可使用.语法进行取值。

传值：
def test(request):

    DICT = {"hobby":["basketball","football","volleyball"]}

    return render(request,"test.html",locals())
    

取值：
{{DICT.hobby.2}}

结果：
volleyball

模板变量过滤

　　由于后端的函数模板中使用函数无法传递参数，所以提供自带的过滤器进行操作。

　　过滤器有非常多的功能，大概有六十多种过滤器提供使用，这里只介绍常用的。

使用示例

　　以下举例常用的模板过滤器

过滤器	描述
{{v1\|length}}	获取v1的长度
{{v1\|default:v2}}	如果v1为真，则使用v1，否则使用v2
{{v1\|filesizeformat}}	v1必须是int类型，对其进行`KB、MB、GB、TB`等进制之间的转换
{{v1\|date:"Y-m-d X"}}	v1必须是时间类型，对其进行自定义格式化
{{v1\|slice:"start:stop:step"}}	v1必须是可通过索引取值的类型，对其进行切片
{{v1\|truncatechars:num}}	v1必须是可通过索引取值的类型，对其截取指定长度的字符（包含三个`.`）
{{v1\|truncatewords:num}}	v1必须是字符串类型，对其进行截取特点数量的单词，以空格分隔（不包含`.`）
{{v1\|cut:'v2'}}	移除v1中特定的字符v2
{{v1\|join:'v2'}}	使用v2对v1进行拼接
{{v1\|add:v2}}	v1与v2进行相加，如都是int则为加法，如都是str则为拼接
{{v1\|safe}}	识别v1中的HTML代码并进行渲染（默认不会进行渲染）

　　后端返回：

def test(request):
    import datetime
    v_1 = "12345"
    v_2 = False
    v_3 = 10240
    v_4 = datetime.datetime.now()
    v_5 = ["一","二","三","四","五","六","七"]
    v_6 = "abcdefghijklmn"
    v_7 = "HELLO WORD HELLO DJANGO"
    v_8 = "ABC$$$"
    v_9 = "QWETYU"
    v_10 = 10
    v_11 = "<h1>标题一<h1>"
    return render(request,"test.html",locals())

　　模板接收加过滤：

<body>

   <p>{{v_1|length}}</p>
   <p>{{v_2|default:1}}</p>
   <p>{{v_3|filesizeformat}}</p>
   <p>{{v_4|date:"Y-m-d h:m:s"}}</p>
   <p>{{v_5|slice:"1:4:2"}}</p>
   <p>{{v_6|truncatechars:6}}</p> 
   <!-- 上面的： 三个点占三个位置 -->
   <p>{{v_7|truncatewords:3}}</p>
   <!-- 上面的：三个点不占位置 -->
   <p>{{v_8|cut:"$"}}</p>
   <p>{{v_9|join:"---"}}</p>
   <p>{{v_10|add:10}}</p>
   {{v_11|safe}}

</body>

　　渲染结果：

后端渲染

　　默认的，后端如果返回HTML代码模板层是不会进行渲染的，这是为了防止XSS攻击。

　　但是如果使用mark_safe()进行包裹，则会进行渲染。

def test(request):

    from django.utils.safestring import mark_safe # 导入模块
    
    res = "<h1>不会渲染<h1>"
    res_safe = mark_safe("<h1>会渲染<h1>")
    return render(request,"test.html",locals())

<body>

    {{res}}
    {{res_safe}}

</body>

模板标签分支

基本使用

　　模板中支持对{% if %}、{% else %}、{% elif %}进行使用，与Python中逻辑一致。

　　注意：判断完成后要使用{% endif %}进行结束判断的标志

<body>

    {% if user %} <!-- 在{%%}的模板标签中，被{{}}套住的变量可以不用写{{}}-->
        <p>有内容</p>
    {% else %}
        <p>无内容</p>
    {% endif %}
    
</body>

模板标签循环

基本使用

　　模板中支持{% for %}来进行操作。

　　注意：循环完成后要使用{% endfor %}进行结束循环的标志

li = ["A","B","C"]

<body>
    
    {% for row in li %}
        <p> {{row}} </p> <!-- 在{%%}外使用变量，依然要嵌套上{{}} -->
    {% endfor %}
        
</body>

A

B

C

forloop

　　 {{forloop}}记录了一些循环的信息。

　　如下所示：

li = ["A","B","C"]

<body>
    
    {% for row in li %}
       <p> {{forloop}} </p> <!-- 可使用 {{forloop.counter/first/last}} 等 -->
    {% endfor %}
        
</body>

不可循环

　　如果一个迭代对象为空，则不可循环。此时可以使用{% empty %}进行操作

li = []

<body>

    {% for row in li %}
    	<p>不为空</p>
    {% empty %}
    	<p>迭代对象为空</p> <!--执行这里-->
    {% endfor %}

</body>

键值方法

　　在循环中，可以对被遍历的对象使用keys、values、items进行操作。

　　这与Python中是一样的。

dic = {"name":"云崖","age":"18","gender":"男",}

<body>

    {% for key in dic.keys %}
        <p>{{key}}</p>
    {% endfor %}

    {% for value in dic.values %}
        <p>{{value}}</p>
    {% endfor %}

    {% for kv in dic.items %}
        <p>{{kv}}</p>
    {% endfor %}

</body>

----------------
name

age

gender
----------------
云崖

18

男
----------------
('name', '云崖')

('age', '18')

('gender', '男')

模板标签别名

　　可以使用{% with %}配合as对嵌套复杂的单项数据做一个别名。方便后续进行拿出，更推荐与循环进行配套使用。

li = [
	{"username":"Yunya"},
	{"username":"Jack"},
	{"username":"Tom"},
]

----------------

<body>

    {% for row in li %}

        {% with row.username as data %}
                <p>{{data}}</p>
                <!-- 如果不使用别名，则需要写 {{row.username}} 这只是一个示例，实际的嵌套可能比这个复杂的多 -->
        {% endwith %}
        
    {% endfor %}
        
</body>

----------------

Yunya

Jack

Tom

自定义系列

　　所有的，自定义都需要完成以下三步骤：

　　 1.在APP中创建templatetags文件夹，必须叫这个名字

　　 2.在该文件夹下创建一个py文件，可以是任意名字

　　 3.导入一个模块，并写一句话

　　 from django import template

　　 register = template.Library()

自定义过滤器

　　先完成上面三步，再进行过滤器的创建。

　　自定义过滤器的作用就是丰富内置的过滤器，完成你的需求。

　　注意：过滤器的调用是{{ v1|filter:v2 }}，过滤器最多只能传递两个参数，且第一个参数在|左边，第二个参数传递的格式必须是过滤器名字:右边的参数。

　　自定义过滤器全步骤：

# app01/templatetags/tags.py

from django import template
register = template.Library()


@register.filter(name="f1")  # 在使用时，使用的是这个名字。函数名可以随便取。注意一定要关键字传参
def f1(left, right):  # left 代表斜杠左边的值，right代表斜杠右边的值
    return left + right

　　基本使用：

<body>

    {% load tags %}  <!-- 先导入标签的文件，tags.py -->
    {{1|f1:2}} <!-- 最多两个参数，参数1|过滤器名字:参数2  这是固定格式
        
</body>

-------

3

自定义标签

　　自定义标签与自定义过滤器比较相似但是也有两大不同。

　　 1.支持无限制的参数传递

　　 2.参数传递方式不同

　　注意：标签的调用是{% tag v1 v2 v3 %}，这与过滤器有较大的不同。

　　先完成上面三步，再进行标签的创建。

# app01/templatetags/tags.py

from django import template
register = template.Library()


@register.simple_tag(name="t1")  # 在使用时，使用的是这个名字。函数名可以随便取。注意一定要关键字传参
def t1(v1, v2, v3):
    return v1 + v2 + v3

　　基本使用：

<body>

    {% load tags %} <!-- 先导入标签的文件，tags.py -->
    {% t1 1 2 3%} <!--参数无限制-->
        
</body>

自定义inclusion_tag

　　自定义inclusion_tag与上面两个都不太一样，它返回的是一个局部页面，当你的项目中有很多网页中都有相同的一部分网页结构，则使用自定义inclusion_tag来完成。

　　还是需要先完成上面三个步骤。

# app01/templatetags/tags.py

from django import template
register = template.Library()

@register.inclusion_tag("common.html") # 去根目录找templates文件夹下的common.html文件
def common_html(username): # 注意，这里调用是函数名，而不是上面指定的名字了
    user = username
    return locals() # 返回当前命名空间中所有变量名

# 项目根目录/templats/common.html

<h1>当前登录:{{user}}</h1> # 可以拿到 common_html 函数中的所有变量名了
<h1>点击注销</h1>

# 被渲染的模板

<body>

    {% load tags %}
    {% common_html "云崖" %} <!---这一处将会替换为指定的页面，即common.html里的内容-->
        
</body>

模板继承引入

模板继承

　　模板继承是全栈开发里面Django所提供的非常牛逼的一个功能，它允许你一套HTML模板能被其他模板进行继承并修改一些特定区域的内容。

# 项目根目录/templats/common.html

{% block left %}
<!-- 这里面可以允许修改，相当于给这块区域起一个名字，left -->

{% endblock %}

============================

# 项目根目录/templats/other.html

{% extends 'common.html' %}
<!-- 继承common.html -->

{% block left %}
<!-- 执行修改 -->

{% endblock %}

　　接下来看一下演示代码就知道了。

　　这里放一套公用的左右布局页面

# 项目根目录/templats/common.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css'
        integrity='sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u' crossorigin='anonymous'>
    <script src='https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js'
        integrity='sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa'
        crossorigin='anonymous'></script>
    <title>Document</title>
    
    {% block CSS %}
        
    {% endblock %}
        
</head>

<body>

    <header class="navbar navbar-inverse">
        <!-- 头部，不允许改变 -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                        aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li class="dropdown-header">Nav header</li>
                        <li><a href="#">Separated link</a></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="../navbar/">Default</a></li>
                <li><a href="../navbar-static-top/">Static top</a></li>
                <li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li>
            </ul>
        </div>
    </header>
    <main class="container-full">

        <div class="row">
            <section class="col-sm-3 col-md-2 sidebar">
                <!-- 左边，允许改变一小块区域 -->
      
                    <ul class="nav nav-sidebar">
                        <li class="active"><a href="#">menu1 <span class="sr-only">(current)</span></a></li>
                        <li><a href="#">menu2</a></li>
                        <li><a href="#">menu3</a></li>
                        <li><a href="#">menu4</a></li>
                    </ul>
                    {% block left %}
                    <!-- 这里面可以允许修改，相当于给这块区域起一个名字，left -->
 
                    {% endblock %}


            </section>

            <section class="col-lg-6">

                {% block right %}
                <!-- 这里面可以允许修改，相当于给这块区域起一个名字right -->
       

                {% endblock %}

            </section>
        </div>

    </main>

</body>

{% block Js %}
    
{% endblock %}

</html>

# 项目根目录/templats/其他页面.html

{% extends 'common.html' %}
<!-- 继承common.html -->

{% block left %}
<!-- 修改内容 -->
<ul class="nav nav-sidebar">
    <li><a href="">menu-div-1</a></li>
    <li><a href="">menu-div-2</a></li>
    <li><a href="">menu-div-3</a></li>
</ul>
{% endblock %}

{% block right %}
<!-- 修改内容 -->
    <h4>Subheading</h4>
    <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>

    <h4>Subheading</h4>
    <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>

    <h4>Subheading</h4>
    <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>

{% endblock %}

{% block css %}
<!-- 修改CSS -->
{% endblock %}

{% block js %}
<!-- 修改Js -->
{% endblock %}

模板引入

　　模板引入是在一个HTML中引入一段公用的HTML代码。

# 项目根目录/templats/common.html

<h1>公用咯<h1>

============================

# 项目根目录/templats/other.html

{include "common.html"}  <!-- 将common.html中代码全部拿过来 -->

posted @ 2020-09-18 14:22 云崖先生阅读(357) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

摘星小筑

摘星小筑

Django 模板层

Django模板层

模板变量传值

传值类型

元素取出

模板变量过滤

使用示例

后端渲染

模板标签分支

基本使用

模板标签循环

基本使用

forloop

不可循环

键值方法

模板标签别名

自定义系列

自定义过滤器

自定义标签

自定义inclusion_tag

模板继承引入

模板继承

模板引入

公告