HTML之上下文与模板调用_html通过上下文引用文件-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44659258/article/details/104874076

本文介绍了HTML模板的工作原理，包括上下文的使用和模板的调用过程。详细讲解了模板层的基础语法，如参数输出、循环语句和判断语句的实现。此外，还探讨了如何获取视图函数的地址以及应用模板过滤器来修饰数据。最后，讨论了模板的复用，通过模板继承和block提取实现代码复用和定制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上下文与模板调用

模板的原理
模板的调用
模板的传参

模板的原理

在templates,建立HTML文件
在views下函数内添加返回参数，添加返回模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    hello templates
    <br/>
    用户名：{{username}}
    <br/>
    密码：{{password}}
</body>
</html>

def index_handler(request):
    context={
        'username':'name1',
        'password':'pass1'
    }
    return render(request,'index.html',context)

模板层基础语法

参数输出

views中建立函数模板

def t1_handler(request):
    context={
        'key1':'value',
        'key2':['value1','value2'],
        'key3':{
            'key3_1':'value3_1',
            'key3_2':'value3_2'
        }
    }
    return render(request,'t1.html',context)

templates中建立html输出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>t1</title>
</head>
<body>
{# 1. 普通值获取 #}
{{ key1 }}
<br/>
{# 2. 列表值获取 #}
{{ key2.0 }} {{ key2.1 }}
<br/>
{# 3. 字典值获取 #}
{{ key3.key3_1 }} {{ key3.key3_2 }}
</body>
</html>

循环语句

views中建立函数模板

def t2_handler(request):
    context={
        'hobbys':['Python','C','Java']
    }
    return render(request,'t2.html',context)

templates中建立html输出模板循环语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>t2</title>
</head>
<body>
{#对列表值进行遍历获取  #}
{% for hobby in hobbys %}
    爱好：{{ hobby }}<br/>
{% endfor %}

</body>
</html>

判断语句

views中建立函数模板


def t3_handler(request):
    context={
        'message':'这是一个提示信息，根据style来决定颜色',
        'style':1,
    }
    return render(request,'t3.html',context)

templates中建立html输出模板判断语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>t3</title>
</head>
<body>
{# 根据函数信息改变，判断语句 #}
{% if style == 0  %}
    <span style="color: red">{{ message }}</span>
{% elif style == 1 %}
    <span style="color: blue">{{ message }}</span>
{% else %}
<span style="color: green">{{ message }}</span>
{% endif %}

</body>
</html>

得到视图函数的地址

views中建立函数模板

def t4_handler(request):
    return render(request,'t4.html')

templates中建立html输出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>t4</title>
</head>
<body>
commen中:
<ul>
    <li>
        index_handler的地址是：{% url 'commen:index' %}
    </li>
    <li>
        re_handler的地址是：{% url 'commen:re' 1 %}
    </li>
</ul>
</body>
</html>

模板过滤器

过滤器的语法
功能：把模板中对传递过来的数据进行修饰，在进行显示
语法：{{变量|过滤器关键字:参数}}
注：如果没有参数传递，可以不写
常用过滤器的使用

关键字	说明
safe	禁止HTML转义
length	长度
date	日期（Y-m-d H:i:s）
default	默认值（变量
upper	转大写
lower	转小写

多个过滤器配合：
{{变量|过滤器1|过滤器2}}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>t5</title>
</head>
<body>
原样输出：
<ul>
    <li>html_code:{{ html_code}}</li>
    <li>datetime:{{ datetime }}</li>
</ul>
过滤器：（格式：变量|过滤器：参数）
<ul>
    <li>safe禁止转义：{{ html_code|safe }}</li>
    <li>length:{{ html_code|length }}</li>
    <li>date输出日期：{{ datetime|date:'Y-m-d H:i:s' }}</li>
    <li>default默认值：{{ style|default:'默认值' }}</li>
    <li>upper转大写：{{ html_code|upper }}</li>
    <li>lower转小写：{{ html_code|lower }}</li>
    <li>多个过滤器：{{ html_code|lower|safe }}</li>
</ul>

</body>
</html>

模板复用与block提取

模板继承
{%extends"父模板路径"%}
block块定于与重写
{%block代码块名称%}

{%endblock%}
注：调用父模板中的代码：{{block.super}}

{% extends 'base.html' %}
{% block article %}
    重写内容
    {{ block.super }}
{% endblock %}