python之django母板页面的使用


Posted in Python onJuly 03, 2018

其实就是利用{% block xxx %}   {% endblock %}的方式定义一个块,相当于占位。存放在某个html中,比如base.html

然后在需要实现这些块的文件中,使用继承{% extends "base.html" %}的方式引入母板文件,然后在{% block xxx %}......{% endblock %}块定义中实现具体的内容。

base.html示例:注意块的定义。

<!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标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" href="http://v3.bootcss.com/favicon.ico" rel="external nofollow" >
  <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="external nofollow" >
  <title>所有的书都在这里</title>
  {% block page_css %}
  {% endblock %}
  {% block page_js %}
  {% endblock %}

  <!-- Bootstrap core CSS -->
  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">

  <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
  <link href="http://v3.bootcss.com/assets/css/ie10-viewport-bug-workaround.css" rel="external nofollow" rel="stylesheet">

  <!-- Custom styles for this template -->
  <link href="http://v3.bootcss.com/examples/dashboard/dashboard.css" rel="external nofollow" rel="stylesheet">

  <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
  <!--[if lt IE 9]><script src="http://v3.bootcss.com/assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
  <script src="http://v3.bootcss.com/assets/js/ie-emulation-modes-warning.js"></script>

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
   <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
   <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>

<body>

{% include "nav.html" %}

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-2 sidebar">
      <ul class="nav nav-sidebar">
        <li class="{% block book_class %}{% endblock %}"><a href="/book_list/" rel="external nofollow" >所有的书 <span class="sr-only">(current)</span></a>
        </li>
        <li class="{% block publisher_class %}{% endblock %}"><a href="/publisher_list/" rel="external nofollow" >出版社</a></li>
        <li class="{% block author_class %}{% endblock %}"><a href="/author_list/" rel="external nofollow" >作者</a></li>

      </ul>
    </div>
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">      
      {% block main_body %}
        {#这里是每个页面不同的部分#}
      {% endblock %}
    </div>
  </div>
</div>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="http://v3.bootcss.com/assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="http://v3.bootcss.com/assets/js/vendor/holder.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="http://v3.bootcss.com/assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>

某个继承页:

{# 继承母板 #}
{% extends 'base.html' %}

{% block book_class %}
  active
{% endblock %}
{% block page_css %}
  {% load static %}
  <link rel="stylesheet" href="{% get_static_prefix %}book_list_only.css" rel="external nofollow" >
{% endblock %}

{#把自己页面的内容,填入母板里面相应的位置#}
{% block main_body %}
  <div class="panel panel-primary">
        <div class="panel-heading">
          <h3 class="panel-title">我是自定义内容,用来替换母板中指定的位置</h3>
        </div>
        <div class="panel-body">
          <div class="row">
            <div class="col-md-8"> </div>
            <div class="col-md-4"><a href="/add_book/" rel="external nofollow" rel="external nofollow" class="btn btn-primary"><i class="fa fa-plus-square"></i> 添加新书</a>
              <a href="/add_publisher/" rel="external nofollow" rel="external nofollow" class="btn btn-success"><i class="fa fa-plus-square"></i> 添加出版社</a></div>
          </div>


          <table class="table table-dark table-hover">
            <thead>
            <tr>
              <th>#</th>
              <th>id</th>
              <th>名称</th>
              <th>出版社</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {% for b in books %}
              <tr>
                <td>{{ forloop.counter }}</td>
                <td>{{ b.id }}</td>
                <td>{{ b.title }}</td>
                <td>{{ b.publisher.name }}</td>
                <td>
                  <a href="/del_book/?id={{ b.id }}" rel="external nofollow" class="btn btn-danger"><i class="fa fa-trash fa-fw"></i>删除</a>
                  <a href="/edit_book/?id={{ b.id }}" rel="external nofollow" class="btn btn-info"><i class="fa fa-pencil fa-fw"></i>编辑</a>
                </td>
              </tr>
            {% endfor %}
            </tbody>
          </table>

        </div>
      </div>
{% endblock %}

另一个继承页:

{% extends "base.html" %}
{% block main_body %}
      <div class="panel panel-primary">
        <div class="panel-heading">
          <h3 class="panel-title">所有的出版社</h3>
        </div>
        <div class="panel-body">
          <div class="row">
            <div class="col-md-8"> </div>
            <div class="col-md-4"><a href="/add_book/" rel="external nofollow" rel="external nofollow" class="btn btn-primary"><i class="fa fa-plus-circle fa-fw"></i>添加新书</a>
              <a href="/add_publisher/" rel="external nofollow" rel="external nofollow" class="btn btn-success"><i class="fa fa-plus-circle fa-fw"></i>添加出版社</a></div>
          </div>


          <table class="table table-dark table-hover">
            <thead>
            <tr>
              <th>#</th>
              <th>id</th>
              <th>名称</th>
              <th>地址</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {% for p in publisher %}
              <tr>
                <td>{{ forloop.counter }}</td>
                <td>{{ p.id }}</td>
                <td>{{ p.name }}</td>
                <td>{{ p.addr }}</td>
                <td>
                  <a href="/del_publisher/?id={{ p.id }}" rel="external nofollow" class="btn btn-danger"><i class="fa fa-remove fa-fw"></i>删除</a>
                  <a href="/edit_publisher/?id={{ p.id }}" rel="external nofollow" class="btn btn-info"><i class="fa fa-edit fa-fw"></i>编辑</a>
                </td>
              </tr>
            {% endfor %}
            </tbody>
          </table>

        </div>
      </div>
 {% endblock %}
{% block publisher_class %}
  active
{% endblock %}

完整的练习项目代码:day63_base_3water.rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Python 相关文章推荐
Python的math模块中的常用数学函数整理
Feb 04 Python
python中单下划线_的常见用法总结
Jul 10 Python
对python自动生成接口测试的示例讲解
Nov 30 Python
对python实现合并两个排序链表的方法详解
Jan 23 Python
学习python可以干什么
Feb 26 Python
查看Python依赖包及其版本号信息的方法
Aug 13 Python
python多进程并行代码实例
Sep 30 Python
python对象销毁实例(垃圾回收)
Jan 16 Python
python实现画图工具
Aug 27 Python
jupyter notebook 写代码自动补全的实现
Nov 02 Python
实例讲解Python中sys.argv[]的用法
Jun 03 Python
Python Pandas pandas.read_sql函数实例用法
Jun 21 Python
Python中存取文件的4种不同操作
Jul 02 #Python
python二维列表一维列表的互相转换实例
Jul 02 #Python
numpy.linspace 生成等差数组的方法
Jul 02 #Python
Python图片转换成矩阵,矩阵数据转换成图片的实例
Jul 02 #Python
如何用Python合并lmdb文件
Jul 02 #Python
使用numpy和PIL进行简单的图像处理方法
Jul 02 #Python
python numpy 显示图像阵列的实例
Jul 02 #Python
You might like
PHP Class&amp;Object -- 解析PHP实现二叉树
2013/06/25 PHP
PHP不用递归实现无限分级的例子分享
2014/04/18 PHP
php文件下载处理方法分析
2015/04/22 PHP
PHP连接MySQL进行增、删、改、查操作
2017/02/19 PHP
php中类和对象:静态属性、静态方法
2017/04/09 PHP
JS添加删除一组文本框并对输入信息加以验证判断其正确性
2013/04/11 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
2013/10/29 Javascript
JavaScript中的关联数组问题
2015/03/04 Javascript
详解JavaScript ES6中的Generator
2015/07/28 Javascript
JQuery 传送中文乱码问题的简单解决办法
2016/05/24 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
2017/07/11 Javascript
vue2.0+vue-dplayer实现hls播放的示例
2018/03/02 Javascript
动态加载、移除js/css文件的示例代码
2018/03/20 Javascript
js实现数字从零慢慢增加到指定数字示例
2019/11/07 Javascript
vue中keep-alive、activated的探讨和使用详解
2020/07/26 Javascript
Vue项目中使用mock.js的完整步骤
2021/01/12 Vue.js
Python中os和shutil模块实用方法集锦
2014/05/13 Python
Python实现的一个找零钱的小程序代码分享
2014/08/25 Python
Python对列表排序的方法实例分析
2015/05/16 Python
django通过ajax发起请求返回JSON格式数据的方法
2015/06/04 Python
python去掉行尾的换行符方法
2017/01/04 Python
对python PLT中的image和skimage处理图片方法详解
2019/01/10 Python
Python远程开发环境部署与调试过程图解
2019/12/09 Python
django序列化serializers过程解析
2019/12/14 Python
python通过对字典的排序,对json字段进行排序的实例
2020/02/27 Python
Python中and和or如何使用
2020/05/28 Python
tensorflow/core/platform/cpu_feature_guard.cc:140] Your CPU supports instructions that this T
2020/06/22 Python
香港时装购物网站:ZALORA香港
2017/04/23 全球购物
Mio Skincare英国官网:身体紧致及孕期身体护理
2018/08/19 全球购物
华为消费者德国官方网站:HUAWEI德国
2020/11/03 全球购物
写一个方法,输入一个文件名和一个字符串,统计这个字符串在这个文件中出现的次数
2016/04/13 面试题
计算机通信工程专业毕业生推荐信
2013/12/24 职场文书
学习教师法的心得体会
2014/09/03 职场文书
打架检讨书
2015/01/27 职场文书
《分数的意义》教学反思
2016/02/20 职场文书
CSS3点击按钮圆形进度打钩效果的实现代码
2021/03/30 HTML / CSS