阿里云-云小站(无限量代金券发放中)
【腾讯云】云服务器、云数据库、COS、CDN、短信等热卖云产品特惠抢购

模板标签

249次阅读
没有评论

共计 3729 个字符,预计需要花费 10 分钟才能阅读完成。

一、概述

  • 语法: {% tag %}

  • 说明

    所有的控制语句都是放在 {% ... %} 中,并且有一个语句 {% endxxx %} 来进行结束

  • 作用

    在输出中创建文本

    控制逻辑和循环

二、if 条件分支

  • 概述

    if 语句和 python 中的类似,可以使用 >,<,<=,>=,==,!= 来进行判断,也可以通过 and,or,not,in,not in 来进行逻辑合并操作

  • 格式

    • 单向条件分支

      {% if 表达式 %}
      语句
      {% endif %}
    • 双向条件分支

      {% if 表达式 %}
      语句 1
      {% else %}
      语句 2
      {% endif %}
    • 多向条件分支

      {% if 表达式 1 %}
      语句 1
      {% elif 表达式 2 %}
      语句 2
      {% elif 表达式 3 %}
      语句 3
      ……
      {% endif %}
    • 搭配 else 多向条件分支

      {% if 表达式 1 %}
      语句 1
      {% elif 表达式 2 %}
      语句 2
      {% elif 表达式 3 %}
      语句 3
      ……
      {% else %}
      语句 e
      {% endif %}
  • 使用

    {% if grade >= 90 %}
    成绩为{{grade}} 优秀
    {% elif grade >= 80 %}
    成绩为{{grade}} 良
    {% elif grade >= 60 %}
    成绩为{{grade}} 合格
    {% else %}
    成绩为{{grade}} 不合格
    {% endif %}

三、for 循环

  • 格式

    • 普通形式

      {% for 变量 in 集合 %}
      语句
      {% endfor %}
    • 搭配 else

      {% for 变量 in 集合 %}
      语句 1
      {% else %}
      语句 2
      {% endifequal %}
  • 使用

    视图函数

    @app.route('/test_tag/')
    def test(test):
    return render_template('test_tag.html', my_dict={'name':'lucky', 'age':18})

    模板代码

    <dl>
    {% for key, value in my_dict.items() %}
    <dt>{{key}}--->{{value}}</dt>
    {% endfor %}
    </dl>

注意

  • for 循环搭配的 else 只有当迭代的变量不存在的时候 才会执行 else

    • 不可以使用 continuebreak表达式来控制循环的执行
  • 获取当前的遍历状态

    变量 描述
    loop.index 当前迭代的索引(从 1 开始)
    loop.index0 当前迭代的索引(从 0 开始)
    loop.first 是否是第一次迭代,返回 True/False
    loop.last 是否是最后一次迭代,返回 True/False
    loop.length 序列的长度

四、注释(多行注释)

  • 作用

    • 代码调试
    • 解释说明
  • 格式

    {# 内容 #}

  • 使用

    {# 这是一个注释 #}
    
  • 注意

    注释的代码都不会再浏览器的 HTML 页面中显示出来

五、include 导入

  • 说明

    include语句可以把一个模板引入到另外一个模板中,类似于把一个模板的代码 copy 到另外一个模板的指定位置

  • 使用

    目录结构

    project/
    templates/
    common/
    header.html
    footer.html

    header.html

    <nav> 我是头部 </nav>
    

    footer.html

    <footer> 底部 </footer>
    

    test_include.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    *{
    padding:0;
    margin: 0;
    }
    nav{
    width:100%;
    height: 40px;
    background-color: #000;
    color: #fff;
    }
    footer{
    width:100%;
    height: 100px;
    background-color: orange;
    position: absolute;
    bottom:0;
    }
    </style>
    </head>
    <body>
    {% include 'common/head.html' %}
    <div> 我是中间主体部分 </div>
    {% include 'common/footer.html' %}
    </body>
    </html>
  • 注意

    导入的文件的代码一定是当前需要的 不要添加任何其它的代码 包括主体结构 否则会将当前页面的所有代码包含进来

六、macro 宏

  • 概述

    类似于我们 python 的函数 可以封装一段特定功能的 HTML 代码段

  • 主体结构

    定义宏

    {% amcro 宏的名称([参数[参数...]]) %}
    ...
    {% endmacro %}

    调用宏

    {{宏名称([参数[参数...]]) }}
    
  • 宏的简单使用

    {% macro test() %}
    这是一个简单的宏
    {% endmacro %}
    {{test() }}
    {{test() }}
  • 宏的传参使用

    有形参无默认值

    <h4>测试宏的传参的使用</h4>
    {% macro test_arg(name,age) %}
    <p>我叫:{{name}} 我今年 {{age}} 岁了</p>
    {% endmacro %}
    {# 调用不传实参 正常使用 #}
    {{test_arg() }}
    {# 传实参 #}
    {{test_arg('lucky',18) }}
    {{test_arg('张三') }}

    有形参且有默认值

    <h4> 测试宏的传参的使用 </h4>
    {# 形参默认值 #}
    {% macro test_arg(name='lucky',age=18) %}
    <p> 我叫:{{name}} 我今年 {{age}} 岁了 </p>
    {% endmacro %}
    {# 调用不传实参 正常使用 #}
    {{test_arg() }}
    {# 传实参 #}
    {{test_arg('lucky',18) }}
    {{test_arg('张三') }}
  • 宏的导入

    在真实的开发中,会将一些常用的宏单独放在一个文件中,在需要使用的时候,再从这个文件中进行导入。import语句的用法跟 python 中的 import 类似,可以直接 import...as...,也可以from...import... 或者from...import...as...

    common/public_macro.html

    {% macro test_arg(name='lucky',age=18) %}
    <p> 我叫:{{name}} 我今年 {{age}} 岁了 </p>
    {% endmacro %}

    导入使用

    <h4> 测试宏的导入使用 </h4>
    {# 第一种导入方式 #}
    {% from 'common/public_macro.html' import test_arg %}
    {{test_arg() }}
    {# 起别名 #}
    {% from 'common/public_macro.html' import test_arg as my_tag %}
    {{my_tag() }}
    {% import 'common/public_macro.html' as public_macro %}
    {{public_macro.test_arg('lucky') }}
  • 注意

  • 宏的调用只能在宏的下方来调用

  • 宏如果有形参 且没有默认值 则可以不传实参

  • 宏如果没有形参 则不可以传实参

  • 宏的形参默认值 和 python 一样

  • 宏的默认值 遵循默认值规则 有默认值的放在右侧 没有默认值的 放在左侧

  • 关键字的参数使用 同 python 函数一样

七、模板继承

  • 概述

    Flask中的模板可以继承,通过继承可以把模板中许多重复出现的元素抽取出来,放在父模板中,并且父模板通过定义 block 给子模板开一个口,子模板根据需要,再实现这个block

  • 基础模板 base.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
    {% block head %} // 开放一个地方,以待具体赋值
    <title>{% block title %}{% endblock %} - My Webpage</title>
    {% endblock %}
    </head>
    <body>
    <div id="content">
    {% block content %}
    <div> 这里是默认内容,所有继承自这个模板的,如果不覆盖就显示这里的默认内容。</div>
    {% endblock %}
    </div>
    {% block footer %}
    © Copyright 2008 by <a href="#">lucky</a>.
    {% endblock %}
    </div>
    </body>
    </html>
  • 子模板 children.html

    {% extends "base.html" %}//1: 继承父模板
    {% block title %}Index{% endblock %}//2: 书写 title block
    {% block head %}//3:书写 head block
    {{super() }}// 调用父模板中的内容,如果不调用,则此处会被子模板中书写的内容覆盖掉
    <style type="text/css">
    .important {color: #336699; }
    </style>
    {% endblock %}
    {% block content %}//4: 书写 content block
    <h1>Index</h1>
    <p class="important">
    Welcome to my lucky homepage.
    </p>
    {% endblock %}
  • 注意

    • 当重写了一个 block,原来的显示内容就没了,八成的原因是没有调用 super
    • 在模板中不能有同名的 block
    • 不支持多继承

八、对比包含、宏、继承

  • 相同点

    均实现了代码的复用

  • 不同点

    • 包含是直接将目标文件整个渲染出来

    • 宏类似函数,并且可以传参,需要定义和调用

    • 继承的本质是代码的替换,一般用来实现页面中重复不变的区域

正文完
星哥玩云-微信公众号
post-qrcode
 0
星锅
版权声明:本站原创文章,由 星锅 于2022-05-26发表,共计3729字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
【腾讯云】推广者专属福利,新客户无门槛领取总价值高达2860元代金券,每种代金券限量500张,先到先得。
阿里云-最新活动爆款每日限量供应
评论(没有评论)
验证码
【腾讯云】云服务器、云数据库、COS、CDN、短信等云产品特惠热卖中