详解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标准库与第三方库详解
Jul 22 Python
简化Python的Django框架代码的一些示例
Apr 20 Python
python中循环语句while用法实例
May 16 Python
Python的Django框架中的表单处理示例
Jul 17 Python
Python的Django应用程序解决AJAX跨域访问问题的方法
May 31 Python
python实现决策树、随机森林的简单原理
Mar 26 Python
对Python捕获控制台输出流的方法详解
Jan 07 Python
在pycharm中设置显示行数的方法
Jan 16 Python
Python 异步协程函数原理及实例详解
Nov 13 Python
使用python实现名片管理系统
Jun 18 Python
虚拟机下载python是否需要联网
Jul 27 Python
分享7个 Python 实战项目练习
Mar 03 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中实现Javascript的escape()函数代码
2010/08/08 PHP
php实例分享之html转为rtf格式
2014/06/02 PHP
JS获取dom 对象 ajax操作 读写cookie函数
2009/11/18 Javascript
js制作的鼠标悬浮时产生的下拉框效果
2012/10/27 Javascript
HTML Color Picker(js拾色器效果)
2013/08/27 Javascript
javascript二维数组转置实例
2015/01/22 Javascript
js和jquery实现监听键盘事件示例代码
2020/06/24 Javascript
jquery ztree实现模糊搜索功能
2016/02/25 Javascript
详解Jquery实现ready和bind事件
2016/04/14 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
2016/06/18 Javascript
jQuery Ajax前后端使用JSON进行交互示例
2017/03/17 Javascript
微信小程序实现轮播图效果
2017/09/07 Javascript
vue interceptor 使用教程实例详解
2018/09/13 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
2019/05/21 Javascript
[01:12]快闪回顾DOTA2亚洲邀请赛(DAC) 静候2018新征程开启
2018/03/11 DOTA
python3实现ftp服务功能(客户端)
2017/03/24 Python
python保存数据到本地文件的方法
2018/06/23 Python
Random 在 Python 中的使用方法
2018/08/09 Python
python+opencv实现阈值分割
2018/12/26 Python
python web框架中实现原生分页
2019/09/08 Python
python让函数不返回结果的方法
2020/06/22 Python
如何使用python写截屏小工具
2020/09/29 Python
香港太阳眼镜网上商店:SmartBuyGlasses香港
2016/07/22 全球购物
英国领先的奢侈品零售商之一:CRUISE
2016/12/02 全球购物
Kent & Curwen:与大卫·贝克汉姆合作
2017/06/13 全球购物
ECOSUSI官网:女式皮革背包
2019/09/27 全球购物
西安众合通用.net笔试题
2013/03/18 面试题
幼儿园的门卫岗位职责
2014/04/10 职场文书
三好学生个人先进事迹材料
2014/05/17 职场文书
敬老模范事迹
2014/05/21 职场文书
小学生放飞梦想演讲稿
2014/08/26 职场文书
保密工作整改报告
2014/11/06 职场文书
2014年幼儿园教学工作总结
2014/12/04 职场文书
Ajax请求超时与网络异常处理图文详解
2021/05/23 Javascript
Prometheus 监控MySQL使用grafana展示
2021/08/30 MySQL
Mysql排序的特性详情
2021/11/01 MySQL