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中的正则表达式的用法
Apr 09 Python
Python中用Decorator来简化元编程的教程
Apr 13 Python
Python实现将绝对URL替换成相对URL的方法
Jun 28 Python
python socket多线程通讯实例分析(聊天室)
Apr 06 Python
python3.0 模拟用户登录,三次错误锁定的实例
Nov 02 Python
python取数作为临时极大值(极小值)的方法
Oct 15 Python
Laravel+Dingo/Api 自定义响应的实现
Feb 17 Python
python+mysql实现个人论文管理系统
Oct 25 Python
Django表单提交后实现获取相同name的不同value值
May 14 Python
Keras 中Leaky ReLU等高级激活函数的用法
Jul 05 Python
如何在 Matplotlib 中更改绘图背景的实现
Nov 26 Python
编译 pycaffe时报错:fatal error: numpy/arrayobject.h没有那个文件或目录
Nov 29 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
德生9700DX电路分析
2021/03/02 无线电
用PHP调用数据库的存贮过程!
2006/10/09 PHP
php下尝试使用GraphicsMagick的缩略图功能
2011/01/01 PHP
jquery 子窗口操作父窗口的代码
2009/09/21 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
2015/09/15 Javascript
以Python代码实例展示kNN算法的实际运用
2015/10/26 Javascript
使用CoffeeScrip优美方式编写javascript代码
2015/10/28 Javascript
JavaScript制作简单的框选图表
2017/05/15 Javascript
Vue2.0 多 Tab切换组件的封装实例
2017/07/28 Javascript
在HTML文档中嵌入JavaScript的四种方法
2018/05/07 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
2019/04/15 Javascript
详解vue 图片上传功能
2019/04/30 Javascript
Vue + Element UI图片上传控件使用详解
2019/08/20 Javascript
layer.prompt输入层的例子
2019/09/24 Javascript
vue项目中极验验证的使用代码示例
2019/12/03 Javascript
element-ui 弹窗组件封装的步骤
2021/01/22 Javascript
centos 安装python3.6环境并配置虚拟环境的详细教程
2018/02/22 Python
Python基于最小二乘法实现曲线拟合示例
2018/06/14 Python
在Mac下使用python实现简单的目录树展示方法
2018/11/01 Python
Python实现求两个数组交集的方法示例
2019/02/23 Python
python实现字符串加密成纯数字
2019/03/19 Python
Python qqbot 实现qq机器人的示例代码
2019/07/11 Python
Python实现蒙特卡洛算法小实验过程详解
2019/07/12 Python
对Django项目中的ORM映射与模糊查询的使用详解
2019/07/18 Python
Django 对象关系映射(ORM)源码详解
2019/08/06 Python
如何安装2019Pycharm最新版本(详细教程)
2019/09/26 Python
Python3标准库之threading进程中管理并发操作方法
2020/03/30 Python
Keras Convolution1D与Convolution2D区别说明
2020/05/22 Python
海信商城:海信电视、科龙空调、容声冰箱官方专卖
2017/02/07 全球购物
阿拉伯书店:Jamalon
2019/07/24 全球购物
商场总经理岗位职责
2014/02/03 职场文书
学生操行评语大全
2014/04/24 职场文书
中国梦演讲稿3分钟
2014/08/19 职场文书
2015年学校财务工作总结
2015/05/19 职场文书
大学生见习总结报告
2015/06/24 职场文书
2016年11月份红领巾广播稿
2015/12/21 职场文书