DjangoGirlsに挑戦～テンプレートに表示しよう～

テンプレートに表示しよう

テンプレートに表示しよう

長かったDB操作もこれで終わり
今回で取得したデータを表示させます。

Djangoのテンプレートエンジン

Djangoは特別何もいじることなくDjango特有のテンプレートエンジンが使用できます。
ただ、他のPython フレームワークを使っていてほかの者の方がなじみがある場合は

settings.pyのBACKENDを各々に合わせていじると使えるようになるみたいです。
私はDjango以外使用したことがないので、Djangoのテンプレートエンジンをそのまま使用していきます。

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },

テンプレートタグを使って表示させてみる

変数を使用するのに{{ }} 二重カッコを使う

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
  <div>
    <h1><a href="">the dawn of yuriko hisory</a></h1>
  </div>
  <div>
    {{ posts }}
  </div>
</body>
</html>

表示させてみると

Post: 〇〇で表示させている値はモデル内の__str__で設定した値です。
__str__はつまりtoString()でオブジェクトの値を参照した時に__str__で返した値が表示される。

ループ

リストとして表示させるときに一個一個オブジェクトを取得したい時があるので、
一つずつ表示させてみましょう。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
  <div>
    <h1><a href="">the dawn of yuriko hisory</a></h1>
  </div>
  <div>
  {% for post in posts %}
    {{ post }}
  {% endfor %}
  </div>
</body>
</html>

gyazo.com

だいぶみやすくなりました。
他のフレームワークなんかを使ったことあると何やってるかすごいわかりやすいシンプルな記述法
使ったことなくてもpythonのfor文そのままなのでわかりますね。

postsをfor文で回して一個一個の要素をpostで表示させてるだけです。

少し複雑な表示

これだけだと何を表示させてるのかわからないのでブログっぽくなるように
タイトル、テキスト、投稿者を表示させます。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
  <div>
    <h1><a href="">the dawn of yuriko hisory</a></h1>
  </div>
  {% for post in posts %}
    <div>
      <h1><a href="">{{ post.title }}</a></h1>
      <p>{{ post.text|linebreaks }}</p>
      <p>書いた人: {{ post.author }}</p>
    </div>

  {% endfor %}
</body>
</html>