Flask:模版_html/css_WEB-ITnose

WBOY

Libérer： 2016-06-24 11:15:10

original

1314 Les gens l'ont consulté

在 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)

Copier après la connexion

文件结构如下：

/template.py/templates    /hello.html

Copier après la connexion

Flask 会在 templates 文件夹内寻找hello.html模板。

模版放置在哪里

因此，如果你的应用是一个模块，那么模板文件夹(templates)应该在模块旁边；如果是一个包，那么就应该在包里面：

情形 1: 一个模块:

/application.py/templates    /hello.html

Copier après la connexion

情形 2: 一个包:(有 init .py)

/application    /__init__.py    /templates        /hello.html

Copier après la connexion

运行template.py

Jinja2 模板

官网

开发者文档

模板包含变量或表达式，这两者在模板求值的时候 会被替换为值 。模板中还有标签，控制模板的逻辑。模板语法的大量灵感来自于 Django 和 Python 。

例子：

<!doctype html><title>Hello from Flask</title>{% if name %}   <h1>Hello {{ name }}!</h1>{% else %}  <h1>Hello World!</h1>{% endif %}

Copier après la connexion

3行：如果name为真，则显示Hello + name参数

5行：否则显示hello world

7行：结束判断

注释

多行

{# ... #}

Copier après la connexion

单行

## 为行注释前缀

Copier après la connexion

去掉空白

模板引擎不会对空白做处理，空白（空格、制表符、换行符等等）都会原封不动返回。

在块（比如一个for 标签、一段注释或变量表达式）的开始或结束放置一个减号（ - ），可以移除块前或块后的空白:标签和减号之间不能有空白

有效的:

{%- if foo -%}...{% endif %}

Copier après la connexion

无效的:

{% - if foo - %}...{% endif %}

Copier après la connexion

行语句

使用 # 把一个行标记为一个语句,下面的两段代码等价

<ul># for item in seq    <li>{{ item }}</li># endfor</ul><ul>{% for item in seq %}    <li>{{ item }}</li>{% endfor %}</ul>

Copier après la connexion

行语句前缀可以出现在一行的任意位置，只要它前面没有文本。
为了语句有更好的可读性，在块的开始（比如 for 、 if 、 elif 等等）以冒号结尾:
若有未闭合的圆括号、花括号或方括号，行语句可以跨越多行

转义

不会把它作为变量或块来处理。

最简单的方法是在变量分隔符中（ {{ ）使用变量表达式输出:

{{ '{{' }}

Copier après la connexion

较大的段落使用raw：

{% raw %}    <ul>    {% for item in seq %}        <li>{{ item }}</li>    {% endfor %}    </ul>{% endraw %}

Copier après la connexion

变量

<h1>Hello, {{ name }}!</h1>

Copier après la connexion

特殊的占位符告诉模版引擎该值在渲染模版的时候要从数据提供者那里拿到该数据。

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>

Copier après la connexion

变量上面也可以有你能访问的属性或元素。访问变量属性可以使用 . 或者 []

{{ foo.bar }}{{ foo['bar'] }}

Copier après la connexion

变量可以被过滤器修改，通过管道|作为分隔符，过滤器放在后面

Hello, {{ name|capitalize }}

Copier après la connexion

Jinja2常用的过滤器

Filter名称	描述
safe	安全过滤器
capitalize	值的第一个字符转换为大写,其余小写
lower	值全部转化为小写
upper	值全部转换为大写
title	值中的每个单词大写
trim	将中间的空格移除
striptags	在渲染之前删除任何HTML标记

安全过滤器：

Hello

Jinja2会将其渲染成:

Hello

但有时候需要在变量中保存html的原始值，这时候就需要使用安全过滤器。不要在不信任的值上使用安全过滤器，如用户在网页上面提交的表单值。

判断

所有的判断函数

{% if loop.index is divisibleby 3 %}

Copier après la connexion

控制流结构

Jinja2提供了几个控制流结构改变渲染模版的流。

for

<ul>{% for user in users %}  <li>{{ user.username|e }}</li>{% endfor %}</ul>

Copier après la connexion

迭代像 dict 的容器

{% for key, value in my_dict.iteritems() %}    <dt>{{ key|e }}</dt>    <dd>{{ value|e }}</dd>{% endfor %}

Copier après la connexion

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 %}        &copy; Copyright 2008 by <a href="http://domain.invalid/">you</a>.        {% endblock %}    </div></body>

Copier après la connexion

子模版：{% 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 %}

Copier après la connexion

重复使用块，渲染块的内容：使用 self.块的名称

<title>{% block title %}{% endblock %}</title><h1>{{ self.title() }}</h1>    <!--同上面title块相同内容-->{% block body %}{% endblock %}

Copier après la connexion

super渲染父级块

{% block sidebar %}    <h3>Table Of Contents</h3>    ...    {{ super() }}{% endblock %}

Copier après la connexion

命名块结束标签

Jinja2 允许你在块的结束标签中加入的名称来改善可读性:endblock 后面的名称一定与块名匹配。

{% block sidebar %}    {% block inner_sidebar %}        ...    {% endblock inner_sidebar %}{% endblock sidebar %}

Copier après la connexion

嵌套块和作用域

默认的块不允许访问块外作用域中的变量,下面的li输出为空，item 在块中是不可用的,其原因是，如果块被子模板替换，变量在其块中可能是未定义的或未被传递到上下文。

{% for item in seq %}    <li>{% block loop_item %}{{ item }}{% endblock %}</li>{% endfor %}

Copier après la connexion

在块声明中添加 scoped 修饰，就把块设定到作用域中:

{% for item in seq %}    <li>{% block loop_item scoped %}{{ item }}{% endblock %}</li>{% endfor %}

Copier après la connexion

与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)

Copier après la connexion

下面展示新的继承模版

{% extends "bootstrap/base.html" %}{% block title %}Flasky{% endblock %}{% block navbar %}                     Flasky    
               Home
     
    
   
  
{% endblock %}{% block content %}<h1>Hello, {{ name }}!</h1>
{% endblock %}