#htmlをテンプレート指定
今回はhtmlファイルを用いたwebページ作成です。
ようやくフロントエンド的な作業が含まれますね。
htmlの準備からページ表示までの流れを一気に覚えてしまいましょう！
最終的なファイル状況はこの通り
mysite
│ db.sqlite3
│ manage.py
├─mysite
│ │ settings.py
│ │ urls.py
└─test_app
│ admin.py
│ apps.py
│ models.py
│ tests.py
│ urls.py
│ views.py
├─migrations
├─templates
└─test_app
└─index.html
urls.pyと、views.py、templates/test_app/header.htmlを作業してゆきます。
##renderをもちいたviews関数作成
from django.shortcuts import render
# Create your views here.
def index(request):
context = {
'message' : '初めてのメッセージ',
'content' : 'ようこそ、Djangoは楽しい！',
}
return render(request,'test_app/index.html',context)
contextで辞書作成、渡したい値を設定しています。さらにrequestを引き数にrender関数を書いています。htmlファイルの指定方法が危険で、これはtemplateディレクトリが自動的にdjangoに認識されているために、直下のtest_post/index.htmlという指定になっています。
templatesディレクトリはrender関数に含めないよう注意しましょう。
##サンプルhtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>インデックスページの表示</p>
<ul>
<li>{{ message }}</li>
<li>{{ content }}</li>
</ul>
</body>
</html>
成功するとこんなページが表示されます。
##{{ }} や{% %}について
test_app/templates/test_app/index.htmlとなるようにファイルを作成。
先ほどcontextで設定した辞書のキーをhtml側でpythonスクリプト用の {{ }}で囲むと値が表示されます。
値のみを表示させたい場合はこの{{ }}を使いますね。
for文やif文を使う場合の{% %}とは違う使い方なので注意！
##最後に
今回はhtmlが出てきており、新たな勉強知識が増えたのではないかと不安に思われるかもしれません。
また、今回も複数のファイルを追うので一苦労。
めちゃくちゃ気持ちわかります💦
だって頭一個やし。。。おいつけんし。
でも結局これは慣れで、ネット上で見つかるコードは記載者は動かせてるしいい気分そうなのに、こちら初心者の気分になれよ！ 間違ったコード書いてんじゃねえか！？って怒りがこみ上げることがしょっちゅうありました(-_-;)
そんな時はPC閉じて、休憩休憩☕
またやりたくなった時に戻ればいいんです！！
そんなコード覚えるのが面倒な時はhtmlファイルはコピペで構わないと思います。
{{ }}や{% %}が含まれる場合はどんな変数が渡されているのか、などと目で追うのみで構わないと思います。
目先を追いすぎると船酔いするとソフトバンク社長の孫さんは言います。
目標は何か。それはDjangoになれること、ですよね。HTMLをマスターするわけではありません。
気長に頑張りましょう！