当前位置 : 主页 > 编程语言 > 其它开发 >

模板层

来源:互联网 收集:自由互联 发布时间:2022-05-30
过滤器 语法结构 {{ 数据对象|过滤器名称:参数 }} 过滤器最多只能额外传输一个参数 常见过滤器 标签 注意事项 在django模板语法中写标签的时候,只需要写关键字然后tab键就会自动补
过滤器 语法结构

{{ 数据对象|过滤器名称:参数 }}

过滤器最多只能额外传输一个参数

常见过滤器

 

 

标签 注意事项

在django模板语法中写标签的时候,只需要写关键字然后tab键就会自动补全

语法结构

{% 名字 ...%}

{% end名字 %}

if判断

{% if 条件1 %}
<p>你好啊</p>
{% elif 条件2 %}
<p>他好呀</p>
{% else %}
<p>大家好</p>
{% endif %}

for循环

提供了forloop关键字

{% for i in l1 %}
<p>{{ i }}</p>
{% endfor %}

for+if其他使用

{% for i in l1 %}
{% if forloop.first %}
<p>这是第一次循环</p>
{% elif forloop.last %}
<p>这是最后一次循环</p>
{% else %}
<p>中间循环</p>
{% endif %}
{% empty %}
<p>for循环对象为空 自动执行</p>
{% endfor %}

自定义操作 前提操作
  1. 在应用下需要创建一个名为templatetags的文件夹
  2. 在该文件夹内创建一个任意名称的py文件
  3. 在该py文件内需要先提前编写两行固定的代码
    from django import template
    register = template.Library()
自定义过滤器

只能接收两个参数

@register.filter(is_safe=True)
def index(a, b):
    return a + b
{% load mytag %}
{{ n1|index:666 }}
View Code 自定义简单标签

可以接收任意的参数

@register.simple_tag(name='my_tag')
def func1(a, b, c, d):
    return a + b + c + d
{% my_tag 1 2 3 4 %}  # 参数之间空格隔开即可
自定义inclusion_tag
@register.inclusion_tag('left.html')
def func2(n):
    l1 = []
    for i in range(1, n + 1):
        l1.append(f'第{i}页')
    return locals()
{% func2 10 %} # 传入的参数是几就会打印几页
<ul>
    {% for foo in l1 %}
        <li>{{ foo }}</li>
    {% endfor %}
</ul>

该方法需要先作用于一个局部html页面,之后将渲染的结果放到调用的位置

模板导入 概念

类似于将html页面上的局部页面做成模块的形式,哪个地方想要直接导入即可展示

有一个非常好看的获取用户数据的页面,需要在网站的多个页面上使用

  • 策略1:拷贝多份即可
  • 策略2:模板的导入
使用方式

{% include 'menu.html' %}

menu.html只能是一个局部页面,只能写局部代码

注释语法 HTML的注释语法

<!---->

django模板语法的注释

{# #}

注意事项

HTML的注释可以在前端浏览器页面上直接查看到,模板语法的注释只能在后端查看,前端浏览器查看不了

模板继承 概念

类似于面向对象的继承:继承了某个页面就可以使用该页面上所有的资源

有很多网站的很多页面,其实都是差不多的,只是局部有所变化,模板的继承可以很好的实现该需求

继承步骤
  1. 先在模板中通过block划定将来可以被修改的区域
    {% block content %}
     <h1>主页内容</h1>
    {% endblock %}
  2. 子板继承模板
    {% extends 'home.html' %}
  3. 修改划定的区域
    {% block content %}
    <h1>登录内容</h1>
    {% endblock %}
  4. 子页面还可以重复使用父页面的内容
    {{ block.super }}
注意事项

模板上最少应该有三个区域:css区域、内容区域、js区域,子页面就可以有自己独立的css、js、内容

 

上一篇:&#127881;使用JSONP解决跨域
下一篇:没有了
网友评论