Django项目中模板标签及模板的继承与引用
常见模板标签
{% static %} {% for x in range(x) %}{% endfor %} 循环的序号{% forloop %} 循环的序号反向排列,从1开始计算,从0开始计算在后面加上0{% forloop.revcounter0 %} {% if condition1 %}sentence1{% else condition2 %}sentence2{% endif %}
模板标签url反向解析
视图函数
def student_detail_view(request,pk): students = { 1:{'id':1,'name': '小明', 'age': 18, 'sex': '男'}, 3:{'id':3,'name': '小花', 'age': 17, 'sex': '女'}, 19:{'id':19,'name': '小李', 'age': 18, 'sex': '男'}, 100:{'id':100,'name': '小红', 'age': 18, 'sex': '女'}, } if pk in students: student = students[pk] else: student = '查无此人' return render(request,'teacher/student_detail.html',context={'student':student})
url反向解析应用模板
<tbody> {% for student in students %} <tr {% if student.sex == '女' %}style="background-color: pink"{% 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>
学生详情页:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> 学生详情页: {{ student }} </body> </html>
模板的继承与引用
为什么要有模板的继承与引用?
学前端的时候写的页面比较复杂,每个页面都有相同的地方。
模板的继承
首先,新建一个父类页面。 挖好坑1和坑2。
{% load static %} <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --> <!-- 挖坑1,通过模板标签block来实现模板的继承与引用 --> <title>{% block title %}{% endblock %}</title> <!-- Bootstrap --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 --> <!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 --> <!--[if lt IE 9]> <script src="/UploadFiles/2021-04-08/html5shiv.min.js">其次,子类页面的继承。
{% extends 'teacher/base.html' %} {% block title %}学生列表{% endblock %} {% block content %} <h1>学生列表</h1> <table class="table"> <thead> <tr> <th>ID</th> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> {% for student in students %} <tr {% if student.sex == '女' %}style="background-color: pink"{% 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> </table> {% endblock %}最终效果展示:
Attention:
- 一般情况一层继承就够了,多层继承不好,因为容易出错
- 模板的继承要先在父类页面挖坑,子类页面可以填坑
模板的引用
首先,创建一个被引用的广告页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a{ text-decoration: none; position: fixed; bottom: 0; } </style> </head> <body> <h1><a href="https://www.baidu.com/" id="ad">这是一个广告!不要点不要点</a></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()',500) } change_color() </script> </body> </html>
其次,在页面中引用被引用的页面。
这里我们是在一个父类页面中引用的被引用页面
关键代码是下面的引用语句
{% include 'teacher/ad.html' %}
详细代码如下:
{% load static %} <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --> <title>{% block title %}Bootstrap{% endblock %}</title> <!-- 引用广告页面! --> {% include 'teacher/ad.html' %} <!-- Bootstrap --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 --> <!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 --> <!--[if lt IE 9]> <script src="/UploadFiles/2021-04-08/html5shiv.min.js">如果将引用语句加在父类页面,那么继承父类页面的子页面都会有被引用的页面效果
效果展示如下:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“详解Django项目中模板标签及模板的继承与引用(网站中快速布置广告)”评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?
更新动态
2024年11月26日
2024年11月26日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]