模板标签

207次阅读

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

语法: {% tag %}
说明

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

在输出中创建文本

控制逻辑和循环

概述

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 变量 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语句可以把一个模板引入到另外一个模板中，类似于把一个模板的代码 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>

注意

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

概述

类似于我们 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 %}