继承
- 首先我们写一个母版
母版代码<!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; 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>