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

2024-10-21 12:39:58

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

最终效果展示：

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模板变量如何传递给外部js调用的方法小结

前言因为工作的需要,最近一直在思考如何更好的组织Django中的静态资源,比如JS.CSS一类,如何结合前端构建工具写出更好的代码以及结构呢?下面这篇文章就给大家详细介绍了实现的方法,话不多说,来一起看看详细的介绍: 方法如下: 首先需要解决的一个问题就是某些时候需要把JS代码写在模板里来获取后台传递过来的变量,比如: <div> <h1>Test</h1> <div id="my-test" ></div> </di
Django使用模板后无法找到静态资源文件问题解决

环境配置 Django版本1.11 python版本3.6.2 前言在编写Django网站的时候,在涉及模板方面,一些简单的例子都没有问题,但这些例子都有一个共同点,那就是所使用的模板没有需要的静态资源文件.当涉及到模板中需要静态资源文件,如css,js等文件的时候,如果我们不做什么处理,直接按前端写好的给我们放入到templates文件中时,即如下形式: |templates |----js |--------xxxx.js |----css |--------xxxx.css |----x
使用django-suit为django 1.7 admin后台添加模板

django-grappelli里面使用inline似乎有点儿问题,换一个皮: django-suit是2scoops推荐的第二个admin skin. Supports: Django 1.4-1.7. Python: 2.6-3. 本文的环境是django 1.7.1 django-suit官网安装指导链接设置攻略翻译搬运如下: 安装复制代码代码如下: pip install django-suit # settings.py from django.conf.global_set
基于Django模板中的数字自增(详解)

Django框架的模板提供了{% for %} 标签来进行循环例如对集合进行循环是比较简单的 {% for row in v1 %} <div>{{row.name}}</div> {% endfor %} 但是在Django中,并不直接支持形如"int i = 0;i<100;i++" 这样的循环,Django有自己的自增方法假设v1内有2个元素 1,从1开始正向自增结果1,2 {% for row in v1 %} <div>{{fo
python+django加载静态网页模板解析

接着前面Django入门使用示例今天我们来看看Django是如何加载静态html的? 我们首先来看一看什么是静态HTML,什么是动态的HTML?二者有什么区别? 静态HTML指的是使用单纯的HTML或者结合CSS制作的包括图片.文字等的只供用户浏览但不包含任何脚本.不含有任何交互功能的网页! 动态的HTML指的是网页不仅提供给用户浏览,网页本身还有交互功能,存在着在脚本如JAVASCRIPT,并利用某种服务器端语言如PHP等实现如用户注册,用户登录,上传文件,下载文件等功能接下来,了解下加载
Django模板导入母版继承和自定义返回Html片段过程解析

1.ROOT_URLCONF = '总路由所在路径(比如untitled.urls)'<===默认情况是这样根路由的路径是可以修改的:ROOT_URLCONF = app01.urls<===根路由写在app01下面 2.静态文件引入的三种方式一: <link rel="stylesheet" href="/static/dd/ssmycss.css" rel="external nofollow" >
在Django框架中自定义模板过滤器的方法

自定义过滤器就是有一个或两个参数的Python函数: (输入)变量的值参数的值, 可以是默认值或者完全留空例如,在过滤器 {{ var|foo:"bar" }} 中 ,过滤器 foo 会被传入变量 var 和默认参数 bar. 过滤器函数应该总有返回值. 而且不能触发异常,它们都应该静静地失败. 如果出现错误,应该返回一个原始输入或者空字符串,这会更有意义. 这里是一些定义过滤器的例子: def cut(value, arg): "Removes all values o
django模板加载静态文件的方法步骤

加载静态文件在一个网页中,不仅仅只有一个 html 骨架,还需要 css 样式文件, js 执行文件以及一些图片等.因此在 DTL 中加载静态文件是一个必须要解决的问题.在 DTL 中,使用 static 标签来加载静态文件.要使用 static 标签,首先需要 {% load static %} .加载静态文件的步骤如下: 首先确保 django.contrib.staticfiles 已经添加到 settings.INSTALLED_APPS 中. 确保在 settings.py 中设置了
python Django模板的使用方法（图文）

模版基本介绍模板是一个文本,用于分离文档的表现形式和内容. 模板定义了占位符以及各种用于规范文档该如何显示的各部分基本逻辑(模板标签). 模板通常用于产生HTML,但是Django的模板也能产生任何基于文本格式的文档.来一个项目说明1.建立MyDjangoSite项目具体不多说,参考前面.2.在MyDjangoSite(包含四个文件的)文件夹目录下新建templates文件夹存放模版.3.在刚建立的模版下建模版文件user_info.html 复制代码代码如下: <html> <
Django框架模板语言实例小结【变量，标签，过滤器，继承，html转义】

本文实例讲述了Django框架模板语言.分享给大家供大家参考,具体如下: 模板语言模板语言简称为DTL(Django Template Language) 模板变量模板变量名由数字,字母,下划线和点组成,不能以下划线开头. 使用:{{模板变量名}} def index2(request): '''模板加载顺序''' return render(request, 'booktest/index2.html') # /temp_var def temp_var(request): '''模板变量
Django模板继承 extend标签实例代码详解

在 views.py 上修改 ... def ordered(req): return render(req, "ordered.html") def shopping_car(req): return render(req, "shopping_car.html") 在 urls.py 上修改 ... path('ordered/', views.ordered), path('shopping_car/', views.shopping_car), ... 在
Django框架下静态模板的继承操作示例

本文实例讲述了Django框架下静态模板的继承操作.分享给大家供大家参考,具体如下: 前言:第一篇博客,毕业校招在即,抽空把做过的项目都整理一下. 开发环境:python3.4,django1.8 初入python和django做项目,遇到很多前端页面代码冗余的情况,特别是头部和脚部,代码都是一样的.最开始是代码一直复制粘贴,后来发现Django自带的模板继承很好用.本人新手,仅发表个人经验,确实觉得很受用.欢迎大家指导. ①. 定义一个基础模板,该框架之后由子模板继承. 命名为base.htm

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

相关推荐

随机推荐