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条件

  • 相关阅读:
    UVALive 6909 Kevin's Problem 数学排列组合
    UVALive 6908 Electric Bike dp
    UVALive 6907 Body Building tarjan
    UVALive 6906 Cluster Analysis 并查集
    八月微博
    hdu 5784 How Many Triangles 计算几何,平面有多少个锐角三角形
    hdu 5792 World is Exploding 树状数组
    hdu 5791 Two dp
    hdu 5787 K-wolf Number 数位dp
    hdu 5783 Divide the Sequence 贪心
  • 原文地址:https://www.cnblogs.com/zhuifeng-mayi/p/9047327.html
Copyright © 2011-2022 走看看