模板标签

星哥玩云

发布于 2022-09-14 18:44:54

5840

发布于 2022-09-14 18:44:54

文章被收录于专栏：开源部署

一、概述

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

使用

{% <span class="hljs-keyword">if</span> grade &gt;= <span class="hljs-number">90</span> %}
    成绩为{{ grade }} 优秀
{% <span class="hljs-keyword">elif</span> grade &gt;= <span class="hljs-number">80</span> %}
    成绩为{{ grade }} 良
{% <span class="hljs-keyword">elif</span> grade &gt;= <span class="hljs-number">60</span> %}
    成绩为{{ grade }} 合格
{% <span class="hljs-keyword">else</span> %}
    成绩为{{ 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})

模板代码

&lt;dl&gt;
{% <span class="hljs-keyword">for</span> key, value <span class="hljs-keyword">in</span> my_dict.items() %}
&lt;dt&gt;{{ key }}---&gt;{{ value }}&lt;/dt&gt;
{% endfor %}
&lt;/dl&gt;

注意

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

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

子模板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 %}

注意