组团学
学习方向
登录/注册

模板标签

阅读 (248794)

一、概述

  • 语法: {% 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

    • 不可以使用continue和break表达式来控制循环的执行

  • 获取当前的遍历状态

    变量 描述
    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
    • 不支持多继承

八、对比包含、宏、继承

  • 相同点

    均实现了代码的复用

  • 不同点

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

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

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

需要 登录 才可以提问哦
头像
：
回复