html_继承速查
2018-02-09 本文已影响13人
两点半的杂货铺
一、模板的继承操作步骤
-
注：模板只能继承一个
-
获取父类中被block 包裹的父类
{% block concent %}
{%block.super%}
{% endblock %}
-
在templates 下创建一个父类的html
-
父类中不想被继承的部分用block
#concent 是命名，这里不做限制的
{% block concent %}{% endblock %}
-
在子类继承模板最上方加入
#要继承的模板master.html父类模板的名字
{% extends 'master.html' %}
-
子类中替换对应位置
{% block concent %}
{% endblock %}
-
案例：
这里父类叫做master.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/coommons.css">
<style>
.pg-header{
height: 48px;
background-color: salmon;
color: greenyellow;
}
</style>
</head>
<body>
<div class="pg-header">
#为子类做的占位符
{% block title %}{% endblock %}
</div>
#为子类做的占位符
<h1>{% block name %}{% endblock %}</h1>
#为子类做的占位符
{% block concent %}{% endblock %}
<script src="/static/jquery.js"></script>
</body>
子类
#继承父类引入
{% extends 'master.html' %}
#替代父类中的位置
{% block title %}管理系统{% endblock %}
{% block name %}用户管理{% endblock %}
{% block concent %}
<ul>
{% for i in u %}
<li>{{ i }}</li>
{% endfor %}
</ul>
{% endblock %}
二、模块功能的继承操作
-
创建一个功能模板在templates中
-
父类中想被继替换的部分用 block
{% block test %}
你好<input type="text" >
{% endblock %}
-
子类中替换父类的地方用include
#tag.html理解为定制展示，可以见页面单独的功能进项定制展示，重复使用
{%include 'tag.html' %}
三、继承的技巧针对js 和css
一般页面的js都会放在底部，css放在顶部我们可以在父类的模板中预留位置。
image.png
