zoukankan      html  css  js  c++  java
  • django模板

    1.模板的参数传递

    存在demo1.html如下

    <p>my name is {{name}}</p>

    对应的views写法如下

    def muban(requests):
        context={}
        context['name']='alan'
        return render(requests,'demo1.html',context=context)

    简单的逻辑判断:

    传递一个字典给模板,判断如果身高高于190则展示高个球员,否则展示矮个球员

    在demo2.html中模板写法如下(需要获取name以及height,遍历传递过去的value):

    {% for i in context.values %}
            {% if i.height > 190 %} 
                <p>高个球员</p>
                <li>姓名为:{{i.name}} 身高为:{{i.height}}</li>
            {% else %}
            <p>矮个球员</p>
            <li>姓名为:{{i.name}} 身高为:{{i.height}}</li>
            {% endif %}                  
    {% endfor %}

    对应的views写法如下(遍历传递的参数自身的话,可以直接把自身作为value以字典形式传递过去):

    def views_template(requests):
        context={
        "kobe":{"name":"kobe","height":198},
        "iverson":{"name":"iverson","height":183}
        }
        return render(requests,'muban.html',context={"context":context})

    2.模板的include

     存在需要反复使用的模板,比如网页的顶部和底部都是一样的信息,可以直接复用

    假设存在需要反复使用的html : top.hml   在其他模板中调用的代码如下:

     {% include 'top.html' %}

    3.模板的继承

    打开一个网站时候,点导航栏切换到不同的页面,发现导航部分是不变的,只是页面的主体内容变了,于是就可以写个母模板,其它的子页面继承母模板就可以了

    在母模板中 block是用来给字模板继承的,如下:

        <!-- block是一个块标签  content是标签名称 -->
        {% block content %} {% endblock content %}
    
        <p>---------自动化教程---------</p>
    
        <!-- block是一个块标签  ad是标签名称 -->
        {% block ad %} {% endblock ad %}
    
        <!-- block是一个块标签  ad是标签名称 -->
        {% block default %} 
        <h3>默认的内容,如果子页面中没有填充此block,则默认展示该内容</h3>
        {% endblock default %}

    在字模板中继承用 extends, 如下:

        {% extends "mother.html" %}
    
        {% block content %}
        <p>这里是填充的 content block块的内容</p>
        {% endblock content%}
    
        {% block ad %}
        <p>这里是填充的ad block块的内容</p>
        <ul>列表内容</ul>
        {% for i in ads %}
        <li>{{i}} </li>
        {% endfor %}
        {% endblock ad %}
  • 相关阅读:
    第一个mpvue小程序开发总结
    ES6学习笔记(一)——扩展运算符和解构赋值
    我所理解的发布订阅模式
    移动web开发适配方案之Rem
    探究JS中对象的深拷贝和浅拷贝
    《BAT前端进阶[师徒班]》学习总结
    浅析使用vue-router实现前端路由的两种方式
    webpack之proxyTable设置跨域
    《免费前端教程不会告诉你这些》知乎LIVE读后感
    MySQL binlog-server搭建
  • 原文地址:https://www.cnblogs.com/alantammm/p/12018383.html
Copyright © 2011-2022 走看看