python Django HTML模板继承

模板继承

一个网站由很多html页面组成,通常大部分html页面都有公共的布局如 导航栏,侧边栏,页面底部等。这些公共部分可以单独抽离出来的模板称为母版,给所有的html页面继承,继承母版的模板称为子板,这样使页面容易修改且更加简洁。

一个html页面只能继承一个母版,通常母版的内容比子板的内容要多。 

1、在母版中定义block块, xxx为自定义的block名称

 {% block xxx %} {% endblock %}     

2、在子板中继承母版,对应block名称要一致

{% extends 'parent.html' %}    # 表示继承哪个母版

{% block xxx %} {% endblock %}

示例:

=== layout.html ===  

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %} {% endblock %}</title>
    <link rel="stylesheet" href="/static/commons.css" />
    {% block css %} {% endblock %}
</head>
<body>
    <div class="pg-header">xxx</div>
    {% block content %} {% endblock %}
    <div class="pg-footer"></div>
    <script type="/static/jquery.js"></script>
    {% block js %} {% endblock %}
</body>
</html>
复制代码

=== tpl1.html ===

复制代码
{% extends 'layout.html' %}
{% block title %}用户管理{% endblock %}
{% block content %}
    <h1>用户管理</h1>
    <ul>
        {% for i in u %}
            <li>{{ i }}</li>
        {% endfor %}
    </ul>
{% endblock %}

{% block css %}
    <style>
        body{background-color: red;}
    </style>
{% endblock %}

{% block js %}
    <script></script>
{% endblock %}
复制代码
复制代码
# urls.py
urlpatterns = [
    url(r'^tpl1/', views.tpl1),
]

# views.py
from django.shortcuts import render, HttpResponse,redirect
def tpl1(request):
    user_list = [1, 2, 3, 4]
    return render(request, 'tpl1.html', {'u': user_list})
复制代码

 

网站的公共部分我们可以使用继承,有时网站的某个小区域html结构和样式相同  内容不一样,此时同样可以把这部分剥离出来, 但用继承不合适,因为每个html页面这部分的内容不一样,可以通过  {% include 'xxx.html' %} 包含进来,并进行模板语言进行渲染。

=== sub-unit.html ===

复制代码
<div class="list" id="n1">
    <ul>
        <li class="">
            <a href="http://" target="_blank">
                <img src="http://img.jpg">
                <span class="shop_name">xxx</span>
                <span class="time">
                  <span >
                    <span sec="sep">
                        <span>4</span>
                    </span>
                   </span>
                </span>
                <span class="left_shadow">
                    <span class="img_logo">
                        <img data-original="http://img.jpg" src="http://" tyle="display: block;">
                    </span>
                    <span class="shop_ad">xxx</span>
                    <span class="price_z"><span></span> 
                    </span>
                    <span class="sale"></span>
                </span>
                <span class="red_circle" style="display: none;"></span>
            </a>
        </li>
    </ul>
</div>
复制代码

=== tmp2.html  ===

复制代码
{% extends 'layout.html' %}
{% block title %}主机管理{% endblock %}
{% block content %}
    <h1>主机管理</h1>
    {% for i in u %}
        {% include 'sub-unit.html' %}
    {% endfor %}
{% endblock %}

{% block css %}
    <style>
        body{
            background-color: red;
        }
    </style>
{% endblock %}

{% block js %}
    <script></script>
{% endblock %}
复制代码
复制代码
# urls.py
urlpatterns = [
    url(r'^tpl2/', views.tpl2),
]

# views.py
from django.shortcuts import render, HttpResponse,redirect
def tpl2(request):
    name = 'root'
    return render(request, 'tpl2.html', {'name': name})
复制代码

 

在模板中应用函数

Python中有很多内置函数如 lower,  upper, truncatechars, date 等等,Django在对html进行渲染时除了可以将变量放在模板语言中,还可以将变量通过管道符“|”传递给函数 

示例:

复制代码
# urls.py
urlpatterns = [
    url(r'^tpl3/', views.tpl1),
]

# views.py
from django.shortcuts import render, HttpResponse,redirect
def tpl3(request):
    name = 'root'
    return render(request, 'tpl3.html', {'name': name})
复制代码

=== tpl3.html ===

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    {{ name }}
    {{ name|lower }}
    {{ name|first|upper }}
    {{ name|truncatechars:"3" }}
</body>
</html>
复制代码

 

一、自定义filter 

很多时候Python内置函数不能满足需求,此时需要自定义函数并调用。在模板语言中调用自定义的函数 称为 自定义filter,步骤如下:

1、app下创建templatetags目录

proj/
├── proj/
├── app01/
│ ├── migrations/
│ ├── templatetags/
│ ├── __init__.py
│ ├── admin.py
│ ├── apps.py
│ ├── models.py
│ ├── tests.py
│ └── view.py
└── manage.py

2、在templatetags目录下创建任意名称的py文件 (在settings中配置当前app)

=== ft.py ===

复制代码
from django import template
from django.utils.safestring import mark_safe

register = template.Library()  # 创建template对象 register 

@register.filter # 自定义函数前加上filter装饰器
def ft1(a1,a2):
    return a1 + a2

@register.filter # 自定义函数前加上filter装饰器
def ft2(a1,a2):
    return a1 + str(a2)
复制代码

3、在html顶部中导入以上py文件  {% load ft %} 

=== tpl4.html === 

复制代码
{% load ft %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    {{ "root"|ft1:"def" }}   
    {{ "root"|ft2:123 }}
</body>
</html>

# 可以进行条件判断 {{ if "arg1"|func:"arg2" }},注意filter函数最多接收两个参数且不能有空格,若要加多个参数通过{{ "arg1"|func:"arg2,arg3" }} 将"arg2,arg3"作为整体,在自定义函数中以","分隔符进行处理。
复制代码

 

二、自定义simple_tag  

除了通过管道传递参数给函数外 ,还可以用自定义simple_tag的方式,步骤如下 :

1、app下创建templatetags目录 ( 同自定义filter一样 )

2、在templatetags目录下创建任意名称的py文件 (在settings中配置当前app)

=== spt.py === 

复制代码
from django import template
from django.utils.safestring import mark_safe

register = template.Library() # 创建template对象 register 
@register.simple_tag  # 自定义函数前加上 simple_tag 装饰器
def sp(a1,a2,a3): 
  return a1 + a2 + a3
复制代码

=== tpl5.html ===

复制代码
{% load spt %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    {% spt1  2  3  6 %}
    {% spt1  "root"  "a"  "b" %}
</body>
</html>

# 自定义simple_tag 函数可以接收任意个参数 {{ spt1 "arg1" "arg2" "arg3" }} ,但不能作为if 判断条件
复制代码
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/little_gray/article/details/80695601
个人分类: python django
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭