20190322 Django模板标签、模板的继承与引用

本文关于模板继承的好处的内容系引用自keithzone的博客“django 模板”,链接:https://blog.csdn.net/keithzone/article/details/81117177, 感谢该博友的原创笔记分享。

I. Django模板标签

for标签

{% for name in names %} {% endfor %}

<tbody>
    {% for student in students %}
        <tr {% if student.sex == 'Female' %} style="background-color: lightpink"{% else %} style="background-color: aqua" {% endif %}>"
            <td><a href="{% url 'teacher:student_detail' student.id %}">{{ student.id }}</a></td>
            <td>{{ student.name }}</td>
            <td>{{ student.age }}</td>
            <td>{{ student.sex }}</td>
        </tr>
    {% endfor %}
</tbody>

if标签{% if %}{% else %}{% endif %}

{% if student.sex == '女' %}style="background-color: pink"{% else %}style="background-color: aqua"{% endif %}

循环逻辑

forloop.counter序号(升序)

forloop.counter0序号(升序从零开始)

forloop.revcounter序号(降序)

forloop.revcounter0序号(降序以零结束)

url标签(反向解析,返回一个命名了的url绝对路径)

<td><a href="/teacher/student/{{ student.id }}">{{ student.id }}</a></td>

引用路径应该尽可能避免硬编码,因此我们在teacher应用的urls.py里面的path函数中,追加了name=‘student_detail’,通过这个name(变量名),在模板里可以通过一个url标签反向解析’student/int:pk/’,代码如下:

<td><a href="{% url 'teacher:student_detail' student.id %}{{ student.id }}">{{ student.id }}</a></td>

II. Django模板的继承与引用

页面的代码很多,随随便便就是几百行代码,但是每个页面之中都有相同的元素。

继承

{% extends %}

模板继承的好处:

1)模板继承可以减少页面内容的重复定义,实现页面内容的重用

2)典型应用:网站的头部、尾部是一样的,这些内容可以定义在父模板中,子模板不需要重复定义

3)block标签:在父模板中预留区域,在子模板中填充

4)extends继承:继承,写在模板文件的第一行

继续以teacher应用为例:

Step1. 先在templates目录下的teacher目录中新建一个Base(基板)的html文件,将原先student_list_page里的内容复制粘贴到此html文件当中;

Step2. 在中加入block标签:<title>{% block title %}TITLE{% endblock %}</title>

Step3. 将原student_list_page.html文件中的内容清空,替换为如下内容:

{% extend  'teacher/base.html'%}
{% block title %}学生列表{% endblock %}
{% block content %}
    <h1>学生列表</h1>
    <table class="table">
        <thread>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thread>
        <tbody>
        {% for student in students %}
            <tr {% if student.sex == 'Female' %} style="background-color: lightpink"{% else %} style="background-color: aqua" {% endif %}>"
                <td><a href="{% url 'teacher:student_detail' student.id %}{{ student.id }}">{{ student.id }}</a></td>
                <td>{{ student.name }}</td>
                <td>{{ student.age }}</td>
                <td>{{ student.sex }}</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
{% endblock %}

注意:以上的{% block content %}{% endblock %}所包含的内容是从base.html里的content的内容剪切过来的,此时base.html已经没有content的内容。

模板引用

继续以teacher应用为例:

先在templates目录下的teacher目录中新建一个ad.html文件,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 id="ad">广告乱点入,英雄两行泪</h1>
<script>
    var h = document.getElementById('ad');
    var color = 'blue';
    function change_color() {
        if (color == 'blue'){
            color = 'red'
        }
        else{
            color = 'blue'
        }
        h.style.color = color;
        setTimeout('change_color()', 1000)
    }
    change_color()
</script>
</body>
</html>

html写完之后,我们要把这个广告位植入到teacher目录下的各个页面。比如将广告位植入到student_detail.html中,只需在继承标签中间正文末尾位置插入 {% include ‘teacher/ad.html’ %}即可,如下代码:

{% extends 'teacher/base.html' %}
{% block title %}学生详情{% endblock %}
{% block content %}
    <form action="">
        <p>姓名:<input type="text" value="{{ student.name }}"></p>
        <p>性别:<input type="text" value="{{ student.sex }}"></p>
        <p>年龄:<input type="text" value="{{ student.age }}"></p>
    </form>
    {% include 'teacher/ad.html' %}
{% endblock %}

但很多时候,每个应用目录下的模板有非常多,可能会有几百上千个,一个一个植入显然工作量很大。既然已经有了base.html作为基板,各种模板从base中继承,那我们完全可以把广告植入到base.html里,然后让各个模板都继承,在每个页面的底部显示广告。代码写法:在body标签的囊括的内容中、正文{% endblock %}的末尾,添加如下代码:

{% block ad %}
    <div style="position: fixed; bottom: 0px">
        {% include 'teacher/ad.html' %}
    </div>
{% endblock %}

base.html中插入广告标签的代码截图

猜你喜欢

转载自blog.csdn.net/qq_43637120/article/details/88800030