Step 6: テンプレート

テンプレートの構築に入ります。Step5までの作業では、アプリケーションにアクセス してもFlaskがテンプレートを見つけることが出来ずエラーを返します。テンプレートは Jinja2 のシンタックスを使用して作成します。また、デフォルトで、オートエスケープの 設定がされているので注意してください。オートエスケープは、テンプレート内に直接書かれた タグを自動でエスケープしてくれます。 Markup or with the |safe filter in the template,

基本的なレイアウトテンプレートを継承するとことでサイト内すべてのページで 統一したレイアウトを使用することが出来ます。

以下のhtmlファイルを templates フォルダー内に作成してください:

layout.html

このテンプレートはHTMLの基本的なスケルトンになります。ヘッダー部にタイトルと ログインリンクが表示されています(ログインしている場合にはログアウトリンク) {% block body %} ブロックには、子要素のテンプレートの内容に置き換わります。

session は、テンプレート内でも利用可能です。これを利用することで ユーザがログインしているかどうかによって表示を変更することが出来ます。 Note: Jinjaは、objectと辞書型のデータを扱うことが可能です、以下様なコードでは 'logged_in' keyを参照することでログイン状態で表示が変更されます:

<!doctype html>
<title>Flaskr</title>
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='style.css') }}">
<div class=page>
  <h1>Flaskr</h1>
  <div class=metanav>
  {% if not session.logged_in %}
    <a href="{{ url_for('login') }}">log in</a>
  {% else %}
    <a href="{{ url_for('logout') }}">log out</a>
  {% endif %}
  </div>
  {% for message in get_flashed_messages() %}
    <div class=flash>{{ message }}</div>
  {% endfor %}
  {% block body %}{% endblock %}
</div>

show_entries.html

layout.html を拡張するテンプレートを作成します。 render_template() では、forループを利用して複数のエントリを 展開しています。また、新規エントリーを追加するフォームを用意してあり submit すると HTTP POST されます。

{% extends "layout.html" %}
{% block body %}
  {% if session.logged_in %}
    <form action="{{ url_for('add_entry') }}" method=post class=add-entry>
      <dl>
        <dt>Title:
        <dd><input type=text size=30 name=title>
        <dt>Text:
        <dd><textarea name=text rows=5 cols=40></textarea>
        <dd><input type=submit value=Share>
      </dl>
    </form>
  {% endif %}
  <ul class=entries>
  {% for entry in entries %}
    <li><h2>{{ entry.title }}</h2>{{ entry.text|safe }}
  {% else %}
    <li><em>Unbelievable.  No entries here so far</em>
  {% endfor %}
  </ul>
{% endblock %}

login.html

最後のテンプレートです。loginテンプレートでは、ログインするためのシンプルな フォームだけが表示されます。

{% extends "layout.html" %}
{% block body %}
  <h2>Login</h2>
  {% if error %}<p class=error><strong>Error:</strong> {{ error }}{% endif %}
  <form action="{{ url_for('login') }}" method=post>
    <dl>
      <dt>Username:
      <dd><input type=text name=username>
      <dt>Password:
      <dd><input type=password name=password>
      <dd><input type=submit value=Login>
    </dl>
  </form>
{% endblock %}

Step 7: スタイルを追加する.

Table Of Contents

Related Topics

This Page