码迷,mamicode.com
首页 > 其他好文 > 详细

Django-模板的继承(母版,include)

时间:2018-06-30 14:54:46      阅读:162      评论:0      收藏:0      [点我收藏+]

标签:引入   isp   rip   xtend   django   ror   nbsp   学生   each   

继承

  1. 首先我们写一个母版
    技术分享图片
    <!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>
    母版代码

     

  2. 然后我们到子板中引用
    技术分享图片
    #引用前需要导入
    {% 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

  1. 首先我们写一个要引用的内容,不需要写HTML其他标签,只需要写要引入的代码
    <div style="background: beige;width: 100px;height: 100px">
        <span>这是一个小方块</span>
    </div>

     

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

     

Django-模板的继承(母版,include)

标签:引入   isp   rip   xtend   django   ror   nbsp   学生   each   

原文地址:https://www.cnblogs.com/wtil/p/9246638.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!