Django プロフェッショナル webプログラミング #3 -templateはじめの一歩-

※以下の企画です

前回に続いてpart2の続きをやっていきます。
今回はテンプレートの作成がメインになりそうです。
HTML/CSSの初歩的な内容が多そうなので、要所だけまとめて記載していきます〜

Part2③

テンプレートを作ってみる

とりあえず本書の内容に従ってテンプレートを作成していく。
以下は写経した内容。

article.html

<h1>ニュースサイト</h1>
<h2>{{title}}</h2>
<p>{{content}}</p>

views.py

from django.http import HttpResponse
from django.template import loader

def article(request):
    template = loader.get_template('article.html')
    context = {
        'title':'記事のタイトル',
        'content':'記事の本文'
    }

    return HttpResponse(template.render(context,request))

urls.py

from django.urls import path
from . import views

app = 'first_app'
urlpatterns = [
    path('',views.index, name='index'),
    path('page/<int:page_id>/', views.page, name='page'),
    path('article/', views.article, name='article'),
]

上記のようにarticle.htmlを作成。
この後はこの子を改造しながら学んでいくスタイルっぽい。

さらっと流されている大事な部分としては、viewsでcontextとして返している値をtemplate側で表示するには、htmlファイル上で{{ }}を記載すればいい。

インクルード

テンプレートを増やすたびにfooterやらheaderやらの共通する内容を何度も記述していくのは非効率的だ。
なので、djangoだとincludeという仕組み？を用いて共通ファイルを用意すればそれを呼び出すだけで良いようにしてくれている。
記述方法は至ってシンプルで、読み込みたいファイルを{% include 'ファイル名' %}とするだけ。

article.html

{% include 'header.html' %}

<article>
<h1>ニュースサイト</h1>
<h2>{{title}}</h2>
<p>{{content}}</p>
</article>

{% include 'footer.html' %}

header.html

<header>
    <h1>ニュースサイト</h1>
</header>

footer.html

<footer>
    <small>(c)ニュースサイト</small>
</footer>

開発サーバー(/article)にアクセスしてみると以下の画像のようにちゃんとheaderもfooterも反映されていることがわかる。

まとめ

今回は割とあっさりめの内容だったが、すべてのtemplateの原理原則的な内容だった。
変数のやりとりは肝になっている機能だと思うので、落ち着いてちゃんとコーディングできるようにしていく・・・

次回もがんばろ〜〜