模板的那些事

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;width: 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条件

posted @ 2018-05-16 18:18 追风的小蚂蚁阅读(193) 评论(0) 编辑收藏举报

刷新页面返回顶部

模板的那些事

公告