初識flask——テンプレートの使用(2015.5.22)
テンプレートを使用する理由
hellowolrdを返すだけで十分ですが、WebページにクールなWebサイトインタフェースを表示する場合は、viewビューファイルでhtmlコードを直接returnすると、ビューファイルのコード量が非常に大きくなり、css、jsなどを加えると想像できません.本当に良いアイデアではありません.
テンプレートの論理
flaskはJinja 2テンプレートを使用します.簡単に言えば、テンプレートファイルは単独のhtmlファイルでtemplatesフォルダに保存されます.render_template関数はこのテンプレートを呼び出し、テンプレート内の変数名の一部をビュー関数の代わりに使用します.すなわち、この関数はテンプレート名とテンプレート変数のリストに入力し、すべての変数が置き換えられたレンダリングされたテンプレートを返す必要があります.例えばhtmlファイルで
ビューファイル:
レンダー(Render)
テンプレートに{{title}}で表示される部分は、ビュー関数においてtitle='Home,のHomeでWebページに表示される代わりに表示され、同じ{{user,nickname}}でuser辞書のnickname属性の値としてレンダリングされます.このように、ページ上のデータが変化した場合、htmlファイルにデータを修正する必要はありません.このような「ブリッジ」でバックグラウンドのあるデータとページ上のある部分を接続するだけで、データが変化した場合、ページ上でも変化することができます.
せいぎょぶん
jinja 2テンプレートは、{%...%}ブロックのように制御文をサポートします.
if文
以下は簡単なif文です.
試行関数にtitle値が入力されていない場合は、デフォルトのWelcome to microblogが表示され、例外はトリガーされません.
for文
ここで入力されるpostsはリストであり、forはpostsの各postをループし、テンプレートフォーマットに従って対応する値をページにレンダリングし、Webページに多くのデータを表示する必要がある場合、コード量を減らす良い方法です.
テンプレートの継承
1つのWebサイトの多くのページには、ナビゲーションバーなどの同じ部分が必要になる場合があります.共有されている部分を1つのベーステンプレートに単独で置くことができます.これは「テンプレートのテンプレート」のようなもので、ベーステンプレートはこのように見えます.
基本テンプレートであることを宣言する必要はありません.共通のコードを作成した後、{%block content%}{%endblock%}は、この2つの部分の間に各ページの独特な部分を挿入することを表します.他のページファイルでは、ファイルの先頭に{%extends"base.html"%}を使用してどのファイルを継承するかを宣言し、{%block content%}{%endblock%}間でコードを記述します.
hellowolrdを返すだけで十分ですが、WebページにクールなWebサイトインタフェースを表示する場合は、viewビューファイルでhtmlコードを直接returnすると、ビューファイルのコード量が非常に大きくなり、css、jsなどを加えると想像できません.本当に良いアイデアではありません.
テンプレートの論理
flaskはJinja 2テンプレートを使用します.簡単に言えば、テンプレートファイルは単独のhtmlファイルでtemplatesフォルダに保存されます.render_template関数はこのテンプレートを呼び出し、テンプレート内の変数名の一部をビュー関数の代わりに使用します.すなわち、この関数はテンプレート名とテンプレート変数のリストに入力し、すべての変数が置き換えられたレンダリングされたテンプレートを返す必要があります.例えばhtmlファイルで
<html>
<head>
<title>{
{ title }} - microblogtitle>
head>
<body>
<h1>Hello, {
{ user.nickname }}!h1>
body>
html>
ビューファイル:
return render_template("index.html",title = 'Home',user = user)
レンダー(Render)
テンプレートに{{title}}で表示される部分は、ビュー関数においてtitle='Home,のHomeでWebページに表示される代わりに表示され、同じ{{user,nickname}}でuser辞書のnickname属性の値としてレンダリングされます.このように、ページ上のデータが変化した場合、htmlファイルにデータを修正する必要はありません.このような「ブリッジ」でバックグラウンドのあるデータとページ上のある部分を接続するだけで、データが変化した場合、ページ上でも変化することができます.
せいぎょぶん
jinja 2テンプレートは、{%...%}ブロックのように制御文をサポートします.
if文
以下は簡単なif文です.
{% if title %}
<title>{
{ title }} - microblogtitle>
{% else %}
<title>Welcome to microblogtitle>
{% endif %
試行関数にtitle値が入力されていない場合は、デフォルトのWelcome to microblogが表示され、例外はトリガーされません.
for文
{% for post in posts %}
<p>{
{ post.author.nickname }} says: <b>{
{ post.body }}b>p>
{% endfor %}
ここで入力されるpostsはリストであり、forはpostsの各postをループし、テンプレートフォーマットに従って対応する値をページにレンダリングし、Webページに多くのデータを表示する必要がある場合、コード量を減らす良い方法です.
テンプレートの継承
1つのWebサイトの多くのページには、ナビゲーションバーなどの同じ部分が必要になる場合があります.共有されている部分を1つのベーステンプレートに単独で置くことができます.これは「テンプレートのテンプレート」のようなもので、ベーステンプレートはこのように見えます.
<html>
<head>
{% if title %}
<title>{
{ title }} - microblogtitle>
{% else %}
<title>microblogtitle>
{% endif %}
head>
<body>
<div>Microblog: <a href="/index">Homea>div>
<hr>
{% block content %}{% endblock %}
body>
html>
基本テンプレートであることを宣言する必要はありません.共通のコードを作成した後、{%block content%}{%endblock%}は、この2つの部分の間に各ページの独特な部分を挿入することを表します.他のページファイルでは、ファイルの先頭に{%extends"base.html"%}を使用してどのファイルを継承するかを宣言し、{%block content%}{%endblock%}間でコードを記述します.
{% extends "base.html" %}
{% block content %}
<h1>Hi, {
{ user.nickname }}!h1>
{% for post in posts %}
<div><p>{
{ post.author.nickname }} says: <b>{
{ post.body }}b>p>div>
{% endfor %}
{% endblock %}