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教學

1668

CakePHP 教程

1428

Laravel 教程

1329

PHP教程

1273

C# 教程

1256

Related knowledge

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。

從文本到網站：HTML的力量 Apr 13, 2025 am 12:07 AM

HTML是一種用於構建網頁的語言，通過標籤和屬性定義網頁結構和內容。 1）HTML通過標籤組織文檔結構，如、。 2）瀏覽器解析HTML構建DOM並渲染網頁。 3）HTML5的新特性如、、增強了多媒體功能。 4）常見錯誤包括標籤未閉合和屬性值未加引號。 5）優化建議包括使用語義化標籤和減少文件大小。

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版

熱門話題