zoukankan      html  css  js  c++  java
  • 模板的那些事

    1.模板继承


    在HTML里,我们经常会重复使用一个HTML页面的框架,然后在复制里面的代码,在粘贴到其他的页面里,这样既费力又费时,所以可以通过下面的方法,来改善这个问题,那么这个方法是什么呢?就是模板继承啦

    模板继承是3.1.2版本添加的一项更加灵活的模板布局方式,模板继承不同于模板布局,甚至来说,应该在模板布局的上层。模板继承其实并不难理解,就好比类的继承一样,模板也可以定义一个基础模板(或者是布局),并且其中定义相关的区块(block),然后继承(extend)该基础模板的子模板中就可以对基础模板中定义的区块进行重载。
    因此,模板继承的优势其实是设计基础模板中的区块(block)和子模板中替换这些区块。
    每个区块由<block></block>标签组成,并且不支持block标签的嵌套。

    那我们来简单的举例一下吧!

    模板的父类

    father.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>{% block title %} {% endblock %}</title>       #子类将会在{% block title %} {% endblock %}这里面填写子类网页的标题内容
        <link rel="stylesheet" href="/static/commons.css" />
        <style>
            .pg-header{
                height: 50px;
                background-color: seashell;
                color: green;
            }
        </style>
        {% block css %} {% endblock %}                        #子类将会在 {% block css %} {% endblock %}这里面填写子类网页的样式
    </head>
    <body>
        <div class="pg-header">模板之继承</div>
        
    </body>
    </html>

    模板的子类

     son1.html

    {% extends 'father.html' %}    #告知继承的是master.html
    
    {% block title %}模板之继承{% endblock %}   #替换父类模板的{% block title %}{% endblock %}添加标题内容
    
    {% block css %}   #替换父类模板的{% block css %}{% endblock %}添加样式
        <style>
            body{
                background-color: red;
            }
        </style>
    {% endblock %}

    到此为止,这就是模板的继承

    2.模板导入


    承接上文,既然模板继承已经知道,那么模板导入也变得很轻松

    模板导入,什么是模板导入呢?我先举个例子吧,假如你在做一个项目,但是这个项目的所有.html文件中都要有一个div的模态框,然而,为了实现这个功能你不得不在每个html文件中重复写他,既耗力又费时,所以可以通过模板导入来完成这项工作,利用模板导入,可以用简短的语句条令,来完成很多重复复杂的任务!这就是它的便捷之处!

    首先先创建一个模板,为了通俗易懂,没做那么多的修饰

    tag.html

    <div style="border: 1px solid red; 400px;height: 200px">
        <input type="text" />
    </div>

    son1.html

    {% extends 'father.html' %}
    
    {% block titel %}
    子类
    {% endblock %}
    
    {% block css %}
    <style>
        body{
            margin: 0;
        }
        .pg_title{
            height: 48px;
            background-color: aqua;
            color: red;
        }
    </style>
    {% endblock %}
    
    {% block content %}
        <div>
            <ul>
                {% for u in user_list %}
                    <li>{{ u }}</li>
                {% endfor %}
            </ul>
        </div>
        {% include 'tag.html' %}   #导入之前创建的模板,可以在这个页面中显示tag.html的所创建的样式
    {% endblock %}

     3.模板的执行


    模版的创建过程,对于模版,其实就是读取模版(其中嵌套着模版标签),然后将 Model 中获取的数据插入到模版中,最后将信息返回给用户。

    def current_datetime(request):
        now = datetime.datetime.now()
        html = "<html><body>It is now %s.</body></html>" % now
        return HttpResponse(html)
    View Code
    from django import template
    t = template.Template('My name is {{ name }}.')
    c = template.Context({'name': 'Adrian'})
    print t.render(c)
    View Code
    import datetime
    from django import template
    import DjangoDemo.settings
     
    now = datetime.datetime.now()
    fp = open(settings.BASE_DIR+'/templates/Home/Index.html')
    t = template.Template(fp.read())
    fp.close()
    html = t.render(template.Context({'current_date': now}))
    return HttpResponse(html
    View Code
    from django.template.loader import get_template
    from django.template import Context
    from django.http import HttpResponse
    import datetime
     
    def current_datetime(request):
        now = datetime.datetime.now()
        t = get_template('current_datetime.html')
        html = t.render(Context({'current_date': now}))
        return HttpResponse(html)
    View Code
    return render_to_response('Account/Login.html',data,context_instance=RequestContext(request))
    View Code

    4.模板语言


    模板中也有自己的语言,该语言可以实现数据展示

    ·{{ item }}
    ·{% for item in item_list %}  <a>{{ item }}</a>  {% endfor %}
      forloop.counter
      forloop.first
      forloop.last 
    ·{% if ordered_warranty %}  {% else %} {% endif %}
    ·母板:{% block title %}{% endblock %}
      子板:{% extends "base.html" %}
       {% block title %}{% endblock %}
    ·帮助方法:
      {{ item.event_start|date:"Y-m-d H:i:s"}}
      {{ bio|truncatewords:"30" }}
      {{ my_list|first|upper }}
      {{ name|lower }}

     5.自定义simple_tag


    a、首先在app中创建templatetags模块(模块名字一定是templatetags

    b、然后在templatetags里创建任意 .py 文件,如:xx.py

    from django import template
    from django.utils.safestring import mark_safe
       
    register = template.Library()
       
    @register.simple_tag
    def my_simple_time(v1,v2,v3):
        return  v1 + v2 + v3
    
    @register.filter
    def sutaoyu(a1,a2):
        return a1+a2

    c、在使用自定义simple_tag、filter的html文件中导入之前创建的 xx.py 文件名

    {% load xx %}

    d、在html文件中使用simple_tag、filter

    {% load xx %}        #在使用自定义simple_tag、filter的html文件中导入之前创建的 xx.py 文件名
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
        {% jiajingze 2 3 4%}  #使用simple_tag
    
        {{ 'maliya'|sutaoyu:"LS" }}  #使用fifter
    </body>
    </html>

    e、在settings中配置当前app,不然django无法找到自定义的simple_tag、fifter

    INSTALLED_APPS = (
        'django.contrib.admin',
        'django.contrib.auth',
        'django.contrib.contenttypes',
        'django.contrib.sessions',
        'django.contrib.messages',
        'django.contrib.staticfiles',
        'app01',      #配置app
    }

    f、simple_tag和fifter的优缺点

         simple_tag:

              缺点:
                     不能作为if条件
              优点:
                     参数任意

         fifter:

              缺点:
                     最多两个参数,不能加空格
              优点:
                     能作为if条件

  • 相关阅读:
    todo: SDC
    2017-2018-2 实验四《Android程序设计》实验报告
    《Java程序设计》第十周课下作业
    2017-2018-2 实验三 《Java面向对象程序设计》实验报告
    《Java程序设计》第九周学习总结
    结对编程练习_四则运算(第二周)
    《Java程序设计》第八周学习总结
    2017-2018-2 实验二 《Java面向对象程序设计》实验报告
    结对编程练习_四则运算(第一周)
    《Java程序设计》第七周学习总结
  • 原文地址:https://www.cnblogs.com/zhuifeng-mayi/p/9047327.html
Copyright © 2011-2022 走看看