##この記事の趣旨
Djangoを久しぶりに触らんといけなくなったけど、基本的なことを忘れてしまった。
そんな方に向けての記事です。(その2)
今回はtemplates(html)の記述方法。
【前回記事】Djangoを久しぶりに触る人が基本を思い出すための記事(1/3)~ターミナル、urls.py、views.py~
##基本
htmlファイルはtemplatesフォルダ内に置く。
djangoで使うif文やfor文などはhtmlファイル内に{% %}で記述する
{% if 条件文 %}
処理したい内容
{% endif %}
##ベースとなるhtmlの作成
サイトで固定する部分(サイドバーなど)はベースとなるhtmlを作成しておく。
変更となる部分だけを別のhtmlで記述する。
ベースとなるhtmlの変更したい部分を{% block name %}{% endblock %}で記述する。
<head>
<!-- 固定となる部分は普通に記述する-->
</head>
<body>
{% block name %}{% endblock %}<!-- 変更したい部分をblockで指定。
nameは任意の名前。-->
</body>
変更したい部分を記述したhtmlでは{% extends base.html %}でベースhtmlを必ず宣言。
変更部分を{% block name %}{% end block %}で記述する。
{% extends 'base.html' %}
{% block name %} <!--nameはbase.htmlで指定した名前-->
<p>変更部分を記述します</P>
<p>タグなどは普通に使えます</P>
{% endblock %}
これでexample.htmlにアクセスした時に、ベースを受け継いだhtmlが表示される。
(htmlはurls.pyとviews.pyでルーティングしないとアクセスできない)
ちなみに、ユーザーはbase.htmlにはアクセスしない。
##views.pyからhtmlへのデータの渡しかた
前回記事でも触れましたが、
●views.py内の関数(またはクラス)からの戻り値"render"などで渡す内容を指定
●renderの第二引数で渡す先のhtmlを指定
●renderの第三引数で辞書型で渡す内容を指定
def example(request):
return render(request,
'example.html', #第二引数で渡す先のhtmlを指定
{'use_name':return_name} ) #第三引数で辞書型で渡す内容を指定
##views.pyで受け取った内容をhtmlで表示
views.pyから受け取った内容をhtmlに{{ }}で指定する。
<body>
{{use_name}} <!--第三引数の辞書の名前-->
<body>
##これらを組み合わせた例
下の例では、これまでの説明に加えて、
modelsやformsで取得した値も表示するようにしています。
modelsやformsについては次回の記事で触れます。
{% extends 'base.html' %}
{% block title %}商品詳細{% endblock %}
{% block content %}
<h3>{{ example.name }}</h3>
<div class=""><img src ="{{ example.url }}" style="width:250px;height:250px;object-fit:cover"></div>
{{ exmaple.price }}円
<form method="post" action="{% url 'add' example.id %}">
{% csrf_token %}
<input type="submit" value="カートに追加">
</form>
<a href="{% url 'edit' example.id %}">編集</a>
{% endblock %}