• Day21-模板之继承


    一,模板之继承

    1.在template下面新建一个master.html的文件,当做母版。

    2. 母版里需要被替代的部分,以block开始,以endblock结尾

    
    
    {% block content %}{% endblock %}
    
    
    

    3. 子版里代码

    {% block content %}子版里的代码{% endblock %}

    4. 一个HTML中可以有多个block,可能来源不同,所以需要声明一下我继承的是哪个模板里面的block

    {% extends 'master.html' %}

    5.对于只有自己要用的模板,应该放到自己的HTML页面里面。

    6.为了防止自己写的CSS被放到模板中的JS后面执行/为了防止自己写的JS被放到模板中的jquery后面执行。

    所以在模板中写完style后,必须再写一个{% block css %}{% endblock %};模板中写完script后,必须再写一个{% block js %}{% endblock %};

    在HTML中应用CSS,JS时的格式

    {% block css %}
        <style>
            .content{
                background-color:blue;
                size:30px;
            }
        </style>
    {% endblock %}
    

     JS

    {% block js %}
        <script>
            XXXXXX
        </script>
    {% endblock %}    
    

     实例

    master.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}{% endblock %}</title>
        <link rel="stylesheet" href="/static/commons.css"/>
        <style>
            body{margin:0;}
            .pg-header{
                height:48px;
                background-color:pink;
                color:green;
            }
        </style>
        {% block css %}{% endblock %}
    </head>
    <body>
        <div class="pg-header">
            <h1>教务管理系统</h1>
        </div>
        {% block content %}{% endblock %}
        <script src="/static/jquery-1.12.4.js"></script>
        {% block js %}{% endblock %}
    </body>
    </html>
    

     tpl_1.html

    {% extends 'master.html' %}
    {% block title %}用户管理{% endblock %}
    {% block css %}
        <style>
            .content{
                background-color:blue;
                size:30px;
            }
        </style>
    {% endblock %}
    
    {% block content %}
        <h3 class="content">用户管理</h3>
        <ul>
            {% for i in u %}
                <li>{{i}}</li>
            {% endfor %}
        </ul>
    {% endblock %}
    

      tpl_2.html

    {% extends 'master.html'%}
    {% block title%}修改密码{% endblock %}
    
    {% block content %}
        <h3>修改密码</h3>
    {% endblock %}
    

     效果:

    二,模板之导入

    1. 1个HTML只能继承1个模板,如果想继承多个的话,需要使用include引入一下,include里面
    的模板语言也是可以被渲染的。include引入的模板不需要提前声明。

    写1个tag.html页面


    2.在tpl_1里面应用它
    {% extends 'master.html' %}
    {% block title %}用户管理{% endblock %}
    {% block css %}
        <style>
            .content{
                background-color:blue;
                size:30px;
            }
        </style>
    {% endblock %}
    
    {% block content %}
        <h3 class="content">用户管理</h3>
        <ul>
            {% for i in u %}
                <li>{{i}}</li>
            {% endfor %}
        </ul>
    
        {% include "tag.html" %}
        {% include "tag.html" %}
    {% endblock %}
    
    
    

     3.看效果:



    4.如果tag.html中有模板语言的话,也是可以被渲染的。{{name}}。整个页面的加载过程如下:

    A-urls.py中,打开tpl_1.html文件;如果里面有extend,它会把模板也拿过来;如果里面有include,也会拿过来。

    B-根据上面的先自己生产一个字符串,这个字符串里面有各种各样的模板语言标签,先有了这个1个标签,然后再进行渲染,

    所以include里面的模板语言也是可以被渲染的。

    C-只能继承1个模板,却可以写多个include。


     
  • 相关阅读:
    Linux 详细命令操作大全二
    Liunx 环境安装配置Jupyter
    Linux 详细命令操作大全一
    Mysql int(10)和int(11)区别
    Python 面向对象编程
    Oracle数据库工具设置时间显示格式
    vue安装时报错:npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
    Oracle对当前时间的处理
    Oracle合并不同条件下统计出的总数
    记录一下vue-cli3搭建项目后遇到axios请求跨域的问题
  • 原文地址:https://www.cnblogs.com/momo8238/p/7663527.html
Copyright © 2020-2023  润新知