详解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脚本日志功能
Aug 14 Python
基于python时间处理方法(详解)
Aug 14 Python
python使用正则表达式替换匹配成功的组并输出替换的次数
Nov 22 Python
python分治法求二维数组局部峰值方法
Apr 03 Python
python 中文件输入输出及os模块对文件系统的操作方法
Aug 27 Python
python使用folium库绘制地图点击框
Sep 21 Python
python3 爬取图片的实例代码
Nov 06 Python
selenium设置proxy、headers的方法(phantomjs、Chrome、Firefox)
Nov 29 Python
Python循环结构的应用场景详解
Jul 11 Python
python word转pdf代码实例
Aug 16 Python
Python识别html主要文本框过程解析
Feb 18 Python
pycharm最新激活码有效期至2100年(亲测可用)
Feb 05 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
如何开始收听短波广播
2021/03/01 无线电
增加反向链接的101个方法 站长推荐
2007/01/31 PHP
简单的PHP图片上传程序
2008/03/27 PHP
php strlen mb_strlen计算中英文混排字符串长度
2009/07/10 PHP
PHP zip扩展Linux下安装过程分享
2014/05/05 PHP
php强制文件下载而非在浏览器打开的自定义函数分享
2014/05/08 PHP
PHP闭包函数详解
2016/02/13 PHP
php用户登录之cookie信息安全分析
2016/05/13 PHP
PHP请求Socket接口测试实例
2016/08/12 PHP
php求数组全排列,元素所有组合的方法总结
2017/03/14 PHP
PHP 的Opcache加速的使用方法
2017/12/29 PHP
JQuery下关于$.Ready()的分析
2009/12/13 Javascript
JQuery实现的在新窗口打开链接的方法小结
2010/04/22 Javascript
关于jquery css的使用介绍
2013/04/18 Javascript
JavaScript自动设置IFrame高度的小例子
2013/06/08 Javascript
Javascript小技巧之生成html元素
2014/05/15 Javascript
分析了一下JQuery中的extend方法实现原理
2015/02/27 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
2015/05/14 Javascript
简介JavaScript中的setHours()方法的使用
2015/06/11 Javascript
基于Node.js实现nodemailer邮件发送
2016/01/26 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
2016/03/02 Javascript
vue-cli开发环境实现跨域请求的方法
2018/04/07 Javascript
react 中父组件与子组件双向绑定问题
2019/05/20 Javascript
JS面向对象实现飞机大战
2020/08/26 Javascript
Vue组件简易模拟实现购物车
2020/12/21 Vue.js
[03:08]迎霜节狂欢!2018年迎霜节珍藏Ⅰ一览
2018/12/25 DOTA
Linux下远程连接Jupyter+pyspark部署教程
2019/06/21 Python
tensor和numpy的互相转换的实现示例
2019/08/02 Python
Pytorch卷积层手动初始化权值的实例
2019/08/17 Python
Python networkx包的实现
2020/02/14 Python
python读取mysql数据绘制条形图
2020/03/25 Python
需要知道的CSS3动画技术
2010/01/01 HTML / CSS
关于前端上传文件全面基础扫盲贴(入门)
2019/08/01 HTML / CSS
公务员保密承诺书
2014/03/27 职场文书
2015年除四害工作总结
2015/07/23 职场文书
Java如何实现通过键盘输入一个数组
2022/02/15 Java/Android