zoukankan      html  css  js  c++  java
  • 39.Python模板结构优化-引入模板include标签、模板继承使用详解

    在进行模板的构造时,不免有些模板的部分样式会相同,如果每一个模板都是重写代码的话,不仅在做的时候麻烦,而且在后期的维护上,也是相当的麻烦。所以我们可以将模板结构进行优化,优化可以通过:引入模板;模板继承两种方式来实现。

    1.引入模板

    在DTL模板中,使用include标签,将子模板进行引入,这种引入模板,子模板可以使用父模板中的变量。也就是说子模板中也就会被同化产生一个同父模板相同的变量,但是如果这个子模板同时又被其他的父模板引用的话,这个产生的变量还是存在的。以下举例说明:
    在index()视图函数中传递一个变量,就可以在index.html中引用了,
    from django.shortcuts import render
    
    # 在index视图函数中,传递一个变量,
    def index(request):
        context = {
            'username':'小蚂蚁'
        }
        return render(request,'index.html',context=context)
    
    
    def company(request):
        return render(request,'company.html')
    
    
    def school(request):
        return render(request,'school.html')
    
    在index.html中进行引用:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>首页</title>
    </head>
    <body>
        {% include 'header.html' %}
            <div class="content">
                <p>这是首页的中间部分哦</p>
                <p>{{ username }}</p>
            </div>
        {% include 'footer.html' %}
    </body>
    </html>
    
    同时此时也可以在子模板header.html中进行引用变量username:
    <header>
        <ul>
            <li><a href="{% url 'index' %}">首页</a></li>
            <li><a href="{% url 'company' %}">公司</a></li>
            <li><a href="{% url 'school' %}">校园</a></li>
            <li>{{ username }}</li>
        </ul>
    </header>
    
    在浏览器中查看结果:
    由浏览器的输出信息,可以看出username并没有进行显示。这是因为在include标签中没有进行接收。

    在这里插入图片描述

    在company页面的header部分也不能够显示username

    在这里插入图片描述

    在index.html中,使用with 变量名=“xxx”的形式进行接收:
    	{% include 'header.html' with username='小蚂蚁'%}
            <div class="content">
                <p>这是首页的中间部分哦</p>
                <p>{{ username }}</p>
            </div>
        {% include 'footer.html' %}
    
    在浏览器中进行显示查看:

    ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200117095646480.png?x-oss-

    在company.html中使用with 变量名="xxx"的形式进行接收:
    {% include 'header.html' with username='孤烟逐云' %}
            <div class="content">
                hello 这是贵公司的中间部分哦
            </div>
        {% include 'footer.html' %}
    
    但是在浏览器中会显示:

    在这里插入图片描述

    为什么会出现错误呢?再来看一下views.py中的company()视图函数:
    def company(request):
    # 定义一个上下文,变量为username
        context = {
            'username':''
        }
        return render(request,'company.html',context=context)
    
    在浏览器中进行查看:

    在这里插入图片描述
    此时就可以进行显示了。

    2.模板继承

    (1)如果在某个“block”中使用父模板的内容,那么就可以使用“{{ block.super }}”来继承。
    (2)在定义“block”的时候,除了在“block”开始的地方定义这个“block” 的名字,比如{ % block content %}还可以在“block”结束的地方定义名字,比如{ % endblock content %}。这在大型魔板中尤其有用,能让你快速的看到这个“block” 包含在哪里。
    (3)注意:extends标签必须放在模板的代码的最前面位置,并且子模板中的代码必须放在block中,否者将不会被渲染。
    views.py中代码如下:
    from django.shortcuts import render
    
    
    def index01(request):
        return render(request,'index01.html')
    
    
    def company(request):
        return render(request,'company.html')
    
    
    def school(request):
        return render(request,'school.html')
    
    
    父模板base.html中的代码如下:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <header>
        <ul>
            <li><a href="{% url 'index' %}">首页</a></li>
            <li><a href="{% url 'company' %}">公司</a></li>
            <li><a href="{% url 'school' %}">校园</a></li>
        </ul>
    </header>
    <div class="content">
        {% block content %}
            这是父模板中的content的代码
        {% endblock %}
    </div>
    <footer>
        这是footer中的部分哦
    </footer>
    </body>
    </html>
    
    在子模板index01.html中实现继承:
    {# extends导入父模板必须是在代码的最上方 #}
    {% extends 'base.html' %}
    
    {% block content %}
    {#  在子模板中实现自己的中间部分代码  #}
        <p>这是子模板中的代码</p>
    {#  使用以下语句就可以引用父模板中的代码  #}
        <p>{{ block.super }}</p>
    {% endblock %}
    
    在urls.py中做一层这样的映射:
    from front import views as fviews
    
    urlpatterns = [
        path('index01/', fviews.index01, name = 'index01'),
    ]
    
    在浏览器中查看127.0.0.1:8000/index01/视图:

    在这里插入图片描述

    同样使用这种方式也可以实现模板结构的优化
    始于才华,忠于颜值;每件事情在成功之前,看起来都是天方夜谭。一无所有,就是无所不能。
  • 相关阅读:
    HttpContext.GetOwinContext().Authentication 报错 解决办法
    owin Claims-based认证登录实现
    angularjs初识ng-app、ng-model、ng-repeat指令
    SpringBoot配置slf4j logback-spring.xml日志
    idea时间注释模版
    oracel截取字符串
    win10官网下载地址
    使用HttpWebRequest实现basic身份认证
    mybatis常用jdbcType数据类型与mysql的类型对照
    修改IntelliJ IDEA 默认配置路径
  • 原文地址:https://www.cnblogs.com/guyan-2020/p/12204829.html
Copyright © 2011-2022 走看看