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 id="Hello-name">Hello {{ name }}!</h1>{% else %}  <h1 id="Hello-World">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 id="Hello-name">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 id="Index">Index</h1>    <p class="important">      Welcome on my awesome homepage.    </p>{% endblock %}

登录后复制

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

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

登录后复制

super渲染父级块

{% block sidebar %}    <h3 id="Table-Of-Contents">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 %}                     Flasky    
               Home
     
    
   
  
{% endblock %}{% block content %}<h1 id="Hello-name">Hello, {{ name }}!</h1>
{% endblock %}

登录后复制

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

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

Java教程

1665

CakePHP 教程

1423

Laravel 教程

1321

PHP教程

1269

C# 教程

1249

显示更多

Related knowledge

了解HTML，CSS和JavaScript：初学者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML：结构，CSS：样式，JavaScript：行为 Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是：1.HTML定义网页结构，2.CSS控制网页样式，3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML，CSS和JavaScript的未来：网络开发趋势 Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。

HTML的未来：网络设计的发展和趋势 Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript：比较概述 Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。

HTML：建立网页的结构 Apr 14, 2025 am 12:14 AM

HTML是构建网页结构的基石。1.HTML定义内容结构和语义，使用、、等标签。2.提供语义化标记，如、、等，提升SEO效果。3.通过标签实现用户交互，需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号，需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。

HTML与CSS和JavaScript：比较Web技术 Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是构建现代网页的核心技术：1.HTML定义网页结构，2.CSS负责网页外观，3.JavaScript提供网页动态和交互性，它们共同作用，打造出用户体验良好的网站。

HTML：是编程语言还是其他？ Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增强WebevebDevelopment。

See all articles

Flask:模版_html/css_WEB-ITnose

渲染模版

模版放置在哪里

Jinja2 模板

注释

去掉空白

行语句

转义

变量

Jinja2常用的过滤器

Hello

Hello

判断

控制流结构

for

if

宏macro

过滤器filter

赋值set

包含include

模版继承

super渲染父级块

命名块结束标签

嵌套块和作用域

与Bootstrap集成

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题