Flask:模版_html/css_WEB-ITnose

WBOY
发布: 2016-06-24 11:15:10
原创
1342 人浏览过

在 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>
登录后复制

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

转义

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

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

{{ '{{' }}
登录后复制

较大的段落使用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会将其渲染成:

Hello

但有时候需要在变量中保存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 %}        &copy; 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 %}
{% endblock %}
登录后复制

定义了三个block,title, navbar, 和content.在这个模版中navbar block定义了一个简单的导航bar使用bootstrap组建。

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板