Flask:模版_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:15:10
Original
1315 Leute haben es durchsucht

在 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)
Nach dem Login kopieren

文件结构如下:

/template.py/templates    /hello.html
Nach dem Login kopieren

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

模版放置在哪里

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

情形 1: 一个模块:

/application.py/templates    /hello.html
Nach dem Login kopieren

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

/application    /__init__.py    /templates        /hello.html
Nach dem Login kopieren

运行template.py

Jinja2 模板

官网

开发者文档

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

例子:

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

3行:如果name为真,则显示Hello + name参数

5行:否则显示hello world

7行:结束判断

注释

多行

{# ... #}
Nach dem Login kopieren

单行

## 为行注释前缀
Nach dem Login kopieren

去掉空白

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

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

有效的:

{%- if foo -%}...{% endif %}
Nach dem Login kopieren

无效的:

{% - if foo - %}...{% endif %}
Nach dem Login kopieren

行语句

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

<ul># for item in seq    <li>{{ item }}</li># endfor</ul><ul>{% for item in seq %}    <li>{{ item }}</li>{% endfor %}</ul>
Nach dem Login kopieren

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

转义

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

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

{{ '{{' }}
Nach dem Login kopieren

较大的段落使用raw:

{% raw %}    <ul>    {% for item in seq %}        <li>{{ item }}</li>    {% endfor %}    </ul>{% endraw %}
Nach dem Login kopieren

变量

<h1>Hello, {{ name }}!</h1>
Nach dem Login kopieren

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

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>
Nach dem Login kopieren

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

{{ foo.bar }}{{ foo['bar'] }}
Nach dem Login kopieren

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

Hello, {{ name|capitalize }}
Nach dem Login kopieren

Jinja2常用的过滤器

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

安全过滤器:

Hello

Jinja2会将其渲染成:

Hello

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

判断

所有的判断函数

{% if loop.index is divisibleby 3 %}
Nach dem Login kopieren

控制流结构

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

for

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

迭代像 dict 的容器

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

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>
Nach dem Login kopieren

子模版:{% 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 %}
Nach dem Login kopieren

重复使用块,渲染块的内容:使用 self.块的名称

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

super渲染父级块

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

命名块结束标签

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

{% block sidebar %}    {% block inner_sidebar %}        ...    {% endblock inner_sidebar %}{% endblock sidebar %}
Nach dem Login kopieren

嵌套块和作用域

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

{% for item in seq %}    <li>{% block loop_item %}{{ item }}{% endblock %}</li>{% endfor %}
Nach dem Login kopieren

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

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

与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)
Nach dem Login kopieren

下面展示新的继承模版

{% extends "bootstrap/base.html" %}{% block title %}Flasky{% endblock %}{% block navbar %}  {% endblock %}{% block content %}
{% endblock %}
Nach dem Login kopieren

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!