Django——模板

模板：django对模板文件没有特别大的限制 ， html ， txt ，没有类型的文件。

django提供一种动态生成html页面的快捷方式 ， 也就是模板。模板语言(DTL)

1、配置模板

pycharm创建django项目会自动将我们的模板templates配置好。

# django 的默认模板引擎； django也支持并且内置了
# django.template.backends.jinja2.Jinja2
'BACKEND': 'django.template.backends.django.DjangoTemplates',
DIRS : 模板引擎的路径
# 设置模板引擎是否可以进入到应用中查找设置的模板
'APP_DIRS': True,
OPTIONS： 上下文处理器。

2、模板语言

DTL：模板语言，变量 ， 注释 ， 过滤器 ， 标签 ， 模板继承……

1、变量

DTL使用{{ name }}格式来表示变量 ， 也可以调用函数 ， 这个函数必须是嵌套在视图函数内的。

将类传递到html中

def var(request):
    name = '阿宸'
    age = 26
    gender = '男'
    name = '张迦博'
    # 模板接收的是函数的数据 ， 所有函数在定义时需要有返回值
    # 函数在传递到html中会被自动的调用
    # 传递到html中函数不能有参数
    def func():
         return '你好'
 
    ls = [123,456,789]
    dic = {'name':'阿宸', 'age':26 , 'tel':1784168}
 
    class My:
        def func(self):
            return '下班吃饭去'
 
        @classmethod
        def get_cls(cls):
            return '等下吃烧烤'
 
        @staticmethod
        def get_static():
            return '走着'
 
    obj = My()
 
    return render(request , 'var.html' , locals())
<p>变量</p>
{{ name }}
{{ age }}
{{ gender }}
<p>读取视图中的函数</p>
{{ func }}<br>
{{ ls }}
<p>使用索引获取序列中的数据</p>
{{ ls.1 }}  {# 获取列表中下标为1的数据 #}
<p>格式：变量名.下标</p>
{{ dic.name }}
{{ dic.tel }}
<p>html接收类参数</p>
{{ My }}<br>
{{ obj }}
<p>调用类中的方法</p>
{{ obj.get_cls }}
{{ obj.get_static }}
{{ obj.func }}
<p>类名调用</p>
{{ My.func }}
{{ My.get_cls }}
{{ My.get_static }}

2、过滤器

过滤器可以用来显示变量的一些信息，而不显示变量的具体数据

格式：{{ 变量名|过滤器名称:数据 }}

<p>使用default过滤器</p>
<p>当变量的值为空或者false的时候返回后面的数据</p>
{{ name|default:'萘唐' }}<br>
<p>使用length过滤器</p>
<p>返回数据长度</p>
{{ ls|length }}
{{ name|length }}
<p>使用slice</p>
<p>字符串切片</p>
{{ name|slice:1 }}
<p>random过滤器</p>
<p>在指定的列表中随机获取数据</p>
{{ ls|random }}
<p>safe过滤器</p>
<p>可以将是html标签的字符串变量进行转换格式</p>
{{ html }}
{{ html|safe }}
{{ name|safe }}

自定义过滤器

在应用下创建templatetags

在这个文件夹下创建一个py文件

导入
from django import template
register = template.Library()
from django import template
 
register = template.Library()
 
# 自定义过滤器
# 过滤器最多只能接收两个参数
# 使用语法糖 @register.filter
# name 是定义过滤器的名称
@register.filter(name='num')
def my_num(num_1 , num_2):
    return num_1 * num_2
<p>使用自定义过滤器</p>
{# 导入过滤器模块 #}
{% load mytag %}
{{ ls.1|num:300 }}

3、include标签

可以实现继承的模式。多个页面中有多个重复的内容 ， 可以将这一部分单独设置一个html文件 ， 使用include标签来进行继承操作。

<p>使用now标签获取到格式化时间</p>
{% now "Y年m月d日 H时i分s秒" %}
<p>导入固定模板的html页面内容</p>
{# include 模板文件名 #}
{#  方式二：在导入模板的时候使用with导入参数 #}
{% include 'set.html' with name='阿宸一号' %}
<body>
<p>作者：{{ name }}</p>
<p>联系地址：广州天河</p>
<p>联系电话：1784168</p>
</body>
def text(request):
    # 方式一：在视图函数中传入数据  {'name':'阿宸'}
    return render(request , 'time.html')

4、流程控制

for循环

{% for 变量名 in 迭代对象 %}
……
{% endfor %}

if判断

{% if 判断条件 %}
……
{% elif 判断条件 %}
……
{% else %}
{% endif %}
{{ dic }}
<ul>
    {% for key , value in dic.items %}
        <li>{{ key }} = {{ value }}</li>
    {% endfor %}
</ul>
<p>数学成绩为：{{ dic.math }}</p>
{% if dic.math >= 110 %}
    等级：A
{% elif dic.math >= 90 %}
    等级：B
{% elif dic.math >= 70 %}
    等级：C
{% elif dic.math >= 60 %}
    等级：D
{% else %}
    等级：不合格
{% endif %}

3、模板继承

子模板通过继承获取父模板的内容 ，并且可以在子模板中覆盖父模板的内容。

父模板用{% block 名称%} 和{% endblock 名称%} 标签所涵盖的内容，子模板可以继承使用并且可以进行重新编写。

子模板继承用{% extends "父模板文件名"%}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet"   href="/static/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <script src="/static/js/jquery-3.6.0.min.js"></script>
    <script src="/static/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</head>
<body>
 
    <ul class="nav nav-tabs">
      <li role="presentation" class="active"><a href={% url 'ind' %}>首页</a></li>
      <li role="presentation"><a href={% url 'r' %}>注册</a></li>
      <li role="presentation"><a href={% url 'lon' %}>登录</a></li>
    </ul>
 
    {% block head %}
    <div class="panel panel-default">
      <div class="panel-heading">首页</div>
      <div class="panel-body">
        欢迎光临
      </div>
    </div>
    {% endblock head %}
    
    {% block name %}
 
    {% endblock name %}
</body>
</html>
{% extends 'index.html' %}
 
{% block head %}
    <div class="panel panel-default">
      <div class="panel-heading">登录</div>
      <div class="panel-body">
        <form>
            <input type="text" name="name">
            <input type="password" name="password">
            <input type="submit" value="登录">
        </form>
      </div>
    </div>
{% endblock head %}
 
{% block name %}
<h1>今天的内容我们就讲到这里啦</h1>
{% endblock name %}