详解Django项目中模板标签及模板的继承与引用(网站中快速布置广告)


Posted in Python onMarch 27, 2019

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="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
  <![endif]-->
 </head>
 <body>
 <!-- 挖坑2,通过模板标签block来实现模板的继承与引用 -->
 {% block content %}{% endblock %}

  <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
  <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
  <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
 </body>
</html>

其次,子类页面的继承。

{% 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 %}

最终效果展示:

详解Django项目中模板标签及模板的继承与引用(网站中快速布置广告)

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="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
  <![endif]-->
 </head>
 <body>
 {% block content %}

 {% endblock %}

  <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
  <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
  <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
 </body>
</html>

如果将引用语句加在父类页面,那么继承父类页面的子页面都会有被引用的页面效果

效果展示如下:

详解Django项目中模板标签及模板的继承与引用(网站中快速布置广告)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Python 相关文章推荐
Python中处理字符串的相关的len()方法的使用简介
May 19 Python
机器学习经典算法-logistic回归代码详解
Dec 22 Python
Python自定义线程池实现方法分析
Feb 07 Python
python读取文本中数据并转化为DataFrame的实例
Apr 10 Python
使用实现XlsxWriter创建Excel文件并编辑
May 04 Python
python微元法计算函数曲线长度的方法
Nov 08 Python
python实现的爬取电影下载链接功能示例
Aug 26 Python
Python OpenCV图像指定区域裁剪的实现
Oct 30 Python
Django封装交互接口代码
Jul 12 Python
python学习笔记之多进程
Aug 06 Python
利用python进行数据加载
Jun 20 Python
Python上下文管理器Content Manager
Jun 26 Python
python模块之subprocess模块级方法的使用
Mar 26 #Python
详解Python数据可视化编程 - 词云生成并保存(jieba+WordCloud)
Mar 26 #Python
Python实现的矩阵转置与矩阵相乘运算示例
Mar 26 #Python
深度辨析Python的eval()与exec()的方法
Mar 26 #Python
详解Python locals()的陷阱
Mar 26 #Python
python 为什么说eval要慎用
Mar 26 #Python
Python eval的常见错误封装及利用原理详解
Mar 26 #Python
You might like
PHP中的日期及时间
2006/11/23 PHP
手把手教你使用DedeCms V3的在线采集图文教程
2007/04/03 PHP
php5.3 注意事项说明
2013/07/01 PHP
Laravel 4 初级教程之安装及入门
2014/10/30 PHP
ThinkPHP有变量的where条件分页实例
2014/11/03 PHP
php文件下载处理方法分析
2015/04/22 PHP
简单了解将WordPress中的工具栏移到底部的小技巧
2015/12/31 PHP
详解PHP多个进程配合redis的有序集合实现大文件去重
2019/03/06 PHP
JQuery选择器特辑 详细小结
2012/05/14 Javascript
基于jquery的图片轮播 tab切换组件
2012/07/19 Javascript
JQuery中使用ajax传输超大数据的解决方法
2014/07/14 Javascript
js判断子窗体是否关闭的方法
2015/08/11 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
2015/09/26 Javascript
JavaScript观察者模式(经典)
2015/12/09 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
2016/06/03 Javascript
js动态获取子复选项并设计全选及提交的实现方法
2016/06/24 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
2016/08/24 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
2016/10/10 Javascript
AngularJS中filter的使用实例详解
2017/08/25 Javascript
security.js实现的RSA加密功能示例
2018/06/06 Javascript
vue 动态绑定背景图片的方法
2018/08/10 Javascript
JavaScript Array对象使用方法解析
2019/09/24 Javascript
使用 UniApp 实现小程序的微信登录功能
2020/06/09 Javascript
Vue 实现拨打电话操作
2020/11/16 Javascript
Python魔术方法详解
2015/02/14 Python
浅谈Django的缓存机制
2018/08/23 Python
python实现简单多人聊天室
2018/12/11 Python
Python中的引用知识点总结
2019/05/20 Python
tensorflow之tf.record实现存浮点数数组
2020/02/17 Python
英国口碑最好的的维他命胶囊品牌:Myvitamins(有中文站)
2016/12/03 全球购物
平安建设实施方案
2014/03/19 职场文书
新学期教师寄语
2014/04/02 职场文书
2016新年感言
2015/08/03 职场文书
体育教师研修感悟
2015/11/18 职场文书
2016年11月份红领巾广播稿
2015/12/21 职场文书
初中班主任培训心得体会
2016/01/07 职场文书