一，模板之继承

1.在template下面新建一个master.html的文件，当做母版。

2. 母版里需要被替代的部分，以block开始，以endblock结尾



{% block content %}{% endblock %}




3. 子版里代码


{% block content %}子版里的代码{% endblock %}


4. 一个HTML中可以有多个block，可能来源不同，所以需要声明一下我继承的是哪个模板里面的block


{% extends 'master.html' %}


5.对于只有自己要用的模板，应该放到自己的HTML页面里面。


6.为了防止自己写的CSS被放到模板中的JS后面执行/为了防止自己写的JS被放到模板中的jquery后面执行。


所以在模板中写完style后，必须再写一个{% block css %}{% endblock %};模板中写完script后，必须再写一个{% block js %}{% endblock %};


在HTML中应用CSS,JS时的格式




{% block css %}

    <style>

        .content{

            background-color:blue;

            size:30px;

        }

    </style>

{% endblock %}





JS




{% block js %}

    <script>

        XXXXXX

    </script>

{% endblock %}





实例


master.html




<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>{% block title %}{% endblock %}</title>

    <link rel="stylesheet" href="/static/commons.css"/>

    <style>

        body{margin:0;}

        .pg-header{

            height:48px;

            background-color:pink;

            color:green;

        }

    </style>

    {% block css %}{% endblock %}

</head>

<body>

    <div class="pg-header">

        <h1>教务管理系统</h1>

    </div>

    {% block content %}{% endblock %}

    <script src="/static/jquery-1.12.4.js"></script>

    {% block js %}{% endblock %}

</body>

</html>





tpl_1.html




{% extends 'master.html' %}

{% block title %}用户管理{% endblock %}

{% block css %}

    <style>

        .content{

            background-color:blue;

            size:30px;

        }

    </style>

{% endblock %}

{% block content %}

    <h3 class="content">用户管理</h3>

    <ul>

        {% for i in u %}

            <li>{{i}}</li>

        {% endfor %}

    </ul>

{% endblock %}





tpl_2.html




{% extends 'master.html'%}

{% block title%}修改密码{% endblock %}

{% block content %}

    <h3>修改密码</h3>

{% endblock %}





效果：




二，模板之导入

1. 1个HTML只能继承1个模板，如果想继承多个的话，需要使用include引入一下，include里面
的模板语言也是可以被渲染的。include引入的模板不需要提前声明。

写1个tag.html页面


2.在tpl_1里面应用它




{% extends 'master.html' %}

{% block title %}用户管理{% endblock %}

{% block css %}

    <style>

        .content{

            background-color:blue;

            size:30px;

        }

    </style>

{% endblock %}

{% block content %}

    <h3 class="content">用户管理</h3>

    <ul>

        {% for i in u %}

            <li>{{i}}</li>

        {% endfor %}

    </ul>

    {% include "tag.html" %}

    {% include "tag.html" %}

{% endblock %}







3.看效果：





4.如果tag.html中有模板语言的话，也是可以被渲染的。{{name}}。整个页面的加载过程如下：

A-urls.py中，打开tpl_1.html文件；如果里面有extend，它会把模板也拿过来；如果里面有include，也会拿过来。

B-根据上面的先自己生产一个字符串，这个字符串里面有各种各样的模板语言标签，先有了这个1个标签，然后再进行渲染，

 所以include里面的模板语言也是可以被渲染的。

C-只能继承1个模板，却可以写多个include。

 
												


											
Day21-模板之继承的更多相关文章
	

    
						
  1. $Django 模板层(模板导入,继承)、 单表*详(增删改查,基于双下划线的查询)、static之静态文件配置
		
    0在python脚本中使用django环境 import osif __name__ == '__main__':    os.environ.setdefault("DJANGO_SETT ...
    
		
    2. 
						
  2. python的Web框架，Django模板标签及模板的继承
		
    模板标签 在传递数据的时候,会有大量的数据展示在浏览器上,而数据会是动态变化的,在html的编写中,数据也是需要动态的,而不能是写死的,如果动态展示呢. 给定的例子数据 views传递数据给html  ...
    
		
    3. 
						
  3. Django项目中模板标签及模板的继承与引用【网站中快速布置广告】
		
    Django项目中模板标签及模板的继承与引用 常见模板标签 {% static %} {% for x in range(x) %}{% endfor %} 循环的序号{% forloop %} 循环 ...
    
		
    4. 
						
  4. Web框架之Django_04 模板层了解（过滤器、标签、自定义过滤器、标签、inclusion_tag、模板的继承与导入）
		
    摘要: 模版层(模板语法) 模板语法 过滤器 标签 自定义过滤器.标签 inclusion_tag 模板的继承 模板的导入 一.模板语法: 常用语法:{{     }}    变量相关{% %}    ...
    
		
    5. 
						
  5. Django——4 模板标签  模板的继承与引用
		
    Django 模板标签 常用标签 模板的继承与引用 模板标签 标签在渲染的过程中提供任意的逻辑 标签语法: 由%}和 {% 来定义的,例如:{%tag%} {%endtag%} 这个定义是刻意模糊的. ...
    
		
    6. 
						
  6. Django 你需要掌握的模型层（标签、过滤器、模板的继承与导入）
		
    Django 模型层(标签.过滤器.模板的继承与导入) 好文章来自超哥:https://www.cnblogs.com/guanchao/p/11006062.html   过滤器/自定义过滤器 模板 ...
    
		
    7. 
						
  7. web框架--tornado框架之模板引擎继承
		
    使用模板的继承可以重复使用相同结构的模板, 可以大大减少代码量 入门实例 一.demo目录结构 注解: master.html为模板内容,被index.html,account.html引用 二.各文 ...
    
		
    8. 
						
  8. Django框架之第五篇（模板层） --变量、过滤器、标签、自定义标签、过滤器，模板的继承、模板的注入、静态文件
		
    模板层 模板层就是html页面,Django系统中的(template) 一.视图层给模板传值的两种方法 方式一:通过键值对的形式传参,指名道姓的传参 n = 'xxx'f = 'yyy'return ...
    
		
    9. 
						
  9. Django模板的继承与模板的导入
		
    目录 一:模版的继承 1.什么是模板继承? 2.使用继承流程原理 3.模板继承语法 二:模板的继承使用 1.案例需求 2.总结模板继承 三:模版的导入 1.模板导入 2.模板导入格式 3.模板导入使用 ...
    
		
    10. 
						
  10. Django学习——Django settings 源码、模板语法之传值、模板语法之获取值、模板语法之过滤器、模板语法之标签、自定义过滤器、标签、inclusion_tag、模板的导入、模板的继承
		
    Django settings 源码 """ 1.django其实有两个配置文件 一个是暴露给用户可以自定义的配置文件 项目根目录下的settings.py 一个是项目默 ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. OpenStack入门篇（一）之云计算的概念
			
    1.云计算 云计算是一种按使用量付费的模式,这种模式提供可用的.便捷的.按需的网络访问, 进入可配置的计算资源共享池(资源包括网络,服务器,存储,应用软件,服务),这些资源能够被快速提供,只需投入很少 ...
    
			
    2. 
						
  2. vue 3.0使用 BUG解决
			
    最近在做vue的项目,吊进了很多坑,这些坑很浅,但一旦掉进去了,不花点功夫还爬不出来.所以总结下,当做下笔记,持续更新 1.<router-link> 里加的事件没反应 错误代码: < ...
    
			
    3. 
						
  3. xgboost算法教程(两种使用方法)
			
    标签: xgboost 作者:炼己者 ------ 欢迎大家访问我的简书以及我的博客 本博客所有内容以学习.研究和分享为主,如需转载,请联系本人,标明作者和出处,并且是非商业用途,谢谢! ------ ...
    
			
    4. 
						
  4. 利用 Python 分析微信好友性别和位置
			
    今天用到一个非常有意思的库——itchat,它已经完成了 wechat 的个人账号API接口,使爬取个人微信信息更加方便.  下载 爬取微信好友信息 这样就将你所有微信好友的信息都返回了,我们并不需要 ...
    
			
    5. 
						
  5. hdu2187悼念512汶川大地震遇难同胞——老人是真饿了(贪心 简单题)
			
    传送门 简单题 #include<bits/stdc++.h> using namespace std; struct node { double dan,weight; }a[]; bo ...
    
			
    6. 
						
  6. mfs分布式系统从理论简介到实战部署
			
    文章前面想说的话:这篇博客写出来真是有点累到了,本来昨天就基本就写好了,放在草稿里面,今天打开就没有了!!唉,就尼玛离我而去了,只有重写,然后中间虚拟机还“爆炸”重启又搞了一会,不容易呀!!希望各位博 ...
    
			
    7. 
						
  7. tomcat配置https | 自签发证书配置
			
    未配置证书的访问:
    
			
    8. 
						
  8. mac安装pkg 一直“正在验证” 卡着
			
    今天换了新mac, 但是之前wireshark(抓包工具) 不能用了 ,要安装Xquartz. 下载之后一直卡着, 网上找了半天没有解决方法. 最后我重启一下就好了... 重启一下. 2. 15款ma ...
    
			
    9. 
						
  9. kubeadm构建k8s之Prometheus-operated监控(0.18.1)
			
    介绍: 大家好,k8s的搭建有许多方式,也有许多快速部署的,为了简化部署的复杂度,官方也提供了开源的kubeadm快速部署,最新1.10.x版本已经可以实现部署集群, 如果你对k8s的原理已经非常了解 ...
    
			
    10. 
						
  10. Amazon及其亏本诱饵策略还能坚持多久？
			
    Amazon 刚刚公布了最新的财报,亏损 4100 万美元.这是这家电子商务巨头连续 5 个季度以来的第 3 次亏损.但是华尔街似乎却一片叫好声,当日 Amazon 的股价也涨了近 8 个点达 359 ...
    
			
    11.