ホームページ >ウェブフロントエンド >htmlチュートリアル >Flask:template_html/css_WEB-ITnose

Flask:template_html/css_WEB-ITnose

WBOYオリジナル: 2016-06-24 11:15:101363ブラウズ

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

すべての値を大文字に変換します

タイトルtrimstriptags

安全过滤器： 4a249f0d628e2318394fd9b75b4636b1Hello473f0a7621bec819994bb5020d29372a 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 %}        &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 %}  <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组建。

値内の各単語を大文字にする
間のスペースを削除する
レンダリングする前に HTML タグを削除する

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：divをリセットする必要がありますか? _html/css_WEB-ITnose次の記事：divをリセットする必要がありますか? _html/css_WEB-ITnose

続きを見る