概念:包含变量和运算逻辑的HTML,执行这些变量替换和逻辑计算工作的过程称为渲染
1.基本语法
a.{{ 。。。}}用来标记变量
b.{% %}用来标记语句
c.{{ 变量|过滤器 }}
d.{# #}注释复制代码
2.过滤器
safe:禁用转义;<p>{{ '<em>hello</em>' | safe }}</p>
capitalize:把变量值的首字母转成大写,其余字母转小写;
<p>{{ 'hello' | capitalize }}</p>
lower:把值转成小写;
<p>{{ 'HELLO' | lower }}</p>
upper:把值转成大写;
<p>{{ 'hello' | upper }}</p>
trim:把值的首尾空格去掉;
<p>{{ ' hello world ' | trim }}</p>
reverse:字符串反转;
<p>{{ 'olleh' | reverse }}</p>
复制代码
自定义过滤器:过滤器的本质是函数
待总结.......复制代码
3.模板中控制语句
{% if user %}{{ user }}
{% else %}hello!
<ul>{% for index in indexs %}<li> {{ index }} </li>{% endfor %}
</ul>{% for index in fruit %}<li>{{ index }}</li>
{% endfor %}
复制代码
4.宏
类似于python中的函数,宏的作用就是在模板中重复利用代码,避免代码冗余
定义宏:
{% macro input() %}<input type="text"name="username"value=""size="30"/>
{% endmacro %}调用宏:
{{ input() }}把宏单独抽取出来,封装成html文件,其它模板中导入使用
复制代码
5.模板继承
父模板(base.html):{% block top %}顶部菜单{% endblock top %}{% block content %}{% endblock content %}{% block bottom %}底部{% endblock bottom %}子模板:{% extends 'base.html' %}{% block content %}需要填充的内容{% endblock content %}
复制代码
6.Flask中特殊变量在模板中的使用
a.get_flashed_messages方法:
返回之前在Flask中通过 flash() 传入的信息列表。把字符串对象表示的消息加入到一个消息队列中,然后通过调用 get_flashed_messages() 方法取出。
{% for message in get_flashed_messages() %}{{ message }}
{% endfor %}request对象:
就是 Flask 中表示当前请求的 request 对象,request对象中保存了一次HTTP请求的一切信息
复制代码
####7.模板中的样式定义
参考网址
https://v3.bootcss.com/getting-started/
http://www.bootcss.com/
复制代码
<!-- 最新版本的 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><!-- 可选的 Bootstrap 主题文件(一般不用引入) --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>复制代码