您的位置：首页 > 脚本大全 > > 正文

django模板自定义（详解Django项目中模板标签及模板的继承与引用网站中快速布置广告）

更多 时间：2021-10-27 10:47:40 类别：脚本大全 浏览量：2592

django模板自定义

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

django项目中模板标签及模板的继承与引用

常见模板标签

  • ?
  • 1
  • 2
  • 3
  • 4
  • 5
    		•
  • {% static %}
  • {% for x in range(x) %}{% endfor %}
  • 循环的序号{% forloop %}
  • 循环的序号反向排列,从1开始计算，从0开始计算在后面加上0{% forloop.revcounter0 %}
  • {% if condition1 %}sentence1{% else condition2 %}sentence2{% endif %}
    		•

    模板标签url反向解析

    视图函数

  • ?
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
    		•
  • 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反向解析应用模板

  • ?
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
    		•
  • <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>
    		•

    学生详情页：

  • ?
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
    		•
  • <!doctype html>
  • <html lang="en">
  • <head>
  •   <meta charset="utf-8">
  •   <title>title</title>
  • </head>
  • <body>
  •   学生详情页：
  •   {{ student }}
  • </body>
  • </html>
    		•

    模板的继承与引用

    为什么要有模板的继承与引用？

    学前端的时候写的页面比较复杂，每个页面都有相同的地方。

    模板的继承

    首先，新建一个父类页面。 挖好坑1和坑2。

  • ?
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
    		•
  • {% 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>
    		•

    其次，子类页面的继承。

  • ?
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
    		•
  • {% 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模板自定义（详解Django项目中模板标签及模板的继承与引用网站中快速布置广告）

    attention：

    • 一般情况一层继承就够了，多层继承不好，因为容易出错
    • 模板的继承要先在父类页面挖坑，子类页面可以填坑

    模板的引用

    首先，创建一个被引用的广告页面

  • ?
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
    		•
  • <!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>
    		•

    其次，在页面中引用被引用的页面。

    这里我们是在一个父类页面中引用的被引用页面

    关键代码是下面的引用语句

  • ?
  • 1
    		•
  • {% include 'teacher/ad.html' %}
    		•

    详细代码如下：

  • ?
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
    		•
  • {% 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 插件。你也可以根据需要只加载单个插件。 -
    标签：模板 标签 引用 继承 django
  • 上一篇：python编程ide工具（这6款Python IDE&amp;代码编辑器，你都用过吗？）
  • 下一篇：javascript编写的小游戏（CSS3 实现NES游戏机的示例代码）
    • 您可能感兴趣
    首页 编程学习 Web前端 数据库 软件设计
    开心学习 ©2013-2021 保留所有权利