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脚本生成sitemap.xml的实现方法
Jan 31 Python
python去掉 unicode 字符串前面的u方法
Oct 21 Python
新年快乐! python实现绚烂的烟花绽放效果
Jan 30 Python
python使用pip安装模块出现ReadTimeoutError: HTTPSConnectionPool的解决方法
Oct 04 Python
python pip安装包出现:Failed building wheel for xxx错误的解决
Dec 25 Python
Python语言异常处理测试过程解析
Jan 08 Python
基于Python获取照片的GPS位置信息
Jan 20 Python
Python sys模块常用方法解析
Feb 20 Python
如何在Python对Excel进行读取
Jun 04 Python
Python 私有属性和私有方法应用场景分析
Jun 19 Python
Python优秀开源项目Rich源码解析的流程分析
Jul 06 Python
python基础之文件处理知识总结
May 23 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 删除cookie和浏览器重定向
2009/03/16 PHP
浅析SVN常见问题及解决方法
2013/06/21 PHP
Laravel5中contracts详解
2015/03/02 PHP
thinkphp3.2嵌入百度编辑器ueditor的实例代码
2017/07/13 PHP
基于mootools插件实现遮罩层新手引导
2012/05/24 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
2013/10/17 Javascript
js单例模式详解实例
2013/11/21 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
2014/01/26 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
2014/09/02 Javascript
jQuery中queue()方法用法实例
2014/12/29 Javascript
jQueryMobile之Helloworld与页面切换的方法
2015/02/04 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
2015/06/19 Javascript
jQuery旋转插件jqueryrotate用法详解
2016/10/13 Javascript
jQuery插件扩展实例【添加回调函数】
2016/11/26 Javascript
微信小程序 自己制作小组件实例详解
2016/12/22 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
2017/04/28 Javascript
jQuery图片缩放插件smartZoom使用实例详解
2017/08/25 jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
2018/09/05 jQuery
JavaScript数组方法的错误使用例子
2018/09/13 Javascript
ES6 fetch函数与后台交互实现
2018/11/14 Javascript
详解关于微信setData回调函数中的坑
2019/02/18 Javascript
vue设置默认首页的操作
2020/08/12 Javascript
Vue多选列表组件深入详解
2021/03/02 Vue.js
python爬虫的数据库连接问题【推荐】
2018/06/25 Python
详解如何管理多个Python版本和虚拟环境
2019/05/10 Python
Python如何使用bokeh包和geojson数据绘制地图
2020/03/21 Python
python上selenium的弹框操作实现
2020/07/13 Python
荷兰网上买鞋:MooieSchoenen.nl
2017/09/12 全球购物
软件测试常见笔试题
2012/02/04 面试题
机电专业毕业生求职信
2013/10/27 职场文书
组织关系转移介绍信
2014/01/16 职场文书
市三好学生主要事迹
2014/01/28 职场文书
幼儿园教师获奖感言
2014/03/11 职场文书
学习雷锋倡议书
2014/04/15 职场文书
领导批评与自我批评范文
2014/10/16 职场文书
2016大学生毕业实习心得体会
2016/01/23 职场文书