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通过colorama模块在控制台输出彩色文字的方法
Mar 19 Python
Python中类的定义、继承及使用对象实例详解
Apr 30 Python
从局部变量和全局变量开始全面解析Python中变量的作用域
Jun 16 Python
详细介绍Python的鸭子类型
Sep 12 Python
Python 登录网站详解及实例
Apr 11 Python
Pytorch入门之mnist分类实例
Apr 14 Python
python实现随机调用一个浏览器打开网页
Apr 21 Python
详谈python3 numpy-loadtxt的编码问题
Apr 29 Python
解决pycharm每次新建项目都要重新安装一些第三方库的问题
Jan 17 Python
通过字符串导入 Python 模块的方法详解
Oct 27 Python
Python将二维列表list的数据输出(TXT,Excel)
Apr 23 Python
Python实现信息管理系统
Jun 05 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中::、-&amp;gt;、self、$this几种操作符的区别介绍
2013/04/24 PHP
基于php权限分配的实现代码
2013/04/28 PHP
深入PHP FTP类的详解
2013/06/13 PHP
php递归法读取目录及文件的方法
2015/01/30 PHP
php简单实现无限分类树形列表的方法
2015/03/27 PHP
使用URL传输SESSION信息
2015/07/14 PHP
PHP实现搜索相似图片
2015/09/22 PHP
百万级别知乎用户数据抓取与分析之PHP开发
2015/09/28 PHP
thinkPHP删除前弹出确认框的简单实现方法
2016/05/16 PHP
php正则表达式基本知识与应用详解【经典教程】
2017/04/17 PHP
javascript 类型判断代码分析
2010/03/28 Javascript
UI Events 用户界面事件
2012/06/27 Javascript
javaScript复制功能调用实现方案
2012/12/13 Javascript
Js 冒泡事件阻止实现代码
2013/01/27 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
2013/08/25 Javascript
Javascript HTML5 Canvas实现的一个画板
2020/04/12 Javascript
Nodejs抓取html页面内容(推荐)
2016/08/11 NodeJs
详解Vue2中组件间通信的解决全方案
2017/07/28 Javascript
form表单序列化详解(推荐)
2017/08/15 Javascript
vue-resource拦截器设置头信息的实例
2017/10/27 Javascript
浅谈vue权限管理实现及流程
2020/04/23 Javascript
解决Python下json.loads()中文字符出错的问题
2018/12/19 Python
PyCharm+Qt Designer+PyUIC安装配置教程详解
2019/06/13 Python
Django Docker容器化部署之Django-Docker本地部署
2019/10/09 Python
Django基于Models定制Admin后台实现过程解析
2020/11/11 Python
python全栈开发语法总结
2020/11/22 Python
用CSS禁用输入法(CSS3 UI规范)实例解析
2012/12/04 HTML / CSS
请解释流与文件有什么不同
2016/07/29 面试题
介绍一下SOA和SOA的基本特征
2016/02/24 面试题
北京捷通华声语音技术有限公司Java软件工程师笔试题
2012/04/10 面试题
十佳教师事迹材料
2014/01/11 职场文书
社区关爱留守儿童活动方案
2014/08/22 职场文书
初中生毕业评语
2014/12/29 职场文书
后勤个人工作总结
2015/02/28 职场文书
励志正能量20句:送给所有为梦想拼搏的人
2019/11/11 职场文书
Netty分布式客户端处理接入事件handle源码解析
2022/03/25 Java/Android