templates基本使用

templates

变量

语法格式

1
{{ var_name }}

变量过滤器 (filter)

语法格式

1
{{ obj|filter:param }}

常用的内置过滤器
  • add 给变量加上相应的值
  • addslashes 给变量中的引号前加上斜线
  • capfirst 首字母大写
  • cut 从字符串中移除指定的字符
  • date 格式化日期字符串
  • default 如果值是False,就替换成设置的默认值,否则就是用本来的值
  • default_if_none 如果值是None,就替换成设置的默认值,否则就使用本来的值
实例

views.py定义日期变量

1
2
3
test = 'te st'
import datetime
d = datetime.datetime.now()

login.html 使用

1
2
{{ test | cut:' ' }}
{{ d|date:'Y-m-d' }}

标签

语法格式

1
{%tags%}

  • if

    1
    {%if%}	{%endif%}
  • for

    1
    {%for%}	{%endfor%}
实例
1
2
3
4
5
6
7
8
{% for item in obj_li %}
<div>
{% if item.username == 'test' %}
<span>{{ item.username }}</span>
<span>{{ item.password }}</span>
{% endif %}
</div>
{% endfor %}

其实现的效果和 python 中的 iffor 效果类似。

自定义标签

内置方法无法满足需求,可以通过自定义过滤器和标签方式满足需求。

  1. 应用 demo 中新建 package ,名称为 templatetags
  2. 新建 python 文件,可任意命名(my_tag.py 示例)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    from django.template import library

    register = library() # 必须实例化,对象名称为 register


    @register.filter
    def filter_func(x,y):
    return x+y

    @register.simple_tag
    def simple_tag(t):
    return '2018-08-18'
  3. 在项目 settings.py 的 INSTALL_APPS 添加对应的应用名称(已注册不需要添加)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'demo.apps.DemoConfig',
    ]
  4. 在 login.html 文件中引入

    1
    2
    3
    4
    {% load my_tag %}
    <p>{{ test | filter_func:'666' }}</p> # 自定义过滤器

    {% filter_tag 'a' 'b' 'c' 'd' %} # 自定义标签
引入静态文件

引入 jquery 为示例

  1. 在应用 demo 中新建 static/js 文件夹,放入对应的文件
  2. 在项目的 settings.py 文件中添加

    1
    2
    3
    4
    STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "demo/static/"), # 注意逗号
    # [os.path.join(BASE_DIR, "static/")]
    )
  3. 在 demo/login.html 文件中添加

1
{% load staticfiles %}

注意:添加在 html 页面顶部

1
<script src="{% static 'js/jquery-1.8.3.min.js' %}"></script>

注意:<script> 标签在 <head></head>标签中间

继承

所有页面风格比较一致,例如导航栏、侧面栏等都一致,只有其他部分不一致。可以将导航栏和侧面栏作为模板页,其他页面继承。

模板标签

语法格式

1
{% block %}

使用
  1. 模板页使用 block 标识需要载入子页面的位置
  2. 子页面使用 extends 继承模板页,然后在 block 标识内添加子页面的内容
    实例
    模板页 base.html
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    {% load staticfiles %}
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="{% static 'js/jquery-1.8.3.min.js' %}"></script>
    </head>
    <body>
    <h1>我是顶部</h1>

    <div>
    {% block content %}

    {% endblock %}

    </div>
    </body>
    </html>

子页面login.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
{% extends "base.html" %}

{% block content %}
<h1>{{ a.0 }}</h1>
{% for item in obj_li %}
<div>
{% if item.username == 'test' %}
<span>{{ item.username }}</span>
<span>{{ item.password }}</span>
{% endif %}
</div>
{% endfor %}
{{ test }}
{{ test | cut:' ' }}
<br>
{{ d }}
<br>
{{ d|date:'Y-m-d' }}

{% load my_tag %}
<p>{{ test | filter_func:'666' }}</p>

{% filter_tag 'a' 'b' 'c' 'd' %}

{% endblock %}

使用最佳实践
  • 如果在模板中使用 {% extends %} ,必须保证其为模板中的第一个模板标记。 否则,模板继承将不起作用。
  • 一般来说,基础模板中的 {% block %} 标签越多越好。 记住,子模板不必定义父模板中所有的代码块,因此你可以用合理的缺省值对一些代码块进行填充,然后只对子模板所需的代码块进行(重)定义。 俗话说,钩子越多越好。
  • 如果发觉自己在多个模板之间拷贝代码,你应该考虑将该代码段放置到父模板的某个 {% block %} 中。如果你需要访问父模板中的块的内容,使用 {{ block.super }}这个标签吧,这一个魔法变量将会表现出父模板中的内容。如果只想在上级代码块基础上添加内容,而不是全部重载,该变量就显得非常有用了。
  • 不允许在同一个模板中定义多个同名的 {% block %} 。存在这样的限制是因为block 标签的工作方式是双向的。也就是说,block 标签不仅挖了一个要填的坑,也定义了在父模板中这个坑所填充的内容。如果模板中出现了两个相同名称的 {% block %} 标签,父模板将无从得知要使用哪个块的内容。

Recommended Posts