1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Djangoを久しぶりに触る人が基本を思い出すための記事(2/3)~templates(html)~

Last updated at Posted at 2020-12-03

##この記事の趣旨
Djangoを久しぶりに触らんといけなくなったけど、基本的なことを忘れてしまった。
そんな方に向けての記事です。(その2)
今回はtemplates(html)の記述方法。

【前回記事】Djangoを久しぶりに触る人が基本を思い出すための記事(1/3)~ターミナル、urls.py、views.py~

##基本
htmlファイルはtemplatesフォルダ内に置く。
djangoで使うif文やfor文などはhtmlファイル内に{% %}で記述する

example.html
{% if 条件文 %}
処理したい内容
{% endif %}

##ベースとなるhtmlの作成
サイトで固定する部分(サイドバーなど)はベースとなるhtmlを作成しておく。
変更となる部分だけを別のhtmlで記述する。

ベースとなるhtmlの変更したい部分を{% block name %}{% endblock %}で記述する。

base.html
<head>
 <!-- 固定となる部分は普通に記述する-->
</head>
<body>
    {% block name %}{% endblock %}<!-- 変更したい部分をblockで指定。
                      nameは任意の名前。-->
</body>

変更したい部分を記述したhtmlでは{% extends base.html %}でベースhtmlを必ず宣言。
変更部分を{% block name %}{% end block %}で記述する。

example.html
{% 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の第三引数で辞書型で渡す内容を指定

views.py
def example(request):
    return render(request, 
                  'example.html', #第二引数で渡す先のhtmlを指定
                  {'use_name':return_name} ) #第三引数で辞書型で渡す内容を指定

##views.pyで受け取った内容をhtmlで表示
views.pyから受け取った内容をhtmlに{{ }}で指定する。

example.html
<body>
{{use_name}} <!--第三引数の辞書の名前-->
<body>

##これらを組み合わせた例
下の例では、これまでの説明に加えて、
modelsやformsで取得した値も表示するようにしています。
modelsやformsについては次回の記事で触れます。

example.html
{% 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 %}
1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?