Home >Web Front-end >HTML Tutorial >Flask:模版_html/css_WEB-ITnose
Flask:模版_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:15:101363browse
在 Python 内部生成 HTML 不好玩，且相当笨拙。因为你必须自己负责 HTML 转义，以 确保应用的安全。因此， Flask 自动为你配置的 Jinja2 模板引擎 。
渲染模版
render_template() 方法可以渲染模板，你只要提供模板名称和你需要的参数作为参数传递给模板的变量就行了。
例子:template.py
from flask import render_template@app.route('/hello/')@app.route('/hello/<name>')def hello(name=None): return render_template('hello.html', name=name) 文件结构如下：
/template.py/templates /hello.html
Flask 会在 templates 文件夹内寻找hello.html模板。
模版放置在哪里
因此，如果你的应用是一个模块，那么模板文件夹(templates)应该在模块旁边；如果是一个包，那么就应该在包里面：
情形 1: 一个模块:
/application.py/templates /hello.html
情形 2: 一个包:(有 init .py)
/application /__init__.py /templates /hello.html
运行template.py
Jinja2 模板
官网
开发者文档
模板包含 变量 或 表达式 ，这两者在模板求值的时候 会被替换为值 。模板中 还有标签，控制模板的逻辑。模板语法的大量灵感来自于 Django 和 Python 。
例子：
<!doctype html><title>Hello from Flask</title>{% if name %} <h1>Hello {{ name }}!</h1>{% else %} <h1>Hello World!</h1>{% endif %}
3行：如果name为真，则显示Hello + name参数
5行：否则显示hello world
7行：结束判断
注释
多行
{# ... #} 单行
## 为行注释前缀
去掉空白
模板引擎不会对空白做处理，空白（空格、制表符、换行符 等等）都会原封不动返回。
在块（比如一个for 标签、一段注释或变量表达式）的开始或结束放置一个减号（ - ），可以移除块前或块后的空白:标签和减号之间不能有空白
有效的:
{%- if foo -%}...{% endif %} 无效的:
{% - if foo - %}...{% endif %} 行语句
使用 # 把一个行标记为一个语句,下面的两段代码等价
<ul># for item in seq <li>{{ item }}</li># endfor</ul><ul>{% for item in seq %} <li>{{ item }}</li>{% endfor %}</ul> - 行语句前缀可以出现在一行的任意位置，只要它前面没有文本。
- 为了语句有更好的可读 性，在块的开始（比如 for 、 if 、 elif 等等）以冒号结尾:
- 若有未闭合的圆括号、花括号或方括号，行语句可以跨越多行
转义
不会把它作为变量或块来处理。
最简单的方法是在变量分隔符中（ {{ ）使用变量表达式输出:
{{ '{{' }} 较大的段落使用raw：
{% raw %} <ul> {% for item in seq %} <li>{{ item }}</li> {% endfor %} </ul>{% endraw %} 变量
<h1>Hello, {{ name }}!</h1>
特殊的占位符告诉模版引擎该值在渲染模版的时候要从数据提供者那里拿到该数据。
Jinja2可以识别所有变量的类型，甚至是一些复杂的数据类型，如lists，dic,objects.如：
<p>A value from a dictionary: {{ mydict['key'] }}.</p><p>A value from a list: {{ mylist[3] }}.</p><p>A value from a list, with a variable index: {{ mylist[myintvar] }}.</p><p>A value from an object's method: {{ myobj.somemethod() }}.</p> 变量上面也可以有你能访问的属性或元素。访问变量属性可以使用 . 或者 []
{{ foo.bar }}{{ foo['bar'] }} 变量可以被过滤器修改，通过管道|作为分隔符，过滤器放在后面
Hello, {{ name|capitalize }} Jinja2常用的过滤器
| Filter名称 | 描述 |
|---|---|
| safe | 安全过滤器 |
| capitalize | 值的第一个字符转换为大写,其余小写 |
| lower | 值全部转化为小写 |
| upper | 值全部转换为大写 |
| title | 值中的每个单词大写 |
| trim | 将中间的空格移除 |
| striptags | 在渲染之前删除任何HTML标记 |
安全过滤器：
Hello
Jinja2会将其渲染成: 4a249f0d628e2318394fd9b75b4636b1Hello473f0a7621bec819994bb5020d29372a 但有时候需要在变量中保存html的原始值，这时候就需要使用安全过滤器。不要在不信任的值上使用安全过滤器，如用户在网页上面提交的表单值。判断
所有的判断函数
{% if loop.index is divisibleby 3 %} 控制流结构
Jinja2提供了几个控制流结构改变渲染模版的流。
for
<ul>{% for user in users %} <li>{{ user.username|e }}</li>{% endfor %}</ul> 迭代像 dict 的容器
{% for key, value in my_dict.iteritems() %} <dt>{{ key|e }}</dt> <dd>{{ value|e }}</dd>{% endfor %} if
宏macro
过滤器filter
赋值set
包含include
include 语句用于包含一个模板，并在当前命名空间中返回那个文件的内容渲 染结果
模版继承
模板继承可以使每个页面的特定元素（如页头，导航，页尾）保持一致。
用内容填充空的block是子模板的工作。 {% block %}告诉模板引擎子模板可以覆盖模板中的这些部分。
同一个模板中 {% block %} 的名名称必须唯一。
一个基础的模版：base.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><html lang="en"><html xmlns="http://www.w3.org/1999/xhtml"><head> {% block head %} <!--子模块会填充该head block--> <link rel="stylesheet" href="style.css" /> <!--链接css--> <title>{% block title %}{% endblock %} - My Webpage</title> <!--子模块会填充title block--> {% endblock %}</head><body> <div id="content">{% block content %}{% endblock %}</div> <div id="footer"> {% block footer %} © Copyright 2008 by <a href="http://domain.invalid/">you</a>. {% endblock %} </div></body> 子模版：{% extend %} 标签告诉模板引擎这个模板“继承”另一个模板。 extends 标签应该是模板中的第一个 标签。
{% extends "base.html" %}{% block title %}Index{% endblock %}{% block head %} {{ super() }} <style type="text/css"> .important { color: #336699; } </style>{% endblock %}{% block content %} <h1>Index</h1> <p class="important"> Welcome on my awesome homepage. </p>{% endblock %} 重复使用块，渲染块的内容：使用 self.块的名称
<title>{% block title %}{% endblock %}</title><h1>{{ self.title() }}</h1> <!--同上面title块相同内容-->{% block body %}{% endblock %} super渲染父级块
{% block sidebar %} <h3>Table Of Contents</h3> ... {{ super() }}{% endblock %} 命名块结束标签
Jinja2 允许你在块的结束标签中加入的名称来改善可读性:endblock 后面的名称一定与块名匹配。
{% block sidebar %} {% block inner_sidebar %} ... {% endblock inner_sidebar %}{% endblock sidebar %} 嵌套块和作用域
默认的块不允许访问块外作用域中的变量,下面的li输出为空，item 在块中是不可用的,其原因是，如果 块被子模板替换，变量在其块中可能是未定义的或未被传递到上下文。
{% for item in seq %} <li>{% block loop_item %}{{ item }}{% endblock %}</li>{% endfor %} 在块声明中添加 scoped 修饰，就把块设定到作用域中:
{% for item in seq %} <li>{% block loop_item scoped %}{{ item }}{% endblock %}</li>{% endfor %} 与Bootstrap集成
bootstrap官网
bootstrap是客户端的模版，所以服务器不能直接调用它。服务器能够做的就是提供HTML response，根据bootstrap需要的html,css,js关联的组建。使用Flask-Bootstrap扩展来完成。
安装Flask-Bootstrap: pip install flask-bootstrap
初始化Bootstrap
Flask扩展的初始化一般都是在app实例创建的同时实行。
from flask.ext.bootstrap import Bootstrap# ...bootstrap = Bootstrap(app)
下面展示新的继承模版
{% extends "bootstrap/base.html" %}{% block title %}Flasky{% endblock %}{% block navbar %} {% endblock %}{% block content %}<h1>Hello, {{ name }}!</h1>{% endblock %} 定义了三个block，title, navbar, 和content.在这个模版中navbar block定义了一个简单的导航bar使用bootstrap组建。