详解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执行等待程序直到第二天零点的方法
Apr 23 Python
使用Python3制作TCP端口扫描器
Apr 17 Python
浅谈pyhton学习中出现的各种问题(新手必看)
May 17 Python
python实现音乐下载器
Apr 15 Python
Python爬虫包BeautifulSoup简介与安装(一)
Jun 17 Python
多个python文件调用logging模块报错误
Feb 12 Python
python3连接MySQL8.0的两种方式
Feb 17 Python
python GUI库图形界面开发之PyQt5时间控件QTimer详细使用方法与实例
Feb 26 Python
python读取yaml文件后修改写入本地实例
Apr 27 Python
python实现网页录音效果
Oct 26 Python
python如何快速拼接字符串
Oct 28 Python
Python 读写 Matlab Mat 格式数据的操作
May 19 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
神族 Protoss 剧情介绍
2020/03/14 星际争霸
PHP支持多种格式图片上传(支持jpg、png、gif)
2011/11/03 PHP
使用PHP计算两个路径的相对路径
2013/06/14 PHP
php弹出对话框实现重定向代码
2014/01/23 PHP
JavaScript窗口功能指南之在窗口中书写内容
2006/07/21 Javascript
深入认识JavaScript中的函数
2007/01/22 Javascript
javascript常用函数(2)
2015/11/05 Javascript
jQuery实现的可编辑表格完整实例
2016/06/20 Javascript
js调用屏幕宽度的简单方法
2016/11/14 Javascript
Vue.js中的图片引用路径的方式
2017/07/28 Javascript
React-Native中props具体使用详解
2017/09/04 Javascript
浅谈在koa2中实现页面渲染的全局数据
2017/10/09 Javascript
vue中如何去掉空格的方法实现
2018/11/09 Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
2019/05/16 Javascript
[56:35]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第二局
2016/02/27 DOTA
Python yield使用方法示例
2013/12/04 Python
基于python select.select模块通信的实例讲解
2017/09/21 Python
python3如何将docx转换成pdf文件
2018/03/23 Python
Python简单生成随机数的方法示例
2018/03/31 Python
Python实现的读写json文件功能示例
2018/06/05 Python
Django添加feeds功能的示例
2018/08/07 Python
使用Django连接Mysql数据库步骤
2019/01/15 Python
解决django中form表单设置action后无法回到原页面的问题
2020/03/13 Python
Python3 socket即时通讯脚本实现代码实例(threading多线程)
2020/06/01 Python
Python导入数值型Excel数据并生成矩阵操作
2020/06/09 Python
宝塔面板成功部署Django项目流程(图文)
2020/06/22 Python
AC Lens:购买隐形眼镜
2017/02/26 全球购物
Interrail法国:乘火车探索欧洲,最受欢迎的欧洲铁路通票
2019/08/27 全球购物
揭牌仪式策划方案
2014/05/28 职场文书
民族团结好少年事迹材料
2014/08/19 职场文书
某集团股份有限公司委托书样本
2014/09/24 职场文书
2014年城管个人工作总结
2014/12/08 职场文书
2015年发展党员工作总结报告
2015/03/31 职场文书
2015年医院工作总结范文
2015/04/09 职场文书
网络妈妈观后感
2015/06/08 职场文书
公共场所卫生管理制度
2015/08/05 职场文书