初識flask——テンプレートの使用(2015.5.22)

7708 ワード

テンプレートを使用する理由
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 %}