---恢复内容开始---

母板

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
{% block page-css %} {% endblock %}
</head>
<body> <h1>这是母板的标题</h1> {% block page-main %} {% endblock %}
<h1>母板底部内容</h1>
{% block page-js %} {% endblock %}
</body>
</html>

注意:我们通常会在母板中定义页面专用的CSS块和JS块,方便子页面替换。

继承母板

在子页面中在页面最上方使用下面的语法来继承母板。

{% extends "base.html"%}

例子:

只换掉右侧内容

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>母板</title>
<style>
*{
padding: 0;
margin: 0;
}
.head{
height: 50px;
width: 100%;
background-color: deepskyblue;
}
.left{
height: 1000px;
width: 20%;
background-color: darkgrey;
float: left;
}
</style> </head>
<body>
<div class="head">这是导航条</div>
<div class="left">这是左侧菜单</div> {# 母板是变的:右侧内容#}
{% block page_content%}
{% endblock %} </body>
</html>

共有的页面

{% extends 'base.html' %}
{#首先继承母板#}
{# extends 一定要放在最上面#} {% block page_content %}
<table border="1px">
<thead>
<tr>
<th>#</th>
<th>name</th>
<th>age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>jassin</td>
<td>21</td>
</tr>
<tr>
<td>2</td>
<td>lishi</td>
<td>21</td>
</tr>
<tr>
<td>3</td>
<td>dandan</td>
<td>35</td>
</tr>
</tbody> </table> {% endblock %}

studen_list,学生表

{% extends "base.html"%}
{# 此处引用注意加引号#} {% block page_content %}
<ul type="none" style="padding: 100px">
<li>迷</li>
<li>失</li>
<li>归</li>
<li>途</li>
<li>的</li>
<li>方</li>
<li>向</li>
</ul>
{% endblock %}

不知道什么表

# views。py
def student_list(request):
return render(request, "student_list.html") def teacher_list(request):
return render(request,"teacher_list.html") # urls。py
url(r'^student_list/$',views.student_list),
url(r'^teacher_list/$',views.teacher_list),

配置

块(block)

通过在母板中使用{% block  xxx %}来定义"块"。

在子页面中通过定义母板中的block名来对应替换母板中相应的内容。

{% block page_content %}
<ul type="none">
<li>迷</li>
<li>失</li>
<li>归</li>
<li>途</li>
<li>的</li>
<li>方</li>
<li>向</li>
</ul>
{% endblock %}
        把所有页面共用的部分 提取出来 放到母版里面

        母版里面通过定义 block ,

        通常模板里面为子页面单独定义
{% block page_css %}{% endblock %} --> 子页面才用到的CSS文件
{% block page_js %}{% endblock %} --> 子页面采用到的JS文件 子页面
继承 {% extends "base.html" %} --》 一定要放在子页面的最上面 {% block page_content %}
我子页面才有的内容
{% endblock %}

组件

可以将常用的页面内容如导航条,页尾信息等组件保存在单独的文件中,然后在需要使用的地方按如下语法导入即可。(导入组件)

{% include 'navbar.html' %}

静态文件相关(实现动态)

在setting.py 中
STATIC_URL = '/static/' 的static是可以改变 # 所以我们也要把他实现为动态传. 首先需要先 {% load static %} 导入 然后使用 例如
<img src="/static/images/hi.jpg" alt="Hi!"> # 这个已经写死 <img src"{% static "images/hi.jpg" %}" alt="Hi!" /> 实现动态 此处static 已经将static 导入,与 STATIC_URL = '/static/' 的static别名无关

引用JS文件时使用:

{% load static %}
<script src="{% static "mytest.js" %}"></script>

某个文件多处被用到可以存为一个变量

{% load static %}
{% static "images/hi.jpg" as myphoto %}
<img src="{{ myphoto }}"></img>

使用get_static_prefix(起别名)

{% load static %}
<img src="{% get_static_prefix %}images/hi.jpg" alt="Hi!" />

或者

{% load static %}
{% get_static_prefix as STATIC_PREFIX %} <img src="{{ STATIC_PREFIX }}images/hi.jpg" alt="Hi!" />
<img src="{{ STATIC_PREFIX }}images/hi2.jpg" alt="Hello!" />

自定义simpletag(未讲)

和自定义filter类似,只不过接收更灵活的参数。

定义注册simple tag

@register.simple_tag(name="plus")
def plus(a, b, c):
return "{} + {} + {}".format(a, b, c)

使用自定义simple tag

{% load app01_demo %}

{# simple tag #}
{% plus "" "" "abc" %}

Django 之母板的更多相关文章

  1. Django 的母板及布局(Bootstrap)

    title: Django 的母板及布局(Bootstrap) tags: Django --- Django 的母板及布局(Bootstrap) Django 的母板是作为公共的部分,其他的页面都能 ...

  2. django的母板系统

    一.母板渲染语法 1.变量 {{ 变量 }} 2.逻辑 {% 逻辑语 %} 二.变量 在母板中有变量时,母板引擎会去反向解析找到这个传来的变量,然后替换掉. .(点),在母板中是深度查询据点符,它的查 ...

  3. django的母板和继承

    Django模板中只需要记两种特殊符号: {{  }}和 {% %} {{ }}表示变量,在模板渲染的时候替换成值,{% %}表示逻辑相关的操作. 母板 <!DOCTYPE html> & ...

  4. django表单及母板

    在之前的埔文中说到了对Model的操作以及对url的路由映射等内容,对应django的mtv框架则是完成了学习,Model与viewer的操作,那么本节主要来唠叨一下template,当Model,v ...

  5. python之django母板页面

    其实就是利用{% block xxx %}   {% endblock %}的方式定义一个块,相当于占位.存放在某个html中,比如base.html 然后在需要实现这些块的文件中,使用继承{% ex ...

  6. django之模板系统 --》内容(filter过滤器、tags标签【for、if、with】、母板以及继承、crf_token、注释、组件、静态文件【load static】、get_static_prefix、自定义标签和tag)

    常用: Django模板中只需要记两种特殊符号: {{ }}和 {% %} {{ }}表示变量,在模板渲染的时候替换成值,{% %}表示逻辑相关的操作. 变量 {{ 变量名 }} 变量名由字母数字和下 ...

  7. Django模板系统-母板和继承

    母板和继承 母版 html页面,提取多个页面的公共部分 定义多个block块,需要让子页面进行填充 <head> {% block page-css %} {% endblock %} & ...

  8. django template模板 母板 include导入

    一,使用{% block name %}{% endblock %}定义一个模板,在模板页面中它的内容为空,在各页面用{% block name %}自己的标签内容{% endblock %}调用. ...

  9. Django day07 (一) 模板的导入 母板的继承 静态文件配置

    一:模板的导入 -写一个模板 {% include '模板的名字' %} 二:母板的继承 -写一个母版(可以留多个盒子) {% block 名字 %} / {% endblock %} 三:静态文件配 ...

随机推荐

  1. PAT 天梯赛 L1-021. 重要的话说三遍 【水】

    题目链接 https://www.patest.cn/contests/gplt/L1-021 AC代码 #include <iostream> #include <cstdio&g ...

  2. java调用ffmpeg命令行推流遇到的问题

    1.Java调用命令行,如果没有额外环境变量,不指定工作路径,Runtime有两个方法 public Process exec(String command) public Process exec( ...

  3. linux命令详解之(at)--6/24

    在Linux下,有两个命令可以用来作为计划任务而执行,at:一次性定时任务计划执行crontab :每天定时任务计划执行 以下仅说一下一次性任务计划执行(at)要使用一次性任务计划,linux必须要有 ...

  4. 20145219 《Java程序设计》第16周课程总结

    20145219 <Java程序设计>第16周课程总结 每周读书笔记(即学习总结)链接汇总 第0周问卷调查 第1周读书笔记 第2周读书笔记 第3周读书笔记 第4周读书笔记 第5周读书笔记 ...

  5. SpringBoot 事务隔离性和传播性

    propergation 传播性 Spring中七种Propagation类的事务属性详解:  REQUIRED:支持当前事务,如果当前没有事务,就新建一个事务.这是最常见的选择.  SUPPORTS ...

  6. 深入理解JVM 垃圾收集器(上)

    HotSpot虚拟机中的垃圾收集器 GC评价标准 GC调优 响应时间 吞吐量 1.新生代收集器 Serial收集器 ParNew收集器 Parallel Scavenge收集器 2.老年代收集器 Se ...

  7. JavaEE之注解

    1注解:Annotation注解,是一种代码级别的说明.它是JDK1.5及以后版本引入的一个特性,与类.接口.枚举是在同一个层次,给计算机,JVM提供解读信息的. 2注解的作用:编译检查:代码分析,编 ...

  8. Docker入门使用

    先来一波docker的指令:      docker inspect 容器id  查询容器信息      docker stop  容器id  停止容器id      docker rm  容器id ...

  9. 转: 在hibernate中查询使用list,map定制返回类型

    在使用hibernate进行查询时,使用得最多的还是通过构建hql进行查询了.在查询的过程当中,除使用经常的查询对象方法之外,还会遇到查询一个属性,或一组聚集结果的情况.在这种情况下,我们通常就需要对 ...

  10. Bootstrap——优秀的开源前端框架

    Bootstrap是著名的社交网站.微博的先驱Twitter在2011年8月推出的开源WEB前端框架,集合CSS和HTML,使用了最新的浏览器技术,为快速WEB开发提供了一套前端工具包,包括布局.网格 ...