您的位置：首页 > 编程语言 > Go语言

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

2019-03-25 17:19 417 查看

本文关于模板继承的好处的内容系引用自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 %}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航