Django学习路线之Django自带模板语言DTL

原创

Mr.郑先生_ 2023-03-17 19:09:55 博主文章分类：Django ©著作权

文章标签 python django html DTL HTML 文章分类 HarmonyOS 后端开发

©著作权归作者所有：来自51CTO博客作者Mr.郑先生_的原创作品，请联系作者获取转载授权，否则将追究法律责任

在前两篇文章中，视图函数只是直接返回文本，而在实际生产环境中其实很少这样用，因为实际的页面大多是带有样式的HTML代码，这可以让浏览器渲染出非常漂亮的页面

Django中,可以把模板理解成一种便捷地动态生成HTML的方法,下面我们一起来学习一下:

模板初体验
模板变量
模板标签
模板过滤器
模板结构优化
加载静态文件

1. 模板初体验

回忆一下第一篇文章里讲到的MVT思想:
Django学习路线之从虚拟环境开始Django初体验

这个T指的就是模板,模板的作用是返回一个HTML界面,再由视图返回给浏览器

DTL与普通的HTML文件的区别

DTL是Django Template Language三个单词的缩写，也就是Django自带的模板语言

DTL模板是一种带有特殊语法的HTML文件，这个HTML文件可以被Django编译，可以传递参数进去，实现数据动态化

在编译完成后，生成一个普通的HTML文件，然后发送给客户端

创建项目,配置环境

在开始之前,我们先进入虚拟环境,并新建一个名为django_template_demo的项目:

Django学习路线之Django自带模板语言DTL_django

再建一个名为book的app:

Django学习路线之Django自带模板语言DTL_django_02

在urls.py里导入include,并在urlpatterns里添加映射 :

Django学习路线之Django自带模板语言DTL_html_03

在book里新建urls.py并添加代码:

from django.urls import path
from . import views

urlpatterns = [
    path("", views.index)
]

然后在book的views.py里添加页面:

from django.shortcuts import render
from django.http import HttpResponse

# Create your views here.
def index(request):
    return HttpResponse("图书首页")

添加runserver后,运行manage.py:

Django学习路线之Django自带模板语言DTL_python_04

开启服务:

Django学习路线之Django自带模板语言DTL_python_05

效果如下:

Django学习路线之Django自带模板语言DTL_html_06

到这里,就算是对上一篇文章的复习,下面我们来看一下怎么让HttpResponse返回一个前端页面首先在项目下新建一个名为templates的文件夹,在该文件夹下存放我们的静态页面:

Django学习路线之Django自带模板语言DTL_DTL_07

简单写一个前端页面:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

用户名:<input name="username" type="text">

</body>
</html>

接下来怎么让前端页面显示呢?下面就是渲染模板的内容

渲染模板

渲染模板有多种方式,下面是两种常用的方式

render_to_string

在book下的views.py里导入库:

from django.template.loader import render_to_string

并让HttpResponse返回前端页面:

def index(request):
    html = render_to_string("index.html")

    return HttpResponse(html)

下面我们先尝试运行一下:

Django学习路线之Django自带模板语言DTL_html_08

这时发现报错了,看一下报错信息,应该是配置出现了问题,下面我们到settings.py里:

Django学习路线之Django自带模板语言DTL_django_09

找到TEMPLATES里的DIRS,可以看到这块是空的,下面我们补充一下:

'DIRS': [os.path.join(BASE_DIR,'templates')]

刷新页面:

Django学习路线之Django自带模板语言DTL_DTL_10

这句话有什么用呢?我们来打印一下:

Django学习路线之Django自带模板语言DTL_python_11

输出的路径是存放前端代码的文件夹的路径,也就是说,添加上这段代码后,将会从提供的路径下找到对应的前端页面

而BASE_DIR是当前项目的地址

该方式是将模板编译后渲染成Python的字符串格式,最后再通HttpResponse类包装成一个HttpResponse对象返回回去

当然,这个方法还不是最简单的,下面看一下render方法:

render

这个render模块在新建app时是自动导入的:

Django学习路线之Django自带模板语言DTL_html_12

来看一下它的源码:

Django学习路线之Django自带模板语言DTL_python_13

可以看到,它返回的其实还是HttpResponse,第一个参数是request,第二个参数是模板:

from django.shortcuts import render

# Create your views here.
def index(request):
    # html = render_to_string("index.html")

    return render(request,"index.html")

效果如下:

Django学习路线之Django自带模板语言DTL_django_14

render直接将模板渲染成字符串和包装成HttpResponse对象一步到位完成

模板查找路径配置

在项目的settings.py文件中,有一个TEMPLATES配置，这个配置包含了模板引擎的配置，模板查找路径的配置，模板上下文的配置等

模板路径配置

1.DIRS

这是一个列表，在这个列表中可以存放所有的模板路径，以后在视图中使用render或者render_to_string渲染模板的时候，会在这个列表的路径中查找模板

下面我们试一试在项目外创建静态文件存放的文件夹:

Django学习路线之Django自带模板语言DTL_HTML_15

下面补充一下HTML代码:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>该静态页面的路径为D:\Envs\temptales</h1>
</body>
</html>

修改DIRS里的地址为D:\Envs\temptales:

'DIRS': [r"D:\Envs\temptales"], #os.path.join(BASE_DIR,'templates')

效果如下:

Django学习路线之Django自带模板语言DTL_python_16

经过验证,DIRS里的地址不一定是项目里的静态页面,也可以项目外的,只要路径写对即可,但是一般都不会把模板路径写在项目外

2.APP_DIRS

默认为True，这个设置为True后，会在INSTALLED_APPS的安装了的APP下的templates文件加中查找模板

settings.py中INSTALLED_APPS数组中添加你的app名字

先在book这个app下新建一个templates文件夹,并新建一个前端页面:

Django学习路线之Django自带模板语言DTL_python_17

把DIRS里的地址删掉,在INSTALLED_APPS列表里写上app的名字:

Django学习路线之Django自带模板语言DTL_html_18

这样就算安装成功了,重启一下查看效果:

Django学习路线之Django自带模板语言DTL_DTL_19

查找顺序

比如代码render(‘list.html’)

先会在DIRS这个列表中依次查找路径下有没有这个模板，如果有，就返回。

如果DIRS列表中所有的路径都没有找到，那么会先检查当前这个视图所处的app是否已经安装，如果已经安装了，那么就先在当前这个app下的templates文件夹中查找模板，如果没有找到，那么会在其他已经安装了的app中查找。

如果所有路径下都没有找到，那么会抛出一个TemplateDoesNotExist的异常。

2. 模板变量

前面讲的内容还只是传静态页面,在实际项目中,会经常要把数据库查询到的内容显示在页面中,这时就需要传参

模板中可以包含变量，Django在渲染模板的时候，可以传递变量对应的值过去进行替换。

变量的命名规范和Python非常类似，只能是阿拉伯数字和英文字符以及下划线的组合，不能出现标点符号等特殊字符。

变量需要通过视图函数渲染，视图函数在使用render或者render_to_string的时候可以传递一个context的参数，这个参数是一个字典类型:

book\views.py:

def index(request):
    content = {"name":"zbp"}
    html = render_to_string("index.html", context=content)

    return HttpResponse(html)

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>这是book下的前端界面</h1>
    <h2>{{ name }}</h2>
</body>
</html>

在HTML文件里的变动主要是加上这句话:{{ name }},这里要注意的是,要用两个花括号,并且python字典的取值是键值对,因此里面直接写字典{“key”:value}里的key即可:

Django学习路线之Django自带模板语言DTL_django_20

如果这是一个嵌套字典:

content = {"name":{"zbp":20}}

那么可以用点的形式取值:

<h2>{{ name.zbp }}</h2>

效果如下:

Django学习路线之Django自带模板语言DTL_python_21

如果嵌套的是列表:

content = {
     'persons':[
         'a',
         'b',
         'c'
     ]
 }

也需要用点的形式取值:

<h2>{{ persons.0 }}</h2>

效果如下:

Django学习路线之Django自带模板语言DTL_DTL_22

另外,元组、对象都是可以的,唯一不能上传的是集合

通过以上的例子,我们可以有下面的总结,模板是按照以下方式进行解析的：

如果person是一个字典，那么就会查找这个字典的username这个key对应的值。
如果person是一个对象，那么就会查找这个对象的username属性，或者是username这个方法。
如果出现的是person.1，会判断persons是否是一个列表或者元组或者任意的可以通过下标访问的对象,
如果是的话就取这个列表的第1个值。如果不是就获取到的是一个空的字符串。

注意:

不能通过中括号的形式访问字典和列表中的值，比如dict[‘key’]和list[1]是不支持的！

因为使用点（.）语法获取对象值的时候，可以获取这个对象的属性，如果这个对象是一个字典，也可以获取这个字典的值。所以在给这个字典添加key的时候，千万不能和字典中的一些属性重复。比如items，items是字典的方法，那么如果给这个字典添加一个items作为key，那么以后就不能再通过item来访问这个字典的键值对了

3. 模板标签

Django学习路线之Django自带模板语言DTL_django_23

新建一个book.html页面:

Django学习路线之Django自带模板语言DTL_DTL_24

下面一起来看一下常用标签:

if标签

if标签相当于Python中的if语句，有elif和else相对应，但是所有的标签都需要用标签符号（{%%}）进行包裹。

if标签中可以使用==、!=、<、<=、>、>=、in、not in、is、is not等判断运算符。

在book\views.py里传content:

def book(request):
    content = {
        'age':18
    }
    return render(request,"book.html",context=content)

来到book.html添加{% if %}语句,另外,每次这样敲很麻烦,在pycharm里可以快速添加并补全语句

进入编辑器的设置页面,在Editor下找到Live Templates:

Django学习路线之Django自带模板语言DTL_html_25

选中html后,再点击右边的加号:

Django学习路线之Django自带模板语言DTL_HTML_26

进行如下配置后:

Django学习路线之Django自带模板语言DTL_python_27

先点Define,选中HTML:

Django学习路线之Django自带模板语言DTL_django_28

再点Apply,然后OK

接下来回到编辑器里输入if,再按Tab键即可自动补全:

{% if %}
{% endif %}

需要注意的是,跟python的if语句不同,这里的if标签是需要闭合的

补充一下book.html的代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>book</title>
</head>
<body>
    <h3>book页面</h3>
    {% if age > 18 %}
        <p>您是成年人了</p>
    {% elif age == 18 %}
        <p>您刚满18岁</p>
    {% else %}
        <p>您是未成年人</p>
    {% endif %}

</body>
</html>

刷新页面看下效果:

Django学习路线之Django自带模板语言DTL_python_29

因为传入的是18,所以第二条语句成立如果把闭合标签{% endif %}去掉:

Django学习路线之Django自带模板语言DTL_html_30

没有闭合标签,会直接报错

下面试一下判断列表里的元素:

book\views.py:

def book(request):
    content = {
        'age':18,
        'book':[
            'a',
            'b',
            'c',
            'd'
        ]
    }
    return render(request,"book.html",context=content)

把book.html里的条件改成:

{% if "a" in book %}
        <p>a书在列表中</p>
    {% else %}
        <p>a书不在列表中</p>
    {% endif %}

来看一下效果,很明显,a是在列表中的,第一个条件成立:

Django学习路线之Django自带模板语言DTL_HTML_31

另外,用in的时候会判断类型是否相同，如果类型不相同也会判定不在列表里面

for...in...标签

for…in…类似于Python中的for…in…

可以遍历列表、元组、字符串、字典等一切可以遍历的对象

下面我们遍历一下books:

book\views.py:

def book(request):
    content = {
        'age':18,
        'books':[
            'a',
            'b',
            'c',
            'd'
        ]
    }
    return render(request,"book.html",context=content)

book.html:

{% for book in books %}
    <p>{{ book }}</p>
{% endfor %}

看一下效果:

Django学习路线之Django自带模板语言DTL_DTL_32

如果是在列表中,加一个reversed便可以反向遍历:

# 反向遍历
{% for book in books reversed %}
    <p>{{ book }}</p>
{% endfor %}

Django学习路线之Django自带模板语言DTL_django_33

下面我们看一下遍历字典,给content加一些内容:

book\views.py:

def book(request):
    content = {
        'age':18,
        'books':[
            'a',
            'b',
            'c',
            'd'
        ],
        'persons':{
            'name':'zbp',
            'age':20
        }
    }
    return render(request,"book.html",context=content)

遍历这个persons:

{% for person in persons %}
        <p>{{ person }}</p>
    {% endfor %}

这样写,取出来的是key:

Django学习路线之Django自带模板语言DTL_DTL_34

要想取value,就要这样写:

{% for person in persons.values %}
        <p>{{ person }}</p>
    {% endfor %}

效果如下:

Django学习路线之Django自带模板语言DTL_html_35

因此,我们也可以这样写:

{% for key,value in persons.items %}
        <p>{{ key }}</p>
        <p>{{ value }}</p>
    {% endfor %}

效果如下:

Django学习路线之Django自带模板语言DTL_DTL_36

在DTL中，执行一个方法不能使用圆括号的形式

在for循环中，DTL提供了一些变量可供使用:

forloop.counter
当前循环的下标。以1作为起始值。
forloop.counter0
当前循环的下标。以0作为起始值。
forloop.revcounter
当前循环的反向下标值。比如列表有5个元素，那么第一次遍历这个属性是等于5，第二次是4，以此类推。并且是以1作为最后一个元素的下标。
forloop.revcounter0
类似于forloop.revcounter。不同的是最后一个元素的下标是从0开始。
forloop.first
是否是第一次遍历。
forloop.last
是否是最后一次遍历。
forloop.parentloop
如果有多个循环嵌套，那么这个属性代表的是上一级的for循环。

举个例子:

<ul>
    {% for key,value in persons.items %}
        <li>{{ forloop.counter }}-key:{{ key }}    value:{{ value }}</li>
    {% endfor %}
</ul>

效果如下:

Django学习路线之Django自带模板语言DTL_html_37

当然可以结合if标签,当循环的次数不同时,使用不同的标签:

<ul>
    {% for key,value in persons.items %}
        {% if forloop.first %}
            <h1><li>{{ forloop.counter }}-key:{{ key }}    value:{{ value }}</li></h1>
        {% elif forloop.last %}
            <h2><li>{{ forloop.counter }}-key:{{ key }}    value:{{ value }}</li></h2>
        {% else %}
            <li>{{ forloop.counter }}-key:{{ key }}    value:{{ value }}</li>
        {% endif %}
    {% endfor %}
</ul>

效果如下:

Django学习路线之Django自带模板语言DTL_HTML_38

for...in...empty标签

这个标签使用跟for…in…是一样的，只不过是在遍历的对象如果没有元素的情况下，会执行empty中的内容

{% for person in persons %}
    <li>{{ person }}</li>
{% empty %}
    暂时还没有任何人
{% endfor %}

注意:在for循环中，break，continue语句是用不了的。

url标签

在模版中，我们经常要写一些url，比如某个a标签中需要定义href属性。当然如果通过硬编码的方式直接将这个url写死在里面也是可以的。

但是这样对于以后项目维护可能不是一件好事。因此建议使用这种反转的方式来实现，类似于django中的reverse一样。

下面我们新建一个名为front的app:

Django学习路线之Django自带模板语言DTL_html_39

在这一app里实现页面跳转的功能还是老样子,进行一些常规配置:

Django学习路线之Django自带模板语言DTL_django_40

Django学习路线之Django自带模板语言DTL_python_41

在settings.py里添加front这个app:

Django学习路线之Django自带模板语言DTL_python_42

剩下的基本都是常规操作了,这里就不多说了

因为要实现跳转,我们在front\views.py里多写几个视图函数:

def index(request):
    return render(request,"index.html")

def move(request):
    return render(request,"move.html")

def book(request):
    return render(request,"book.html")

并创建相关的html文件:

Django学习路线之Django自带模板语言DTL_html_43

再到front\urls.py做渲染:

from django.urls import path
from . import views

urlpatterns = [
    path("",views.index),
    path("move/",views.move),
    path("book/",views.book),
]

接下来我们在index.html里慢慢完善:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h3>这是front首页</h3>
    <ul>
        <li><a href="">电影首页</a></li>
        <li><a href="">图书首页</a></li>
    </ul>
</body>
</html>

先不放具体链接,看看效果:

Django学习路线之Django自带模板语言DTL_html_44

其实可以像这样把它写死,从而实现跳转的功能:

<ul>
        <li><a href="move/">电影首页</a></li>
        <li><a href="book/">图书首页</a></li>
    </ul>

但是,这样一来,需要修改时,会变得很麻烦

上面学过的东西不能白学,在front\views.py里给一个name:

urlpatterns = [
    path("",views.index),
    path("move/",views.move,name='move'),
    path("book/",views.book,name='book'),
]

回到index.html:

<h3>这是front首页</h3>
    <ul>
        <li><a href="{% url 'move' %}">电影首页</a></li>
        <li><a href="{% url 'book' %}">图书首页</a></li>
    </ul>

url标签后跟上name的名字

刷新一下,试一下效果:

Django学习路线之Django自带模板语言DTL_html_45

点击对应文字后,会自动跳转到对应页面:

Django学习路线之Django自带模板语言DTL_python_46

这里特别要注意的是,一定要先取名字,否则会报错:

Django学习路线之Django自带模板语言DTL_django_47

下面我们加深一下内容,新建电影播放界面,并且传个默认参数1:

index.html:

<h3>这是front首页</h3>
    <ul>
        <li><a href="{% url 'move' %}">电影首页</a></li>
        <li><a href="{% url 'move_play' 1 %}">电影播放界面</a></li>
        <li><a href="{% url 'book' %}">图书首页</a></li>
    </ul>

front\views.py:

def move_play(request, mid):
    print("电影播放页面-{}".format(mid))
    content = {
        'c':"电影播放页面-{}".format(mid)
    }
    return render(request,"move_play.html",context=content)

front\urls.py:

from django.urls import path
from . import views

urlpatterns = [
    path("",views.index),
    path("move/",views.move,name='move'),
    path("move/move_play/<int:mid>",views.move_play,name='move_play'),
    path("book/",views.book,name='book'),
]

可以看到是成功的,效果如下:

Django学习路线之Django自带模板语言DTL_html_48

另外,app多的时候,可能会出现同名的页面,因此我们可以在前面加上app的名字

index.html:

<h3>这是front首页</h3>
    <ul>
        <li><a href="{% url 'front:move' %}">电影首页</a></li>
        <li><a href="{% url 'front:move_play' 1 %}">电影播放界面</a></li>
        <li><a href="{% url 'front:book' %}">图书首页</a></li>
    </ul>

如果url反转的时候需要传递参数，那么可以在后面传递。但是参数分位置参数和关键字参数。位置参数和关键字参数不能同时使用。

# path部分
path('detail/<book_id>/',views.book_detail,name='detail')

# url反转，使用位置参数
<a href="{% url 'book:detail' 1 %}">图书详情页面</a>

# url反转，使用关键字参数
<a href="{% url 'book:detail' book_id=1 %}">图书详情页面</a>

如果想要在使用url标签反转的时候要传递查询字符串的参数，那么必须要手动在在后面添加:

<a href="{% url 'book:detail' book_id=1 %}?page=1">图书详情页面</a>

如果需要传递多个参数，那么通过空格的方式进行分隔:

<a href="{% url 'book:detail' book_id=1 page=2 %}">图书详情页面</a>

4. 模板过滤器

在模版中，有时候需要对一些数据进行处理以后才能使用。一般在Python中我们是通过函数的形式来完成的。而在模版中，则是通过过滤器来实现的。

过滤器通过|来使用

接下来我们在front\templates\move.html中编写一些常见的过滤器

add

将传进来的参数添加到原来的值上面。这个过滤器会尝试将值和参数转换成整形然后进行相加。如果转换成整形过程中失败了，那么会将值和参数进行拼接。

如果是字符串，那么会拼接成字符串，如果是列表，那么会拼接成一个列表。

front\views.py:

def move(request):
    content = {
        'value':2
    }
    return render(request,"move.html",context=content)

front\templates\move.html:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h3>这是电影首页</h3>
    <h3>{{ value|add:"2" }}</h3>

</body>
</html>

效果如下:

Django学习路线之Django自带模板语言DTL_python_49

看到这里,可能有些读者会有疑问,明明两个数据类型是不一样的,可为什么还能相加呢?

下面我们回到front\views.py,来看一下源码:

from django.template import defaultfilters,defaulttags

导入这两个库,然后按住Ctrl,鼠标点击defaultfilters,并在左侧找到add:

Django学习路线之Django自带模板语言DTL_DTL_50

可以看到这里做了异常处理,看到源码后,你知道原因了吧?

如果value是等于一个普通的字符串，比如abc，那么结果将是abc2

cut

移除值中所有指定的字符串,类似于python中的replace(args,"")

front\views.py:

content = {
        'value':2,
        'value1':'Hello World!'
    }

move.html:

<h3>{{ value1|cut:" " }}</h3>

效果如下:

Django学习路线之Django自带模板语言DTL_HTML_51

可以看到空格没有了cut的源码也可以找到:

Django学习路线之Django自带模板语言DTL_html_52

date

过滤器的使用方法其实都是一样的,有上面两个操作实例后,下面就不详细讲解操作步骤了

date能将一个日期按照指定的格式，格式化成字符串

# views.py
context = {
    "birthday": datetime.now()
}

# move.html:
{{ birthday|date:"Y/m/d" }}

这里使用反斜线或者横杠都是可以的

Django学习路线之Django自带模板语言DTL_django_53

Y代表的是四位数字的年份
m代表的是两位数字的月份
d代表的是两位数字的日。

这里用一个表格展示其他的用法:

格式字符	描述	实例
Y	四位数字的年份	2018
m	两位数字的月份	01-12
n	月份，1-9前面没有0前缀	1-12
d	两位数字的天	01-31
j	天，但是1-9前面没有0前缀	1-31
g	小时，12小时格式的，1-9前面没有0前缀	1-12
h	小时，12小时格式的，1-9前面有0前缀	01-12
G	小时，24小时格式的，1-9前面没有0前缀	1-23
H	小时，24小时格式的，1-9前面有0前缀	01-23
i	分钟，1-9前面有0前缀	00-59
s	秒，1-9前面有0前缀	00-59

default

如果值被评估为False。比如[]，""，None，{}等这些在if判断中为False的值，都会使用default过滤器提供的默认值。

{{ value|default:"nothing" }}

如果value是等于一个空的字符串。比如""，那么以上代码将会输出nothing。

first

返回列表/元组/字符串中的第一个元素。

{{ value|first }}

如果value是等于[‘a’,‘b’,‘c’]，那么输出将会是a。

last

返回列表/元组/字符串中的最后一个元素。

{{ value|last }}

如果value是等于[‘a’,‘b’,‘c’]，那么输出将会是c。

floatformat

使用四舍五入的方式格式化一个浮点类型。如果这个过滤器没有传递任何参数。那么只会在小数点后保留一个小数，如果小数后面全是0，那么只会保留整数。当然也可以传递一个参数，标识具体要保留几个小数。

<li>{{ 34.32|floatformat }}</li>        34.3
<li>{{ 34.35|floatformat }}</li>        34.4
<li>{{ 34.353333|floatformat:3}}</li>   34.353

join

类似与Python中的join，将列表/元组/字符串用指定的字符进行拼接.

{{ value|join:"/" }}

如果value是等于[‘a’,‘b’,‘c’]，那么以上代码将输出a/b/c。

需要注意的是,这里并不是直接将两个字符串拼接在一起:

如果value是等于[‘abc’]，那么以上代码也将输出a/b/c。

length

获取一个列表/元组/字符串/字典的长度。

{{ value|length }}

如果value是等于[‘a’,‘b’,‘c’]，那么以上代码将输出3。如果value为None，那么以上将返回0。

lower

将值中所有的字符全部转换成小写。

{{ value|lower }}

如果value是等于Hello World。那么以上代码将输出hello world。

upper

类似于lower，只不过是将指定的字符串全部转换成大写。

random

在被给的列表/字符串/元组中随机的选择一个值。

{{ value|random }}

如果value是等于[‘a’,‘b’,‘c’]，那么以上代码会在列表中随机选择一个。

safe

标记一个字符串是安全的。也即会关掉这个字符串的自动转义。

{{value|safe}}

如果value是一个不包含任何特殊字符的字符串，比如这种，那么以上代码就会把字符串正常的输入。

如果value是一串html代码，那么以上代码将会把这个html代码渲染到浏览器中。

slice

类似于Python中的切片操作。

{{ some_list|slice:"2:" }}

以上代码将会给some_list从2开始做切片操作。

striptags

删除字符串中所有的html标签。

{{ value|striptags }}

如果value是< b > hello world < /b >，那么以上代码将会输出hello world。

truncatechars

如果给定的字符串长度超过了过滤器指定的长度。那么就会进行切割，并且会拼接三个点来作为省略号。

{{ value|truncatechars:5 }}

如果value是等于北京欢迎你，那么输出的结果是北京欢迎你。如果长度大于5，会截取到长度为4的位置，后面用…来代替

另外,一个英文字母也算一个字符,所以不用担心中英文的问题

更多过滤器可以查看Django源码：

from django.template import defaultfilters,defaulttags

5. 模板结构优化

引入模版

有时候一些代码是在许多模版中都用到的。如果我们每次都重复的去拷贝代码那肯定不符合项目的规范。一般我们可以把这些重复性的代码抽取出来，就类似于Python中的函数一样，以后想要使用这些代码的时候，就通过include包含进来。这个标签就是include。

下面我们新建一个header.html:

Django学习路线之Django自带模板语言DTL_DTL_54

在move.html里添加如下代码:

{% include 'header.html' %}

Django学习路线之Django自带模板语言DTL_HTML_55

效果如下:

Django学习路线之Django自带模板语言DTL_html_56

include标签寻找路径的方式。也是跟render渲染模板的函数是一样的。

默认include标签包含模版，会自动的使用主模版中的上下文，也即可以自动的使用主模版中的变量。如果想传入一些其他的参数，那么可以使用with语句:

# header.html
<p>用户名：{{ username }}</p>

# move.html
{% include "header.html" with username='zbp' %}

效果如下:

Django学习路线之Django自带模板语言DTL_django_57

模版继承

在前端页面开发中。有些代码是需要重复使用的。这种情况可以使用include标签来实现。也可以使用另外一个比较强大的方式来实现，那就是模版继承。

模版继承类似于Python中的类，在父类中可以先定义好一些变量和方法，然后在子类中实现。模版继承也可以在父模版中先定义好一些子模版需要用到的代码，然后子模版直接继承就可以了。并且因为子模版肯定有自己的不同代码，因此可以在父模版中定义一个block接口，然后子模版再去实现。

下面新建一个模版并取名为base.html，定义好一个简单的html骨架，然后定义好两个block接口，让子模版来根据具体需求来实现:

base.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="sidebar">
        {% block sidebar %}
        <h3>边框</h3>
        {% endblock %}
    </div>
    <div id="content">
        {% block content %}
        <h3>内容</h3>
        {% endblock %}
    </div>
</body>
</html>

子模板然后通过extends标签来实现:

move.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    {% extends "base.html" %}

    {% block sidebar %}
    博客列表
    {% endblock %}

    {% block content %}
    博客内容
    {% endblock %}
</body>
</html>

move是base的子类,效果如下:

Django学习路线之Django自带模板语言DTL_python_58

需要注意的是：extends标签必须放在模版的第一行。

子模板中的代码必须放在block中，否则将不会被渲染。

如果在某个block中需要使用父模版的内容，那么可以使用{{block.super}}来继承。比如上例，{%block content%}，如果想要使用父模版的title，那么可以在子模版的content block中使用{{ block.super }}来实现:

Django学习路线之Django自带模板语言DTL_HTML_59

效果如下:

Django学习路线之Django自带模板语言DTL_html_60

在定义block的时候，除了在block开始的地方定义这个block的名字，还可以在block结束的时候定义名字。比如{% block title %}{% endblock title %}。这在大型模版中显得尤其有用，能让你快速的看到block包含在哪里。

6. 加载静态文件

在一个网页中，不仅仅只有一个html骨架，还需要css样式文件，js执行文件以及一些图片等才能做出效果比较好看的页面。

因此在DTL中加载静态文件是一个必须要解决的问题。在DTL中，使用static标签来加载静态文件。要使用static标签，首先需要{% load static %}。加载静态文件的步骤如下：

1.基础配置

首先确保django.contrib.staticfiles已经添加到settings.INSTALLED_APPS中:

Django学习路线之Django自带模板语言DTL_html_61

其实这里一般都是默认配置好了的另外,还需要确保在settings.py中设置了STATIC_URL:

Django学习路线之Django自带模板语言DTL_django_62

这里也是默认配置好了的:

https://docs.djangoproject.com/en/3.0/howto/static-files/

2.配置static文件夹

在已经安装了的app下创建一个文件夹叫做static，然后再在这个static文件夹下创建一个当前app的名字的文件夹，再把静态文件放到这个文件夹下

例如:
我的app叫做book，有一个静态文件叫做logo.jpg，那么路径为:

book/static/book/logo.jpg

为什么在app下创建一个static文件夹，还需要在这个static下创建一个同app名字的文件夹呢？

原因是如果直接把静态文件放在static文件夹下，那么在模版加载静态文件的时候就是使用logo.jpg，如果在多个app之间有同名的静态文件，这时候可能就会产生混淆。而在static文件夹下加了一个同名app文件夹，在模版中加载的时候就是使用app/logo.jpg，这样就可以避免产生混淆。

如果有一些静态文件是不和任何app挂钩的。那么可以在settings.py中添加STATICFILES_DIRS，以后DTL就会在这个列表的路径中查找静态文件。比如可以设置为:

STATICFILES_DIRS = [
     os.path.join(BASE_DIR,"static")
 ]

3.使用load标签加载static标签

比如要加载在项目的static文件夹下的style.css的文件:

{% load static %}
 <link rel="stylesheet" href="{% static 'style.css' %}">

如果不想每次在模版中加载静态文件都使用load加载static标签，那么可以在settings.py中的TEMPLATES/OPTIONS添加:

‘builtins’:[‘django.templatetags.static’]

这样以后在模版中就可以直接使用static标签，而不用手动的load了。

如果没有在settings.INSTALLED_APPS中添加django.contrib.staticfiles。
那么我们就需要手动的将请求静态文件的url与静态文件的路径进行映射了:

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    # 其他的url映射
] + static(settings.STATIC_URL, document_root=settings.STATICFILES_DIRS[0])

下面来实操一下,先写个最简单的css文件:

Django学习路线之Django自带模板语言DTL_django_63

给body定义一个背景颜色:

move.html:

{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <link rel="stylesheet" href="{% static 'front.css' %}">
</head>
<body>
    <h3>电影首页</h3>
</body>
</html>

效果如下:

Django学习路线之Django自带模板语言DTL_DTL_64

下面试着添加一张图片,首先先在static文件夹下放一张图片:

Django学习路线之Django自带模板语言DTL_django_65

在move.html添加图片:

<body>
    <h3>电影首页</h3>
    <img src = "{% static 'zbp.jpg' %}">
</body>

效果如下:

Django学习路线之Django自带模板语言DTL_DTL_66

上一篇：Django学习路线之MySQL驱动安装及简单连接(文末附简单图书管理系统实例)

下一篇：基于Python的数据清洗常用工具

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯