Django入门--模板标签、继承与引用

一、模板标签

Django模板引擎提供的可以在模板中进行的各种逻辑操作，是函数调用的一种特殊形式，如循环、判断等功能，期语法规则为：

{% tag %} content

{% tag 参数1 参数2 %} content

{% tag %} content {% endtag %}

详细模板标签操作请点击模板标签学习网址

1.常用标签

（1）if...elif...else... 可以使用and/or/in/not/==/!=/<=/>=, 来进行判断

（2）for...in... 与python中的for...in...用法相同

forloop.counter 当前迭代次数，下标从1开始

forloop.counter0 当前迭代次数，下标从0开始

forloop.revcounter 与forloop.counter一样，下标从大到小：3,2,1

forloop.revcounter0 与forloop.counter0一样，下标从大到小：2,1,0

forloop.first 返回bool类型，如果是第一次迭代，返回True，否则返回False

forloop.last 返回bool类型，如果是最后一次迭代，返回True，否则返回False

forloop.parentloop 如果发生多层for循环嵌套时，返回上一层的for

（3）for...in...empty... 如果没有数据，跳转到empty中

（4）load 加载第三方标签，例如{% load static %}

（5）url 返回一个命名了的url的绝对路径

（6）with 变量缓存,相当于导包时的"as", 例如{% with stu1 = student.0.id %}

（7）autoescape 开启和关闭自动转义

2. 使用案例

把学生信息表传到模板，要求：

1.把女学生的字体改成红色

2.为每位学生的序号添加链接，点击跳转到该学生的详细信息页面

1).在student/views.py中编辑syudent应用的视图函数

from django.http import HttpResponse

from django.shortcuts import render

def detail(request, id):

    return HttpResponse('ID为%s的学生详情页' %id)

def index(request):

    students = [

        {"id":10117,"name":'Willy', "age":21, "sex":"Male"},

        {"id":10121,"name":'Kitty', "age":20, "sex":"Female"},

        {"id":10128,"name":'Kate', "age":19, "sex":"Female"},

        {"id":10133,"name":'Tom', "age":22, "sex":"Male"},

        {"id":10135,"name":'Rose', "age":20, "sex":"Female"}

    ]

    return render(request, 'student/index.html', context={

        'students':students

    })

2).在templates/student/index.html中编辑模板

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>模板标签使用案例</title>

</head>

<body>

    <div>

    <table class="table">

        <thead>

            <tr>

                <th>序号</th>

                <th>姓名</th>

                <th>年龄</th>

                <th>性别</th>

            </tr>

        </thead>

        <tbody>

            {% for stu in students %}

{#              使用if标签把女学生的字体颜色变成红色#}

                <tr {% if stu.sex == 'femal' %} style={"color":"red"} {% endif %}>

{#                    添加a标签，点击后跳转到127.0.0.1:8000/student/detail/stu.id页面#}

{#                    <td><a href="/student/detail/{{ stu.id }}">{{ forloop.counter }}</a></td>#}

                    <td><a href="{% url 'student:detail' stu.id%}">{{ forloop.counter }}</a></td>

                    <td>{{ stu.name }}</td>

                    <td>{{ stu.age }}</td>

                    <td>{{ stu.sex }}</td>

                </tr>

            {% endfor %}

        </tbody>

    </table>

</div>

</body>

</html>

二.模板继承与引用

在实际的开发过程中，页面会非常复杂，有多个html文件编辑不同的页面。有时候不同的html文件会有相同的内容，这会造成冗余。针对这种问题，Django的模板引擎提供继承和引用的功能。

1.模板的继承

Django模版引擎通过模版继承，可以让你创建一个base模板，它包含其他站点中的全部元素以及公共部分，并且可以定义能够被子模版覆盖的 blocks 。

子模板通过"extends"标签实现对base模板的继承，并通过"blocks"标签覆盖内容

1).templates/student/base.html：基模板，用于模板的继承页

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>{% block title %}base模板{% endblock %}</title>

    {% block link %} {% endblock %}

</head>

<body>

    {% block content %}

        <h1>我是base模板</h1>

    {% endblock %}

</body>

</html>

2).templates/student/inherit.html：继承模板，用于继承base模板

{% extends 'student/base.html' %}

{% block title %}学生信息表{% endblock %}

{% block link %}

    <link rel="stylesheet" href="student/css/mystyle.css">

{% endblock %}

<body>

{% block content %}

        <h1>我是继承模板，继承base模板</h1>

{% endblock %}

</body>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

</html>

2.模板的引用

Django通过"inclue"标签实现一个模板在特定位置引用另一个模板的内容

1).templates/student/ad.html：广告模板，用于模板的引用页

<body>

    <h1 id="h1">我是一个广告, 慎点！</h1>

    <script>

        var h = document.getElementById("h1");

        var color = 'blue';

        {#color_change()实现每隔1秒，红蓝之间切换颜色#}

        function color_change() {

            if (color == 'blue'){

                color = 'red';

            }

            else{

                color = 'blue';

            }

            h.style.color = color;

            setTimeout('color_change()', 500)

        }

        color_change()

    </script>

</body>

2).templates/student/iquote.html：引用模板，用于引用ad广告模板

<body>

    <div>

        <h1> 我是引用模板，引用ad模板</h1>

    </div>

    <div style="position:fixed; bottom:0px">

        {% inclue 'student/ad.html' %}

    </div>

</body>