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中条件选择和循环语句使用方法介绍
Mar 13 Python
Python实现抓取页面上链接的简单爬虫分享
Jan 21 Python
Python字符串中查找子串小技巧
Apr 10 Python
老生常谈python函数参数的区别(必看篇)
May 29 Python
Python系统监控模块psutil功能与经典用法分析
May 24 Python
基于Python开发chrome插件的方法分析
Jul 07 Python
python使用folium库绘制地图点击框
Sep 21 Python
Python面向对象基础入门之设置对象属性
Dec 11 Python
Python如何实现强制数据类型转换
Nov 22 Python
python绘制规则网络图形实例
Dec 09 Python
解决python 虚拟环境删除包无法加载的问题
Jul 13 Python
python简单验证码识别的实现过程
Jun 20 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安全配置方法
2007/06/16 PHP
PHP 年龄计算函数(精确到天)
2012/06/07 PHP
PHP命名空间定义与用法实例分析
2019/08/14 PHP
js loading加载效果实现代码
2009/11/24 Javascript
javascript 函数调用的对象和方法
2010/07/01 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
2013/10/11 Javascript
JavaScript弹出窗口方法汇总
2014/08/12 Javascript
基于jQuery实现表单提交验证
2014/11/24 Javascript
jQuery中:checkbox选择器用法实例
2015/01/03 Javascript
JavaScript中定义类的方式详解
2016/01/07 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
2016/04/26 Javascript
Bootstrap实现水平排列的表单
2016/07/04 Javascript
JS实现模糊查询带下拉匹配效果
2018/06/21 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
2019/03/14 Javascript
ElementUI中el-tree节点的操作的实现
2020/02/27 Javascript
windows下python模拟鼠标点击和键盘输示例
2014/02/28 Python
Python中__name__的使用实例
2015/04/14 Python
利用Python读取文件的四种不同方法比对
2017/05/18 Python
Sanic框架应用部署方法详解
2018/07/18 Python
python利用wx实现界面按钮和按钮监听和字体改变的方法
2019/07/17 Python
Python自动化操作实现图例绘制
2020/07/09 Python
django跳转页面传参的实现
2020/09/17 Python
关于PyCharm安装后修改路径名称使其可重新打开的问题
2020/10/20 Python
配置H5的滚动条样式的示例代码
2018/03/09 HTML / CSS
世界上第一个创建了罩杯系统的美国内衣品牌:Maidenform
2019/03/23 全球购物
罗马尼亚购物网站:Vivantis.ro
2019/07/20 全球购物
介绍下Java的输入输出流
2014/01/22 面试题
教师师德教育的自我评价
2013/10/31 职场文书
安全生产检讨书
2014/01/21 职场文书
车辆年检委托书范本
2014/10/14 职场文书
幼儿园园长安全责任书
2015/05/08 职场文书
2015年手术室工作总结
2015/05/11 职场文书
考研英语辞职信
2015/05/13 职场文书
导游词之徐州-云龙山
2019/09/29 职场文书
原生JS中应该禁止出现的写法
2021/05/05 Javascript
上个世纪50年代的可穿戴技术:无线电帽子
2022/02/18 无线电