继承

首先我们写一个母版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后套管理</title>
    <link rel="stylesheet" href="/static/plug/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/plug/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/css/index.css">
#这里相当于CSS的占位符
    {% block css %}
    {% endblock %}
</head>
<body>
<div class="title">
    <div class="logo left">后台管理</div>

    <div class="header_img right">
        <img src="/static/img/1.jpg">
        <div class="user_info">
            <a>个人信息</a>
            <a>注销</a>
        </div>
    </div>

    <div class="rment right">
        <a>邮件</a>
        <a>消息</a>
    </div>

</div>
<div class="pg_body">
    <div class="lmenu">
        <a href="/classes">班级管理</a>
        <a href="/student_list">学生管理</a>
        <a href="/teacher">老师管理</a>
    </div>
    <div class="content">
        #这里相当于内容的占位符
        {% block content %}
        {% endblock %}
    </div>
</div>
</body>
<script src="/static/js/jquery-3.2.1.js"></script>
<script src="/static/plug/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
#这里相当于js的占位符
{% block js %}
{% endblock %}
</html>

母版代码

然后我们到子板中引用

#引用前需要导入
{% extends 'index.html' %}
#写入CSS的内容
{% block css %}
    <link rel="stylesheet" href="/static/css/classes.css">
{% endblock %}
#写入content的内容
{% block content %}
<h1>班级列表</h1>
<button class="add_classes" data-toggle="modal" data-target="#myModal">添加</button>
<table border="1px" class="table table-hover">
    <thead>
        <tr>
            <th>ID</th>
            <th>班级名称</th>
            <th>操作</th>
        </tr>
    </thead>
    {% for item in classes_list %}
        <tr>
            <td>{{ item.id}}</td>
            <td>{{ item.class_name}}</td>
            <td><a class="updata" data-toggle="modal" data-target="#myModal">编辑</a>|<a class="del_class">删除</a></td>

        </tr>
    {% endfor %}
</table>
<div class="Occlusion modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="sub modal-content">
        <label id="name">班级</label>
        <input type="text" value="" name="name">
        <button id="submit">提交</button>
        <span id="student_id" style="display: none">-1</span>
        <label style="color: red;display: none" id="error">不允许有空值</label>
        <span style="color: red;display: none" id="error_mag"></span>
    </div>
</div>
{% endblock %}
#写入JS的内容
{% block js %}
<script src="/static/js/classes.js"></script>
{% endblock %}

子板代码

如果母版的block中原本有内容，而子板中也想应用就直接在子板的block中写入{{block.super}}

include

首先我们写一个要引用的内容,不需要写HTML其他标签,只需要写要引入的代码

<div style="background: beige;width: 100px;height: 100px">
    <span>这是一个小方块</span>
</div>

然后我们引用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
#引用方法
{% include 'logo.html' %}

</body>
</html>

Django-模板的继承（母版，include）

继承

include

猜你喜欢