当前位置：首页 > news >正文

模板引擎语法-标签

news 来源：原创 2025/5/24 22:04:19

模板引擎语法-标签

文章目录

模板引擎语法-标签
@[toc]
一、用于进行判断的{% if-elif-else-endif %}标签
二、关于循环对象的{% for-endfor %}标签
三、关于自动转义的{% autoescape-endautoescape %}标签
四、关于循环对象的{% cycle %}标签
五、关于检查值是否变化的{% ifchange %}标签
六、关于重组对象的{% regroup %}标签
七、关于重置循环对象的{% resetcycle %}标签
八、{% url %}链接标签
九、输出模板标签字符的{% templatetag %}标签
十、关于计算比率的{% widthratio %}标签
十一、关于显示当前日期或时间的{% now %}标签

一、用于进行判断的{% if-elif-else-endif %}标签

1.编辑视图文件

文件路径【TmplSite/gramapp/views.py】

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


# Create your views here.

def index(request):
    return HttpResponse("Hello, Django! You're at the gramapp index.")

def grammar(request):
    context = {}
    context['title'] = "Django Template Grammar"
    context['gram'] = "grammar"
    context['t'] = "true"
    context['f'] = "false"
    template = loader.get_template('gramapp/grammar.html')
    return HttpResponse(template.render(context, request))

【代码分析】

代码	分析
context[‘t’] = “true”	在变量context中定义了第一个属性t，并赋值为字符串“true”
context[‘f’] = “false”	在变量context中定义了第一个属性f，并赋值为字符串“false”

2.编辑HTML模板文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/static/css/mystyle.css"/>
    <title>{{ title }}</title>
</head>
<body>

<p>
    Hello, this is a <b>{{ gram }}</b> page!
</p>
<p>
    <b>if-elif-else-endif</b><br><br>
    True:
    {% if t == 'true' %}
        This is a true condition.
    {% elif t == 'false' %}
        This is a false condition.
    {% else %}
        No condition.
    {% endif %}
    <br><br>
    False:
    {% if f == 'true' %}
        This is a true condition.
    {% elif f == 'false' %}
        This is a false condition.
    {% else %}
        No condition.
    {% endif %}
    <br><br>
    No Else:
    {% if f == 'true' %}
        This is a true condition.
    {% elif t == 'false' %}
        This is a false condition.
    {% else %}
        No condition.
    {% endif %}
    <br><br>
</p>

</body>
</html>

【代码分析】

修改的内容，分别通过标签进行选择判断，根据判断结果选择输出不同的文本信息。

3.打开FireFox浏览器访问

【http://localhost:8000/gramapp/gram/】

在这里插入图片描述

二、关于循环对象的{% for-endfor %}标签

1.编辑视图文件

文件路径【TmplSite/gramapp/views.py】

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


# Create your views here.

def index(request):
    return HttpResponse("Hello, Django! You're at the gramapp index.")

def grammar(request):
    context = {}
    context['title'] = "Django Template Grammar"
    context['gram'] = "grammar"
    context['flag'] = "odd"    # "even" or "odd"
    context['even'] = [0, 2, 4, 6, 8]
    context['odd'] = [1, 3, 5, 7, 9]
    template = loader.get_template('gramapp/grammar.html')
    return HttpResponse(template.render(context, request))

【代码分析】

在修改的内容中，在变量context中添加了第一个属性flag，并赋值为“even”；

在变量context中添加了第二个属性even,并赋值为也给偶数列表（数字10以内）；

在变量context中添加了第三个属性odd，并赋值为一个奇数列表（数字10以内）；

2.编辑HTML模板文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/static/css/mystyle.css"/>
    <title>{{ title }}</title>
</head>
<body>

<p>
    Hello, this is a <b>{{ gram }}</b> page!
</p>
<p>
    Numbers:
    <ul>
        {% if flag == 'even' %}
            {% for num in even %}
                <li>{{ num }}</li>
            {% endfor %}
        {% elif flag == 'odd' %}
            {% for num in odd %}
                <li>{{ num }}</li>
            {% endfor %}
        {% else %}
            No print.
        {% endif %}
    </ul>
</p>

</body>
</html>

【代码分析】

通过标签进行选择判断，根据判断结果选择输出奇数数列或偶数数列。

分别通过标签循环对象even和odd，输出奇数数列和偶数数列。

3.打开FireFox浏览器访问

【http://localhost:8000/gramapp/gram/】

在这里插入图片描述

三、关于自动转义的{% autoescape-endautoescape %}标签

1.编辑视图文件

文件路径【TmplSite/gramapp/views.py】

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


# Create your views here.

def index(request):
    return HttpResponse("Hello, Django! You're at the gramapp index.")

def grammar(request):
    context = {}
    context['title'] = "Django Template Grammar"
    context['gram'] = "grammar"
    context['site'] = "<a href='https://www.djangoproject.com/'>Django Home Page</a>"
    template = loader.get_template('gramapp/grammar.html')
    return HttpResponse(template.render(context, request))

【代码分析】

在变量context中添加了一个属性site，并赋值为一个超链接标签"Django Home Page"

2.编辑HTML模板文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/static/css/mystyle.css"/>
    <title>{{ title }}</title>
</head>
<body>

<p>
    Hello, this is a <b>{{ gram }}</b> page!
</p>
<p>
    Escape Site:
    <br><br>
    output site:<br>
    {{ site }}
    <br><br>
    autoescape on :<br>
    {% autoescape on %}
        {{ site }}
    {% endautoescape %}
    <br><br>
    autoescape off :<br>
    {% autoescape off %}
        {{ site }}
    {% endautoescape %}
</p>

</body>
</html>

【代码分析】

通过双大括号引用了视图定义的属性，直接在页面中进行输出；

分别通过【{% autoescape on %}】【{% endautoescape %}】自动转义标签对属性site进行打开转义操作，并在页面中进行输出；

分别通过【{% autoescape on %}】【{% endautoescape %}】自动转义标签对属性site进行关闭转义操作，并在页面中进行输出；

3.打开FireFox浏览器访问

【http://localhost:8000/gramapp/gram/】

在这里插入图片描述

四、关于循环对象的{% cycle %}标签

1.编辑视图文件

文件路径【TmplSite/gramapp/views.py】

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


# Create your views here.

def index(request):
    return HttpResponse("Hello, Django! You're at the gramapp index.")

def grammar(request):
    context = {}
    context['title'] = "Django Template Grammar"
    context['gram'] = "grammar"
    context['num'] = (0, 1, 2, 3, 4, 5, 6, 7, 8, 9)
    template = loader.get_template('gramapp/grammar.html')
    return HttpResponse(template.render(context, request))

【代码分析】

在变量context中添加了一个属性num，并赋值为一个元组类型的数组（用于计数）；

2.编辑HTML模板文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/static/css/mystyle.css"/>
    <title>{{ title }}</title>
</head>
<body>

<p>
    Hello, this is a <b>{{ gram }}</b> page!
</p>
<p class="middle">
    Cycle Obj:<br>
    {% for i in num %}
        {% cycle 'even' 'odd' %}
    {% endfor %}
</p>

</body>
</html>

【代码分析】

通过【{% cycle %}】循环对象标签对一组字符串进行循环遍历操作，并在页面中直接输出

3.打开FireFox浏览器访问

【http://localhost:8000/gramapp/gram/】

在这里插入图片描述

4.继续编辑视图文件

文件路径【TmplSite/gramapp/views.py】

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


# Create your views here.

def index(request):
    return HttpResponse("Hello, Django! You're at the gramapp index.")

def grammar(request):
    context = {}
    context['title'] = "Django Template Grammar"
    context['gram'] = "grammar"
    context['len'] = (0, 1, 2)
    template = loader.get_template('gramapp/grammar.html')
    return HttpResponse(template.render(context, request))

【代码分析】

在变量context中添加了一个属性len，并赋值为一个元组类型的数组（用于计数）；

5.继续编辑HTML模板文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/static/css/mystyle.css"/>
    <title>{{ title }}</title>
</head>
<body>

<p>
    Hello, this is a <b>{{ gram }}</b> page!
</p>
<p>
    Cycle Paragraphs:<br>
    {% for j in len %}
        <p class="{% cycle 'p-small' 'p-middle' 'p-large' %}">
            This is a cycle class test.
        </p>
    {% endfor %}
</p>

</body>
</html>

【代码分析】

通过【{% cycle %}】循环对象标签对一组CSS样式表进行循环遍历操作，这组不同的样式均内置于同一个段落标签；

6.打开FireFox浏览器访问

【http://localhost:8000/gramapp/gram/】

在这里插入图片描述

五、关于检查值是否变化的{% ifchange %}标签

1.编辑视图文件

文件路径【TmplSite/gramapp/views.py】

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


# Create your views here.

def index(request):
    return HttpResponse("Hello, Django! You're at the gramapp index.")

def grammar(request):
    context = {}
    context['title'] = "Django Template Grammar"
    context['gram'] = "grammar"
    context['num'] = (0, 1, 2, 3, 4, 5, 6, 7, 8, 9)
    context['changed'] = 'watchchange'
    template = loader.get_template('gramapp/grammar.html')
    return HttpResponse(template.render(context, request))

【代码分析】

在变量context中添加了一个属性changed，并赋值为一个字符串，用于判断内容是否改变；

2.编辑HTML模板文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/static/css/mystyle.css"/>
    <title>{{ title }}</title>
</head>
<body>

<p>
    Hello, this is a <b>{{ gram }}</b> page!
</p>
<p class="middle">
    ifchanged:<br>
    {% for n in num %}
        {% ifchanged changed %}
            {{ n }}
        {% endifchanged %}
    {% endfor %}
</p>

</body>
</html>

【代码分析】

通过【{% ifchanged-endifchanged %}】标签判断属性changed的内容是否改变；

并根据上面判断的结果来输出变量n的值；

3.打开FireFox浏览器访问

【http://localhost:8000/gramapp/gram/】

在这里插入图片描述

4.继续编辑HTML模板文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/static/css/mystyle.css"/>
    <title>{{ title }}</title>
</head>
<body>

<p>
    Hello, this is a <b>{{ gram }}</b> page!
</p>
<p class="middle">
    ifchanged:<br>
    {% for n in num %}
        {% ifchanged changed %}
            {{ n }}
        {% else %}
            {{ n }}
        {% endifchanged %}
    {% endfor %}
</p>

</body>
</html>

【代码分析】

在【{% ifchanged-endifchanged %}】标签中增加了{% else %}标签。

同样在输出变量n的值；

5.打开FireFox浏览器访问

【http://localhost:8000/gramapp/gram/】

在这里插入图片描述

六、关于重组对象的{% regroup %}标签

1.编辑视图文件

文件路径【TmplSite/gramapp/views.py】

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


# Create your views here.

def index(request):
    return HttpResponse("Hello, Django! You're at the gramapp index.")

def grammar(request):
    context = {}
    context['title'] = "Django Template Grammar"
    context['gram'] = "grammar"
    context['languages'] = [
        {'name': 'Python', 'rated': '99%', 'content': 'Prog'},
        {'name': 'Java', 'rated': '90%', 'content': 'Prog'},
        {'name': 'JavaScript', 'rated': '98%', 'content': 'Web'},
        {'name': 'PHP', 'rated': '95%', 'content': 'Web'},
        {'name': 'Django', 'rated': '96', 'content': 'Web'},
    ]
    template = loader.get_template('gramapp/grammar.html')
    return HttpResponse(template.render(context, request))

【代码分析】

在变量context中添加了一个属性languges，并赋值为一个字典类型的数组（关于几组编程语言的内容）；

2.编辑HTML模板文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/static/css/mystyle.css"/>
    <title>{{ title }}</title>
</head>
<body>

<p>
    Hello, this is a <b>{{ gram }}</b> page!
</p>
{% regroup languages by content as content_list %}
<p>
    regroup tag:<br>
    <ul>
        {% for content in content_list %}
            <li>{{ content.grouper }}
                <ul>
                    {% for lang in content.list %}
                        <li>{{ lang.name }}: {{ lang.rated }}</li>
                    {% endfor %}
                </ul>
            </li>
        {% endfor %}
    </ul>
</p>

</body>
</html>

【代码分析】

通过grouper字段来依据content属性对languages对象列表进行分组；

通过list字段来获取每一项的列表，该列表包括了languages对象中每一项的具体内容；

3.打开FireFox浏览器访问

【http://localhost:8000/gramapp/gram/】

在这里插入图片描述

七、关于重置循环对象的{% resetcycle %}标签

1.编辑视图文件

文件路径【TmplSite/gramapp/views.py】

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


# Create your views here.

def index(request):
    return HttpResponse("Hello, Django! You're at the gramapp index.")

def grammar(request):
    context = {}
    context['title'] = "Django Template Grammar"
    context['gram'] = "grammar"
    context['len'] = (0, 1, 2)
    context['len2'] = (0, 1, 2, 3)
    template = loader.get_template('gramapp/grammar.html')
    return HttpResponse(template.render(context, request))

【代码分析】

在变量context中添加了一个属性len，并赋值为一个元组类型的变量（用于第一层循环计数）；

在变量context中添加了一个属性len2，并赋值为另一个元组类型的变量（用于第二层循环计数）；

2.编辑HTML模板文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/static/css/mystyle.css"/>
    <title>{{ title }}</title>
</head>
<body>

<p>
    Hello, this is a <b>{{ gram }}</b> page!
</p>
<p>
    Cycle Numbers:<br>
    {% for i in len %}
        {% for j in len2 %}
            {% cycle '1' '2' '3' %}
        {% endfor %}
    {% endfor %}
</p>
<p>
    Resetcycle Numbers:<br>
    {% for i in len %}
        {% for j in len2 %}
            {% cycle '1' '2' '3' %}
        {% endfor %}
        {% resetcycle %}
    {% endfor %}
</p>

</body>
</html>

【代码分析】

通过{% cycle %}标签尝试在页面输出一个数字序列；

同样通过{% cycle %}标签尝试在页面输出一个数字序列；

不同之处是在27行中，通过{% resetcycle %}标签重置了第25行代码中的{% cycle %}标签。

3.打开FireFox浏览器访问

【http://localhost:8000/gramapp/gram/】

在这里插入图片描述

八、{% url %}链接标签

1.编辑HTML模板文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/static/css/mystyle.css"/>
    <title>{{ title }}</title>
</head>
<body>

<p>
    Hello, this is a <b>{{ gram }}</b> page!
</p>
<p>
    url tag:<br><br>
    <a href={% url 'index' %}>index</a><br><br>
    <a href={% url 'grammar' %}>grammar</a><br><br>
</p>

</body>
</html>

【代码分析】

通过{% url %}链接标签定义了视图index的超链接地址；

同样通过{% url %}链接标签定义了视图grammar的超链接地址；

3.打开FireFox浏览器访问

【http://localhost:8000/gramapp/gram/】

在这里插入图片描述

4.编辑路由文件

文件路径【TmplSite/gramapp/urls.py】

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='index'),
    path('gram/', views.grammar, name='grammar'),
    path('gram/<gram_id>/', views.grammar_id, name='grammar_id'),
]

【代码分析】

表示路径gram_id对应视图函数grammar_id，其中gram_id表示路径参数；

5.编辑视图文件

文件路径【TmplSite/gramapp/views.py】

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


# Create your views here.

def index(request):
    return HttpResponse("Hello, Django! You're at the gramapp index.")

def grammar(request):
    context = {}
    context['title'] = "Django Template Grammar"
    context['gram'] = "grammar"
    context['id'] = '123'
    template = loader.get_template('gramapp/grammar.html')
    return HttpResponse(template.render(context, request))

def grammar_id(request, gram_id):
    return HttpResponse("Hello, you're at the grammar %s index." % (gram_id))

【代码分析】

定义了一个视图函数grammar_id，并包括一个参数gram_id；

在变量context中添加了一个属性id，并赋值为一个字符串“123”；

6.继续编辑模板文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/static/css/mystyle.css"/>
    <title>{{ title }}</title>
</head>
<body>

<p>
    Hello, this is a <b>{{ gram }}</b> page!
</p>
<p>
    url tag:<br><br>
    <a href={% url 'grammar_id' id %}>grammar_id</a><br><br>
    <a href={% url 'grammar_id' gram_id=id %}>grammar_id(by arg1)</a><br><br>
</p>

</body>
</html>

【代码分析】

通过{% url %}链接标签定义了视图grammar_id的超链接地址，并使用了id参数；

同样通过{% url %}链接标签定义了视图grammar_id的超链接地址，在使用id参数的方式上借助了关键字参数gram_id

7.打开FireFox浏览器访问

【http://localhost:8000/gramapp/gram/】

在这里插入图片描述

九、输出模板标签字符的{% templatetag %}标签

1.编辑HTML模板文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/static/css/mystyle.css"/>
    <title>{{ title }}</title>
</head>
<body>

<p>
    Hello, this is a <b>{{ gram }}</b> page!
</p>
<p>
    templatetag openblock:<br>
    {% templatetag openblock %} {% url 'grammar' %} {% templatetag closeblock %}<br><br>
    templatetag openvariable:<br>
    {% templatetag openvariable %} {{ num }} {% templatetag closevariable %}<br><br>
    templatetag openbrace:<br>
    {% templatetag openbrace %} {{ len }} {% templatetag closebrace %}<br><br>
</p>
</body>
</html>

【代码分析】

通过{% templatetag openblock %}标签和{% templatetag closeblock %}标签在页面中输出了语法字符“{% %}”；

通过{% templatetag openvariable %}标签和{% templatetag closevariable %}标签在页面中输出了语法字符“{{ }}”；

通过{% templatetag openbrace %}标签和{% templatetag closebrace %}标签在页面中输出了语法字符“{ }”；

2.打开FireFox浏览器访问

【http://localhost:8000/gramapp/gram/】
在这里插入图片描述

十、关于计算比率的{% widthratio %}标签

1.编辑HTML模板文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/static/css/mystyle.css"/>
    <title>{{ title }}</title>
</head>
<body>

<p>
    Hello, this is a <b>{{ gram }}</b> page!
</p>
<p>
    image original:<br><br>
    <img src="/static/images/django-small.png" alt="Django">
</p>
<p>
    image widthradio:<br><br>
    <img src="/static/images/django-small.png" alt="Django" height="{% widthratio 100 50 100 %}" width="{% widthratio 180 200 100 %}">
</p>
</body>
</html>

【代码分析】

在HTML模板中显示了一幅原始图片（图片路径：“/static/images/django-small.png”）;

在HTML模板页面中通过{% widthratio %}标签将该原始图片（图片路径：“/static/images/django-samll.png”）转换为柱状图进行显示；

在图片的height属性中通过{% widthratio %}标签对图片高度尺寸进行了比率换算（100÷50×100=200）；

在图片的width属性中通过{% widthratio %}标签对图片宽度尺寸进行了比率换算（180÷200×100=90）；

2.定义根目录settings.py文件

STATIC_URL = 'static/'

STATICFILES_DIRS = [
    BASE_DIR / "static",
]

3.打开FireFox浏览器访问

【http://localhost:8000/gramapp/gram/】

在这里插入图片描述

十一、关于显示当前日期或时间的{% now %}标签

1.编辑HTML模板文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/static/css/mystyle.css"/>
    <title>{{ title }}</title>
</head>
<body>

<p>
    Hello, this is a <b>{{ gram }}</b> page!
</p>
<p>
    now tag:<br><br>
    It is {% now "jS F Y H:i" %}<br><br>
    It is the {% now "jS \o\f F Y" %}<br><br>
    It is {% now "H:i:s D Y/M/d" %}<br><br>
</p>
</body>
</html>