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 テンプレートを探します。
テンプレートを配置する場所
したがって、アプリケーションがモジュールの場合、テンプレート フォルダー (テンプレート) はモジュールの隣にある必要があり、パッケージの場合はパッケージ内にある必要があります。
ケース 1:モジュール:
/application.py/templates /hello.html
ログイン後にコピー
ケース 2: パッケージ: (init .py がある)
/application /__init__.py /templates /hello.html
ログイン後にコピー
template.py
を実行する
Jinja 2 テンプレート
公式 Web サイト
開発者ドキュメント
テンプレート 変数または式が含まれます。どちらも は、テンプレートが評価されるときに値 に置き換えられます。テンプレートには、テンプレートのロジックを制御するためのタグもあります。テンプレートの構文は、Django と Python から大きく影響を受けています。
例:
rrree
3行: nameがtrueの場合、Hello + nameパラメータを表示
5行: それ以外の場合、hello worldを表示
7行: 終了判定
コメント
もっと見る行
<!doctype html><title>Hello from Flask</title>{% if name %} <h1>Hello {{ name }}!</h1>{% else %} <h1>Hello World!</h1>{% endif %}ログイン後にコピー
単一行
空白の削除
テンプレート エンジンは空白を処理せず、空白 (スペース、タブ、改行など) がそのまま返されます。
ブロック (for ラベル、コメント、変数式など) の先頭または末尾にマイナス記号 (-) を配置して、ブロックの前後の空白を削除します。ラベルの間に空白があってはなりません。とマイナス記号
有効:
無効:
{%- if foo -%}...{% endif %}ログイン後にコピー
行ステートメント
# を使用して行をステートメントとしてマークします。 次の 2 つのコードは同等です。
{% - if foo - %}...{% endif %}ログイン後にコピー
- 行ステートメントの接頭語は、その前にテキストがない限り、行のどこにでも使用できます。
- ステートメントを読みやすくするために、ブロック (for、if、elif など) の先頭をコロンで終了します。
- 閉じていない括弧、中括弧、または角括弧がある場合、行ステートメントは複数行にまたがることができます。
をエスケープすると、変数またはブロックとして扱われません。
最も簡単な方法は、変数区切り文字 ( {{ ) で変数式の出力を使用することです:
<ul># for item in seq <li>{{ item }}</li># endfor</ul><ul>{% for item in seq %} <li>{{ item }}</li>{% endfor %}</ul>ログイン後にコピー
大きな段落には raw を使用します:
Variable
りー
ザ特別なプレースホルダーは、テンプレートをレンダリングするときにデータ プロバイダーから値を取得する必要があることをテンプレート エンジンに指示します。
Jinja2 は、リスト、dic、オブジェクトなどの一部の複雑なデータ型も含め、すべての変数の型を識別できます。変数の属性にアクセスするには、または [] を使用できます。
{% raw %} <ul> {% for item in seq %} <li>{{ item }}</li> {% endfor %} </ul>{% endraw %}ログイン後にコピー
変数はパイプを介してフィルターによって変更できます。
大文字にする
値の最初の文字は大文字に変換され、残りは小文字になります
lower
値はすべて小文字に変換されます
upper
すべての値を大文字に変換します
タイトル | 値内の各単語を大文字にする | |
trim | 間のスペースを削除する | |
striptags | レンダリングする前に HTML タグを削除する | | 安全过滤器：
Hello
Jinja2会将其渲染成: <h1>Hello</h1> 但有时候需要在变量中保存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 %} © 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 %} <div class="navbar navbar-inverse" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/">Flasky</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="/">Home</a></li> </ul> </div> </div> </div>{% endblock %}{% block content %}<div class="container"><div class="page-header"><h1>Hello, {{ name }}!</h1></div></div>{% endblock %}ログイン後にコピー
定义了三个block，title, navbar, 和content.在这个模版中navbar block定义了一个简单的导航bar使用bootstrap组建。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
HTMLは初心者のために簡単に学ぶことができますか？
Apr 07, 2025 am 12:11 AM
HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
HTMLでの開始タグの例は何ですか？
Apr 06, 2025 am 12:04 AM
Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。
See all articles
