zoukankan      html  css  js  c++  java
  • 模板三(继承标签)


    Django_模板之继承(extends)

    作用:使用模板继承可以减少Django模板配置中的代码冗余
    语法:
    为父文件内容加入盒子
    {% block content %}
    放要修改的内容
    {% endblock %}

    子文件内容
    {% extends "父模板文件名"} #继承父文件的内容,子文件除了盒子以外的其余内容和父文件的一样
    {% load static %} #引入其他模板的内容

    {% block 块名 %} #块名是自己起的
    修改的内容或增加的内容

    {% include "其他模板文件名" %}
    {% endblock %}

    说明:
    块越多越好
    如果在模板中使用{% extends 要继承的文件名 %},必须在第一行
    如果需要访问父模板中的块的内容,使用{{block.super}},然后就可以在上级代码的基础上添加内容,而不是全部重载。
    多个模板之间使用相同的代码,可以将其放置到父模板的某个{% block %}中
    不允许在同一个模板中定义多个同名的{% block %}

    实例:

    父模板内容(.html文件)

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <script src="jquery-3.1.1.js"></script>
    <title>Title</title>

    #盒子
    {% block styles %}

    {% endblock %}

    <style>
    * {
    margin: 0;
    padding: 0
    }
    .nav{
    line-height: 40px;
    100%;
    font-style:italic;">#2459a2;
    color: white;
    font-size: 20px;
    text-align: center;
    }

    .left{
    20%;
    min-height: 600px;
    overflow: auto;


    }

    .manage{
    text-align: center;
    padding: 20px 0;
    margin: 20px 0;
    font-size: 18px;

    }

    .left,.content{
    float: left;
    }
    .content{

    70%;
    min-height: 600px;
    }
    a{
    text-decoration: none;
    }
    h1,h2{
    text-align: center;
    }
    </style>
    </head>
    <body>
    <div class="outer">
    <div class="nav">标题</div>

    <div class="left">
    <div class="student manage"><a href="/student/">学生管理</a></div>
    </div>
    <div class="content">
    #盒子
    {% block content%}
    <h1>WELCOME TO LOGIN</h1>
    {% endblock %}
    </div>
    </div>
    </body>
    </html>

    子模板内容(.html文件)
    {% extends "base.html" %}
    {% load static %}

    {% block content %}
    {{ block.super }}
    {% for stu in student %}
    <h2>学生{{ stu }}</h2>
    {% endfor %}
    {% include "test.html" %}
    {% endblock %}

    其他模板内容(test.html)
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    </head>
    <body>
    <h1 style="color: cadetblue">这是其他模板的内容</h1>
    </body>
    </html>
  • 相关阅读:
    编写登陆认证程序
    模拟实现一个ATM + 购物商城程序
    三级菜单
    12 场景制造
    11 Unity Editor界面
    3.7练习题
    Coolite 弹窗妙用
    Nginx反向代理 实现Web负载均衡
    MySQL 架构
    Lnmmp
  • 原文地址:https://www.cnblogs.com/shadowfolk/p/15014847.html
Copyright © 2011-2022 走看看