【初めてのDjango】（入門編 #03）コンテキスト情報とテンプレートタグの活用

urlpatterns = [
    path('', views.IndexView.as_view(), name="index"), 
    path('menu', views.MenuView.as_view(), name="menu"),    # 追加
]

class MenuView(generic.TemplateView):
    template_name = "menu.html"

<!-- base.htmlに組み込むためのおまじない -->
{% extends 'base.html' %}

<!-- 静的ファイルの読み込み -->
{% load static %}

<!-- base.htmlのtitleブロックに組み込み -->
{% block title %}トップページ{% endblock title %}

<!-- base.htmlのcontentsブロックに組み込み -->
{% block contents %}
<section class="menu">
    <div>
        <h2>MENU</h2>
    </div>
</section>
{% endblock contents %}

<nav>
    <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="{% url 'cafe_app:menu' %}">MENU</a></li>    <!-- 編集 -->
        <li><a href="#">CONTACT</a></li>
    </ul>
</nav>

<a href="{% url 'cafe_app:menu' %}">MENU</a>

urlpatterns = [
    path('', views.IndexView.as_view(), name="index"), 
    path('menu', views.MenuView.as_view(), name="menu"),
]

<a href="{% url 'cafe_app:index' %}">TOP</a>

sample_context = {
  "name": "Tom", 
  "age": 27
}

sample_context["name"]   # Tom
sample_context["age"]    # 27

<p>{{ name }}<p>   >> Tom
<p>{{ age }}<p>    >> 27

class MenuView(generic.TemplateView):
    template_name = "menu.html"

    # コンテキストを取得
    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        return context

class MenuView(generic.TemplateView):
    template_name = "menu.html"

    # コンテキストを取得
    def get_context_data(self, **kwargs):
        # 継承元であるTemplateViewのget_context_data()メソッド
        context = super().get_context_data(**kwargs)

        # 中身確認
        print(context)
   
        return context

{'view': <cafe_app.views.MenuView object at 0x102f58610>}

class MenuView(generic.TemplateView):
    template_name = "menu.html"

    # コンテキストを取得
    def get_context_data(self, **kwargs):
        # 継承元であるTemplateViewのget_context_data()メソッド
        context = super().get_context_data(**kwargs)

        # 値追加
        context['weather'] = '晴れ'

        # 中身確認
        print(context)
   
        return context

{'view': <cafe_app.views.MenuView object at 0x102b3fb20>, 'weather': '晴れ'}

<div class="wrapperHeader">
    <h2>MENU</h2>
    <p>{{ weather }}</p>
</div>

<ul class="ulMenu">
    <li class="menuContent">
        <img src="{% static 'assets/img/brend-coffee.jpg' %}" alt="brend-coffee">
        <h3>ブレンドコーヒー</h3>
        <p class="price">420円</p>
        <p class="description">
            当店おすすめの一杯です。<br>
            迷った場合はぜひこちらをご堪能ください。
        </p>
    </li>
    <li class="menuContent">
        <img src="{% static 'assets/img/cafe-au-lait.jpg' %}" alt="cafe-au-lait">
        <h3>カフェオレ</h3>
        <p class="price">500円</p>
        <p class="description">
            産地直送の贅沢ミルクを使用しています。<br>
            オリジナルのラテアートも自慢です。
        </p>
    </li>
    <li class="menuContent">
        <img src="{% static 'assets/img/black-tea.jpg' %}" alt="black-tea">
        <h3>紅茶</h3>
        <p class="price">480円</p>
        <p class="description">
            圧倒的な茶葉使用。<br>
            故郷でもない外国の景色に想いを馳せることができます。
        </p>
    </li>
</ul>

<li>
    <img src="<画像のパス>">
    <h3>メニューの名前</h3>
    <p>価格</p>
    <p>説明</p>
</li>

menu_items = [<商品に関する情報のオブジェクトのリスト>]

# ループさせて中身を取り出す
for item in menu_items:
    print(f'商品名: {item.name}')
    print(f'価格: {item.price}')
    print(f'説明: {item.description}')

<div class="wrapperHeader">
    <h2>MENU</h2>
    <p>{{ weather }}</p>
    {% if weather == '晴れ' %}
        <p>外出日和です</p>
    {% else %}
        <p>家に篭りましょ</p>
    {% endif %}
</div>

class MenuView(generic.TemplateView):
    template_name = "menu.html"

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        context['weather'] = '晴れ'
        context['loop_item'] = [1, 2, 3]   # 追加

        print(context)

        return context

<div class="wrapperHeader">
    <h2>MENU</h2>
    <p>{{ weather }}</p>
    <!-- loop_sample = [1, 2, 3] -->
    {% for i in loop_sample %}
        <p>{{ i }}</p>
    {% endfor %}
</div>

...

class MenuView(generic.TemplateView):
    template_name = "menu.html"

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        context['menu_items'] = [
            {
                'name': 'ブレンドコーヒー', 
                'price': 420, 
                'description': '当店おすすめの一杯です。\n迷った場合はぜひこちらをご堪能ください。', 
                'img_path': 'brend-coffee.jpg'
            }, 
            {
                'name': 'カフェオレ', 
                'price': 500, 
                'description': '産地直送の贅沢ミルクを使用しています。\nオリジナルのラテアートも自慢です。', 
                'img_path': 'cafe-au-lait.jpg'
            }, 
            {
                'name': '紅茶', 
                'price': 480, 
                'description': '圧倒的な茶葉使用。\n\n故郷でもない外国の景色に想いを馳せることができます。', 
                'img_path': 'black-tea.jpg'
            }, 
        ]

        return context

{% extends 'base.html' %}

{% load static %}

{% block title %}トップページ{% endblock title %}

{% block contents %}
<section class="sectionMenu">
    <div class="wrapperHeader">
        <h2>MENU</h2>
    </div>
    <div class="wrapperMenu">
        <ul class="ulMenu">
            {% if menu_items %}
                {% for item in menu_items %}
                    <li class="menuContent">
                        <img src="{% static 'assets/img/'|add:item.img_path %}" alt="black-tea">
                        <h3>{{ item.name }}</h3>
                        <p class="price">{{ item.price }}円</p>
                        <p class="description">{{ item.description }}</p>
                    </li>
                {% endfor %}
            {% endif %}
        </ul>
    </div>
    <a class="backToHome" href="{% url 'cafe_app:index' %}">＜＜＜ホームに戻る</a>
</section>
{% endblock contents %}