Django之模板层（变量分配过滤器标签继承和导入自定义过滤器、标签及inclusion_tag(了解)）

符号
{{}}:主要与数据值相关
{%%}:主要与逻辑相关
模板语法注意点：
1.针对需要加括号调用的名字 django模板语法会自动加括号调用你只需要写名字就行
2.模板语法的注释{##}，前端浏览器是无法查看的，因为它要先在后端运行
3.django的模板语法是自己写的跟jinja2不一样，只能用句点符的方式点出来
模板语法两种传值方法

   return render(request, 'demo02.html', {'n1': name, 'a1': age})  # 传值方式1:精准传值 不浪费资源 针对多资源的传递书写麻烦

   return render(request,'demo02.html', locals())  # 传值方式2:将函数名称空间中所有的名字全部传递 名字过多并且不使用的情况下比较浪费资源

模板语法传值特性
1.基本数据类型正常展示
2.文件对象也可以展示并调用方法
3.函数名会自动加括号执行并将返回值展示到页面上(不支持额外传参)
4.类名也会自动加括号调用,对象则不用加括号也可以调用（除非用魔法）

ps:总结针对可以加括号调用的名字模板语法都会自动加括号调用

代码展示

前端

     <p>{{ f }}</p>
    <p>{{ i }}</p>
    <p>{{ s }}</p>
    <p>{{ l }}</p>
    <p>{{ d }}</p>
    <p>{{ t }}</p>
    <p>{{ se }}</p>
    <p>{{ b }}</p>
    <p>{{ f_obj }}</p>
    <p>{{ f_obj.read }}</p>
    <!--你能不能看到我-->
     你看到了什么 快分享给我看看！！！ 
<p>{{ func1 }}</p>
<p>{{ MyClass }}</p>
<p>{{ obj }}</p>
<p>{{ obj.get_obj }}</p>
<p>{{ obj.get_cls }}</p>
<p>{{ obj.get_static }}</p>

后端

 def func(request):
    # python基本数据类型
    f = 1.11
    i = 666
    s = 'hello jason! say hello big baby ha ha ha'
    l = [11, 22, 33, 44]
    d = {'name': 'jason', 'age': 18}
    t = (11, 22, 33, 44)
    se = {11, 22, 33, 44}
    b = True
    # 文件对象
    f_obj = open(r'D:\pythonProject03\djangoday04\今日内容.md', 'rb')
    # 函数
    def func1():
        print('上午犯困 下午也犯困 晚上还犯浑')
        return '熬夜会上瘾'
    # 类
    class MyClass(object):
        def get_obj(self):
            return '绑定给对象的方法'
        @classmethod
        def get_cls(cls):
            return '绑定给类的方法'
        @staticmethod
        def get_static():
            return '静态方法'
    obj = MyClass()

页面效果

二、模板的过滤器

定义

 	模块语法自带的一些内置函数

语法

 	{{obj|filter__name:param}}  变量名字|过滤器名称：变量

default

如果一个变量是false或者为空，使用给定的默认值。否则，使用变量的值。例如：

 	{{ value|default:"nothing"}}

length
返回值的长度。它对字符串和列表都起作用。例如：如果 value 是 [‘a’, ‘b’, ‘c’, ‘d’]，那么输出是 4。

 	{{ value|length }}

filesizeformat
将值格式化为一个 “人类可读的” 文件尺寸（例如 '13 KB', '4.1 MB', '102 bytes', 等等）。例如：如果 value 是 123456789，输出将会是 117.7 MB

 	{{ value|filesizeformat }}

date
如果 value=datetime.datetime.now()

 	{{ value|date:"Y-m-d"}}

slice
如果 value=”hello world”,将会是llo worl

 	{{ value|slice:"2:-1"}}

truncatechars
如果字符串字符多于指定的字符数量，那么会被截断。截断的字符串将以可翻译的省略号序列（“…”）结尾。参数：要截断的字符数

 	{{ value|truncatechars:9}}

safe
Django的模板中会对HTML标签和JS等语法标签进行自动转义，原因显而易见，这样是为了安全。但是有的时候我们可能不希望这些HTML元素被转义，比如我们做一个内容管理系统，后台添加的文章中是经过修饰的，这些修饰可能是通过一个类似于FCKeditor编辑加注了HTML修饰符的文本，如果自动转义的话显示的就是保护HTML标签的源文件。为了在Django中关闭HTML的自动转义有两种方式，如果是一个单独的变量我们可以通过过滤器“|safe”的方式告诉Django这段代码是安全的不必转义。比如：

 	value="<a href="">点击</a>"
 
	{{ value|safe}}
 
 
	from django.utils.safestring import mark_safe
	res = mark_safe('<h1>HELLO WORLD</h1>')

代码展示

前端

 <p>{{ i|add:10 }}</p>
<p>{{ s|add:'baby' }}</p>
<p>{{ l|length }}</p>
<p>{{ s|slice:'1:4' }}</p>
<p>{{ value|slice:"2:-1"}}</p>
<p>{{ s|truncatechars:5 }}</p>
<p>{{ s|truncatewords:3 }}</p>
<p>{{ ctime|date:'Y年-m月-d日 H时:i分:s秒 ' }}</p>
<p>{{ file_size|filesizeformat }}</p>
<p>{{ h1|safe }}</p>
<p>{{ s1|safe }}</p>

后端

 def func(request):
    from datetime import date,datetime
    ctime = datetime.today()
    import os
    file_size = 424232423423432
 
    h1 = '<h1>哈哈哈哈</h1>'
    s1 = "<script>confirm(123)</script>"
    return render(request, 'funcPage.html', locals())

页面效果

三、模板之标签

if标签
在html页面if ，然后tab键补全
语法

 	{% if 条件1(可以自己写也可以用传递过来的数据) %}
			<p>今天又是周三了</p>
	{% elif 条件2(可以自己写也可以用传递过来的数据) %}
			<p>百日冲刺</p>
	{% else %}
			<p>没多少时间了!</p>
	{% endif %}

for标签
在html页面for ，然后tab键补全
语法

 	{% for k in t1 %}
		{% if forloop.first %}
			<p>这是我的第一次循环{{ k }}</p>
		{% elif forloop.last %}
			<p>这是我的最后一次循环{{ k }}</p>
		{% else %}
			<p>这是中间循环{{ k }}</p>
		{% endif %}
 
		{% empty %}
			<p>你给我传的数据是空的无法循环取值(空字符串、空列表、空字典)</p>
	{% endfor %}

forloop关键字

 # 遍历字典
# 字典的三剑客
keys values items
forloop.counter            The current iteration of the loop (1-indexed) 当前循环的索引值（从1开始）
forloop.counter0           The current iteration of the loop (0-indexed) 当前循环的索引值（从0开始）
forloop.revcounter         The number of iterations from the end of the loop (1-indexed) 当前循环的倒序索引值（从1开始）
forloop.revcounter0        The number of iterations from the end of the loop (0-indexed) 当前循环的倒序索引值（从0开始）
forloop.first              True if this is the first time through the loop 当前循环是不是第一次循环（布尔值）
forloop.last               True if this is the last time through the loop 当前循环是不是最后一次循环（布尔值）
forloop.parentloop         本层循环的外层循环

ps: django模板语法取值操作>>>:只支持句点符,句点符既可以点索引也可以点键

 	d1 = {'name': 'jason', 'age': 18, 'hobby': ['read', 'music', {'a1': 'haha', 'a2': 'heihei'}]}
	{{ d1.hobby.2.a1 }}

起别名
复杂数据获取之后需要反复使用可以起别名

 	{% with d1.hobby.2.a1 as h %}  
			<a href="">{{ h }}</a>
	{% endwith %}

四、自定义过滤器、标签及inclusion_tag(了解)

前期准备工作
如果想要自定义一些模板语法需要先完成下列的三步走战略
1.在应用下创建一个名字必须叫templatetags的目录
2.在上述目录下创建任意名称的py文件
3.在上述py文件内先编写两行固定的代码

 	from django import template
	register = template.Library()

自定义过滤器(最大只能接收两个参数)

 @register.filter(name='myadd')
def func1(a, b):
    return a + b

目前编辑的页面代码

 {% load mytags %}   # 加载自己创建的py文件
<p>{{ i|myadd:1 }}</p>

自定义标签(参数没有限制)

 @register.simple_tag(name='mytag')
def func2(a, b, c, d, e):
    return f'{a}-{b}-{c}-{d}-{e}'

目前编辑的页面代码

 {% load mytags %}     # 加载自己创建的py文件
{% mytag 'jason' 'kevin' 'oscar' 'tony' 'lili' %}

自定义inclusion_tag(局部的html代码)

调用函数，在一个自己新建的空html文件中执行，执行完后再塞进需要用的html页面

 @register.inclusion_tag('menu.html',name='mymenu')
def func3(n):
    html = []
    for i in range(n):
        html.append('<li>第%s页</li>'%i)
    return locals()

新建的借助menu.html页面代码

 <ul>
    {% for liStr in html %}
        {{ liStr|safe }}
    {% endfor %}
</ul>

目前编辑的页面代码

 {% load mytags %}     # 加载自己创建的py文件
{% mymenu 20 %}

五、模板的继承和导入

模板的继承(重要)

定义

多个页面有很多相似的地方我们可以采取下列方式

方式1:传统的复制粘贴
方式2:模板的继承

 	1.在模板中使用block划定子板以后可以修改的区域
            	{% block 区域名称 %}
		继承的旧代码区域
                {% endblock %}
       	2.子板继承模板
        	{% extends 'home.html' %}    # 首先要先导入母版
            	{% block 区域名称 %}
                继承的新代码区域
                {% endblock %}
	补充:子板也可以继续使用模板的内容 
		{{ block.super }}

ps:模板中至少应该有三个区域,分别是页面内容区、css样式区、js代码区

模板的导入(了解)

定义

将某个html的部分提前在一个空的html页面写好之后很多html页面都想使用就可以导入，在需要导入的地方

  	{% include 'myform.html' %}

直接上代码，以后可以粘贴复制

母板

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {#    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>#}
    {#    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css">#}
    {#    <script src="bootstrap-3.4.1-dist/js/bootstrap.js"></script>#}
    {% load static %}
    <script src="{% static 'jquery.min.js' %}"></script>
    <link rel="stylesheet" href="{% static 'bootstrap-3.4.1-dist/css/bootstrap.min.css' %}">
    <script src="{% static 'bootstrap-3.4.1-dist/js/bootstrap.min.js' %}"></script>
    <style>
        .c1 {
            float: left;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">羊村登录管理系统</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">模块</a>
        </div>
 
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">链接<span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">下载 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">版本</a></li>
                        <li><a href="#">其他活动</a></li>
                        <li><a href="#">其他一些好玩的</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">点击有惊喜</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">不信点这里</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
 
 
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4">
 
            <!-- Single button -->
            <div class="btn-group">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false">
                    Action <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                </ul>
            </div>
            <div class="list-group">
                <a href="#" class="list-group-item disabled">
                    网页基本功能
                </a>
                <a href="/child1/" class="list-group-item">登录</a>
                <a href="/child2/" class="list-group-item">注册</a>
                <a href="#" class="list-group-item">编辑</a>
                <a href="#" class="list-group-item">删除</a>
            </div>
            <ul class="list-group">
                <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
                <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
                <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
                <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
            </ul>
            <div class="list-group">
                <a href="#" class="list-group-item list-group-item-success">青青草原第一飞毛腿-喜哥</a>
                <a href="#" class="list-group-item list-group-item-info">青青草原第一睡神-懒哥</a>
                <a href="#" class="list-group-item list-group-item-warning">青青草原第一美女-美姐</a>
                <a href="#" class="list-group-item list-group-item-danger">青青草原第一帅哥-狼哥</a>
            </div>
            <nav aria-label="...">
                <ul class="pagination">
                    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>
                    </li>
                    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
                    <li class="active"><a href="#">2 <span class="sr-only">(current)</span></a></li>
                     <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>
                    </li>
                    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
                     <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>
                    </li>
                    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
                     <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>
                    </li>
 
 
 
                    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
                </ul>
            </nav>
        </div>
 
 
        <div class="col-lg-8">
            {% block content %}
            <div class="panel panel-warning">
                <div class="jumbotron">
                    <h1>这里青青草原的网页</h1>
                    <p>里面记录着羊村和狼堡的信息</p>
                    <p><a class="btn btn-primary btn-lg" href="#" role="button">了解羊村</a></p>
                </div>
            </div>
 
            <div class="panel panel-success">
                <div class="row">
                    <div class="col-xs-6 col-md-3">
                        <a href="#" class="thumbnail">
                            <img src="https://img1.baidu.com/it/u=1682278568,1662583579&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                                 alt="...">
                        </a>
                    </div>
                    <div class="col-xs-6 col-md-3">
                        <a href="#" class="thumbnail">
                            <img src="https://img1.baidu.com/it/u=1236718530,2234744473&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=505"
                                 alt="...">
                        </a>
                    </div>
                    <div class="col-xs-6 col-md-3">
                        <a href="#" class="thumbnail">
                            <img src="https://img2.baidu.com/it/u=660177652,3207960518&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                                 alt="...">
                        </a>
                    </div>
                    <div class="col-xs-6 col-md-3">
                        <a href="#" class="thumbnail">
                            <img src="https://img1.baidu.com/it/u=4028757630,2942084939&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=499"
                                 alt="...">
                        </a>
                    </div>
                </div>
                <div class="panel panel-info">
                    <div class="row">
                        <div class="col-sm-6 col-md-4">
                            <div class="thumbnail">
                                <img src="https://img1.baidu.com/it/u=259115010,423465834&fm=253&fmt=auto&app=138&f=PNG?w=500&h=565"
                                     alt="...">
                                <div class="caption">
                                    <h3>武大狼的第250代子孙，第77代狼王，自称“本大王”，喜羊羊等人也称他为“灰太狼大王”。疼爱孩子的好丈夫、好爸爸。</h3>
                                    <p>...</p>
                                    <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#"
                                                                                                       class="btn btn-default"
                                                                                                       role="button">Button</a>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-md-4">
                            <div class="thumbnail">
                                <img src="https://img1.baidu.com/it/u=2822434814,2828561864&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=427"
                                     alt="...">
                                <div class="caption">
                                    <h3>
                                        黑大帅，动画片《喜羊羊与灰太狼》系列中的反派角色，后来成为正面角色，初登场于动画《喜羊羊与灰太狼之古古怪界大作战》第4集（即《喜羊羊与灰太狼》第一部第284集）作为反派角色，来自地底下的古古怪界。</h3>
                                    <p>...</p>
                                    <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#"
                                                                                                       class="btn btn-default"
                                                                                                       role="button">Button</a>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-md-4">
                            <div class="thumbnail">
                                <img src="https://img2.baidu.com/it/u=2970440372,1083416465&fm=253&fmt=auto&app=138&f=JPEG?w=572&h=500"
                                     alt="...">
                                <div class="caption">
                                    <h3>
                                        武泰哥，又称老虎大叔。为国产动画片《喜羊羊与灰太狼》系列中出现的人物，原型是一只金黄色的华南虎，四臂有健壮的肌肉，胸部点缀着两大块胸肌。常常举行肌肉展示，包包大人为他伤透了脑筋。 </h3>
                                    <p>...</p>
                                    <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#"
                                                                                                       class="btn btn-default"
                                                                                                       role="button">Button</a>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel panel-warning">...</div>
                <div class="panel panel-danger">...</div>
            </div>
        </div>
 
        {% endblock %}
    </div>
</div>
</body>
</html>

子板1

 {% extends 'Monpage.html' %}
 
{% block css %}
    <style>
        #d2 {
            color: yellow;
        }
    </style>
{% endblock %}
 
 
{% block content %}
    <h1 class="text-center" id="d2">登录页面</h1>
    {% include 'daoru.html' %}
    <form action="">
        <p>username:
            <input type="text" class="form-control">
        </p>
        <p>password:
            <input type="text" class="form-control">
        </p>
        <input type="submit" class="btn btn-warning btn-block">
    </form>
{% endblock %}
 
 
{% block js %}
    <script>alert('注册页面')</script>
{% endblock %}

子板2

 {% extends 'Monpage.html' %}
 
{% block css %}
    <style>
        #d2 {
            color: yellow;
        }
    </style>
{% endblock %}
 
 
{% block content %}
    <h1 class="text-center" id="d2">注册页面</h1>
    {% include 'daoru.html' %}
    <form action="">
        <p>username:
            <input type="text" class="form-control">
        </p>
        <p>password:
            <input type="text" class="form-control">
        </p>
        <input type="submit" class="btn btn-warning btn-block">
    </form>
{% endblock %}
 
 
{% block js %}
    <script>alert('注册页面')</script>
{% endblock %}

母板页面效果
子板页面效果

上一篇Django之视图函数层（必会三板斧 JsonResponse对象 request对象获取文件 FBV与CBV CBV源码剖析）

下一篇Django模型层（一）（测试环境搭配常见的十几种查询方法-ORM关键字 ORM执行SQL语句双下划线查询 ORM外键字段的创建外键字段数据的增删改查多表查询（子查询，连表查询）聚合、分组、F和Q查询）

本文作者：岳宗柯

本文链接：https://www.cnblogs.com/yuezongke/p/17353976.html

posted @ 2023-04-26 18:52 岳宗柯阅读(56) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

Python学习之旅

别让世界左右你的情绪，别让情绪影响你的理性！

Django之模板层（变量分配过滤器标签继承和导入自定义过滤器、标签及inclusion_tag(了解)）

目录

一、模板变量分配

定义

二、模板的过滤器

定义

语法

三、模板之标签

四、自定义过滤器、标签及inclusion_tag(了解)

五、模板的继承和导入

模板的继承(重要)

定义

模板的导入(了解)

定义

直接上代码，以后可以粘贴复制

公告

常用链接

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	<p>{{ f }}</p>
	<p>{{ i }}</p>
	<p>{{ s }}</p>
	<p>{{ l }}</p>
	<p>{{ d }}</p>
	<p>{{ t }}</p>
	<p>{{ se }}</p>
	<p>{{ b }}</p>
	<p>{{ f_obj }}</p>
	<p>{{ f_obj.read }}</p>
	<!--你能不能看到我-->
	你看到了什么快分享给我看看！！！
	<p>{{ func1 }}</p>
	<p>{{ MyClass }}</p>
	<p>{{ obj }}</p>
	<p>{{ obj.get_obj }}</p>
	<p>{{ obj.get_cls }}</p>
	<p>{{ obj.get_static }}</p>

	def func(request):
	# python基本数据类型
	f = 1.11
	i = 666
	s = 'hello jason! say hello big baby ha ha ha'
	l = [11, 22, 33, 44]
	d = {'name': 'jason', 'age': 18}
	t = (11, 22, 33, 44)
	se = {11, 22, 33, 44}
	b = True
	# 文件对象
	f_obj = open(r'D:\pythonProject03\djangoday04\今日内容.md', 'rb')
	# 函数
	def func1():
	print('上午犯困下午也犯困晚上还犯浑')
	return '熬夜会上瘾'
	# 类
	class MyClass(object):
	def get_obj(self):
	return '绑定给对象的方法'
	@classmethod
	def get_cls(cls):
	return '绑定给类的方法'
	@staticmethod
	def get_static():
	return '静态方法'
	obj = MyClass()

	{{obj\|filter__name:param}} 变量名字\|过滤器名称：变量

	value="<a href="">点击</a>"

	{{ value\|safe}}


	from django.utils.safestring import mark_safe
	res = mark_safe('<h1>HELLO WORLD</h1>')

	<p>{{ i\|add:10 }}</p>
	<p>{{ s\|add:'baby' }}</p>
	<p>{{ l\|length }}</p>
	<p>{{ s\|slice:'1:4' }}</p>
	<p>{{ value\|slice:"2:-1"}}</p>
	<p>{{ s\|truncatechars:5 }}</p>
	<p>{{ s\|truncatewords:3 }}</p>
	<p>{{ ctime\|date:'Y年-m月-d日 H时:i分:s秒 ' }}</p>
	<p>{{ file_size\|filesizeformat }}</p>
	<p>{{ h1\|safe }}</p>
	<p>{{ s1\|safe }}</p>

	def func(request):
	from datetime import date,datetime
	ctime = datetime.today()
	import os
	file_size = 424232423423432

	h1 = '<h1>哈哈哈哈</h1>'
	s1 = "<script>confirm(123)</script>"
	return render(request, 'funcPage.html', locals())

	{% if 条件1(可以自己写也可以用传递过来的数据) %}
	<p>今天又是周三了</p>
	{% elif 条件2(可以自己写也可以用传递过来的数据) %}
	<p>百日冲刺</p>
	{% else %}
	<p>没多少时间了!</p>
	{% endif %}

	{% for k in t1 %}
	{% if forloop.first %}
	<p>这是我的第一次循环{{ k }}</p>
	{% elif forloop.last %}
	<p>这是我的最后一次循环{{ k }}</p>
	{% else %}
	<p>这是中间循环{{ k }}</p>
	{% endif %}

	{% empty %}
	<p>你给我传的数据是空的无法循环取值(空字符串、空列表、空字典)</p>
	{% endfor %}

	# 遍历字典
	# 字典的三剑客
	keys values items
	forloop.counter The current iteration of the loop (1-indexed) 当前循环的索引值（从1开始）
	forloop.counter0 The current iteration of the loop (0-indexed) 当前循环的索引值（从0开始）
	forloop.revcounter The number of iterations from the end of the loop (1-indexed) 当前循环的倒序索引值（从1开始）
	forloop.revcounter0 The number of iterations from the end of the loop (0-indexed) 当前循环的倒序索引值（从0开始）
	forloop.first True if this is the first time through the loop 当前循环是不是第一次循环（布尔值）
	forloop.last True if this is the last time through the loop 当前循环是不是最后一次循环（布尔值）
	forloop.parentloop 本层循环的外层循环

	d1 = {'name': 'jason', 'age': 18, 'hobby': ['read', 'music', {'a1': 'haha', 'a2': 'heihei'}]}
	{{ d1.hobby.2.a1 }}

	在后端变量的值通过模板语法传到前端

	{% with d1.hobby.2.a1 as h %}
	<a href="">{{ h }}</a>
	{% endwith %}

	{% load mytags %} # 加载自己创建的py文件
	<p>{{ i\|myadd:1 }}</p>

	@register.simple_tag(name='mytag')
	def func2(a, b, c, d, e):
	return f'{a}-{b}-{c}-{d}-{e}'

	{% load mytags %} # 加载自己创建的py文件
	{% mytag 'jason' 'kevin' 'oscar' 'tony' 'lili' %}

	@register.inclusion_tag('menu.html',name='mymenu')
	def func3(n):
	html = []
	for i in range(n):
	html.append('<li>第%s页</li>'%i)
	return locals()

	<ul>
	{% for liStr in html %}
	{{ liStr\|safe }}
	{% endfor %}
	</ul>

	{% load mytags %} # 加载自己创建的py文件
	{% mymenu 20 %}

	1.在模板中使用block划定子板以后可以修改的区域
	{% block 区域名称 %}
	继承的旧代码区域
	{% endblock %}
	2.子板继承模板
	{% extends 'home.html' %} # 首先要先导入母版
	{% block 区域名称 %}
	继承的新代码区域
	{% endblock %}
	补充:子板也可以继续使用模板的内容
	{{ block.super }}

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	{# <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>#}
	{# <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css">#}
	{# <script src="bootstrap-3.4.1-dist/js/bootstrap.js"></script>#}
	{% load static %}
	<script src="{% static 'jquery.min.js' %}"></script>
	<link rel="stylesheet" href="{% static 'bootstrap-3.4.1-dist/css/bootstrap.min.css' %}">
	<script src="{% static 'bootstrap-3.4.1-dist/js/bootstrap.min.js' %}"></script>
	<style>
	.c1 {
	float: left;
	}
	</style>
	</head>
	<body>
	<nav class="navbar navbar-inverse">
	<div class="container-fluid">
	<!-- Brand and toggle get grouped for better mobile display -->
	<div class="navbar-header">
	<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
	data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
	<span class="sr-only">羊村登录管理系统</span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	</button>
	<a class="navbar-brand" href="#">模块</a>
	</div>

	<!-- Collect the nav links, forms, and other content for toggling -->
	<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
	<ul class="nav navbar-nav">
	<li class="active"><a href="#">链接<span class="sr-only">(current)</span></a></li>
	<li><a href="#">Link</a></li>
	<li class="dropdown">
	<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
	aria-expanded="false">下载 <span class="caret"></span></a>
	<ul class="dropdown-menu">
	<li><a href="#">版本</a></li>
	<li><a href="#">其他活动</a></li>
	<li><a href="#">其他一些好玩的</a></li>
	<li role="separator" class="divider"></li>
	<li><a href="#">点击有惊喜</a></li>
	<li role="separator" class="divider"></li>
	<li><a href="#">不信点这里</a></li>
	</ul>
	</li>
	</ul>
	<form class="navbar-form navbar-left">
	<div class="form-group">
	<input type="text" class="form-control" placeholder="Search">
	</div>
	<button type="submit" class="btn btn-default">Submit</button>
	</form>
	<ul class="nav navbar-nav navbar-right">
	<li><a href="#">Link</a></li>
	<li class="dropdown">
	<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
	aria-expanded="false">Dropdown <span class="caret"></span></a>
	<ul class="dropdown-menu">
	<li><a href="#">Action</a></li>
	<li><a href="#">Another action</a></li>
	<li><a href="#">Something else here</a></li>
	<li role="separator" class="divider"></li>
	<li><a href="#">Separated link</a></li>
	</ul>
	</li>
	</ul>
	</div><!-- /.navbar-collapse -->
	</div><!-- /.container-fluid -->
	</nav>


	<div class="container-fluid">
	<div class="row">
	<div class="col-lg-4">

	<!-- Single button -->
	<div class="btn-group">
	<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
	aria-haspopup="true" aria-expanded="false">
	Action <span class="caret"></span>
	</button>
	<ul class="dropdown-menu">
	<li><a href="#">Action</a></li>
	<li><a href="#">Another action</a></li>
	<li><a href="#">Something else here</a></li>
	<li role="separator" class="divider"></li>
	<li><a href="#">Separated link</a></li>
	</ul>
	</div>
	<div class="list-group">
	<a href="#" class="list-group-item disabled">
	网页基本功能
	</a>
	<a href="/child1/" class="list-group-item">登录</a>
	<a href="/child2/" class="list-group-item">注册</a>
	<a href="#" class="list-group-item">编辑</a>
	<a href="#" class="list-group-item">删除</a>
	</div>
	<ul class="list-group">
	<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
	<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
	<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
	<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
	</ul>
	<div class="list-group">
	<a href="#" class="list-group-item list-group-item-success">青青草原第一飞毛腿-喜哥</a>
	<a href="#" class="list-group-item list-group-item-info">青青草原第一睡神-懒哥</a>
	<a href="#" class="list-group-item list-group-item-warning">青青草原第一美女-美姐</a>
	<a href="#" class="list-group-item list-group-item-danger">青青草原第一帅哥-狼哥</a>
	</div>
	<nav aria-label="...">
	<ul class="pagination">
	<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a>
	</li>
	<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
	<li class="active"><a href="#">2 <span class="sr-only">(current)</span></a></li>
	<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a>
	</li>
	<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
	<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a>
	</li>
	<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
	<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a>
	</li>



	<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
	</ul>
	</nav>
	</div>


	<div class="col-lg-8">
	{% block content %}
	<div class="panel panel-warning">
	<div class="jumbotron">
	<h1>这里青青草原的网页</h1>
	<p>里面记录着羊村和狼堡的信息</p>
	<p><a class="btn btn-primary btn-lg" href="#" role="button">了解羊村</a></p>
	</div>
	</div>

	<div class="panel panel-success">
	<div class="row">
	<div class="col-xs-6 col-md-3">
	<a href="#" class="thumbnail">
	<img src="https://img1.baidu.com/it/u=1682278568,1662583579&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
	alt="...">
	</a>
	</div>
	<div class="col-xs-6 col-md-3">
	<a href="#" class="thumbnail">
	<img src="https://img1.baidu.com/it/u=1236718530,2234744473&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=505"
	alt="...">
	</a>
	</div>
	<div class="col-xs-6 col-md-3">
	<a href="#" class="thumbnail">
	<img src="https://img2.baidu.com/it/u=660177652,3207960518&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
	alt="...">
	</a>
	</div>
	<div class="col-xs-6 col-md-3">
	<a href="#" class="thumbnail">
	<img src="https://img1.baidu.com/it/u=4028757630,2942084939&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=499"
	alt="...">
	</a>
	</div>
	</div>
	<div class="panel panel-info">
	<div class="row">
	<div class="col-sm-6 col-md-4">
	<div class="thumbnail">
	<img src="https://img1.baidu.com/it/u=259115010,423465834&fm=253&fmt=auto&app=138&f=PNG?w=500&h=565"
	alt="...">
	<div class="caption">
	<h3>武大狼的第250代子孙，第77代狼王，自称“本大王”，喜羊羊等人也称他为“灰太狼大王”。疼爱孩子的好丈夫、好爸爸。</h3>
	<p>...</p>
	<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#"
	class="btn btn-default"
	role="button">Button</a>
	</p>
	</div>
	</div>
	</div>
	<div class="col-sm-6 col-md-4">
	<div class="thumbnail">
	<img src="https://img1.baidu.com/it/u=2822434814,2828561864&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=427"
	alt="...">
	<div class="caption">
	<h3>
	黑大帅，动画片《喜羊羊与灰太狼》系列中的反派角色，后来成为正面角色，初登场于动画《喜羊羊与灰太狼之古古怪界大作战》第4集（即《喜羊羊与灰太狼》第一部第284集）作为反派角色，来自地底下的古古怪界。</h3>
	<p>...</p>
	<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#"
	class="btn btn-default"
	role="button">Button</a>
	</p>
	</div>
	</div>
	</div>
	<div class="col-sm-6 col-md-4">
	<div class="thumbnail">
	<img src="https://img2.baidu.com/it/u=2970440372,1083416465&fm=253&fmt=auto&app=138&f=JPEG?w=572&h=500"
	alt="...">
	<div class="caption">
	<h3>
	武泰哥，又称老虎大叔。为国产动画片《喜羊羊与灰太狼》系列中出现的人物，原型是一只金黄色的华南虎，四臂有健壮的肌肉，胸部点缀着两大块胸肌。常常举行肌肉展示，包包大人为他伤透了脑筋。 </h3>
	<p>...</p>
	<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#"
	class="btn btn-default"
	role="button">Button</a>
	</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	<div class="panel panel-warning">...</div>
	<div class="panel panel-danger">...</div>
	</div>
	</div>

	{% endblock %}
	</div>
	</div>
	</body>
	</html>

	{% extends 'Monpage.html' %}

	{% block css %}
	<style>
	#d2 {
	color: yellow;
	}
	</style>
	{% endblock %}


	{% block content %}
	<h1 class="text-center" id="d2">登录页面</h1>
	{% include 'daoru.html' %}
	<form action="">
	<p>username:
	<input type="text" class="form-control">
	</p>
	<p>password:
	<input type="text" class="form-control">
	</p>
	<input type="submit" class="btn btn-warning btn-block">
	</form>
	{% endblock %}


	{% block js %}
	<script>alert('注册页面')</script>
	{% endblock %}

Python学习之旅

别让世界左右你的情绪，别让情绪影响你的理性！

Django之模板层 （变量分配 过滤器 标签 继承和导入 自定义过滤器、标签及inclusion_tag(了解)）

目录

一、模板变量分配

定义

二、模板的过滤器

定义

语法

三、模板之标签

四、自定义过滤器、标签及inclusion_tag(了解)

五、模板的继承和导入

模板的继承(重要)

定义

模板的导入(了解)

定义

直接上代码，以后可以粘贴复制

公告

常用链接

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论

Django之模板层（变量分配过滤器标签继承和导入自定义过滤器、标签及inclusion_tag(了解)）