Progateで作ったWebアプリをDjangoで作ってみる2！ Part6 -base.html編-

11277 ワード
Python Progate Django 駆け出しエンジニア Python テキストリンク

目標物の確認

ProgateのNode.jsコースで作ったブログアプリと同じものをDjangoで作ってみます。

Djangoでのアプリ開発の一連の流れを整理するために記していきます。

完成イメージ

レイアウトの使いまわし

どのHTMLファイルにも同じレイアウト部分がある場合、その部分だけ使い回すことができます。

そうすることで、共通部分のレイアウトに変更が生じた場合、大元のHTMLファイルだけ変更することで、個々のページを変更する必要がなくなります。そっちのほうが効率的です。

今回は下の赤枠部分がいくつかのページで使い回されています。

Djangoではテンプレートの継承（Template inheritance）と呼ばれています。

Template inheritance

定形のhtmlファイルを作成して、それを個々のHTMLファイルで読み込みます。

ベースとなるHTMLファイル、今回は赤枠の部分をbase.htmlとして作ります。

base.htmlファイルが全体のフレームワークとなり、個々のページの中（このあと作っていくlist.html、article.html）で{% block content %}の情報を入れていきます（☆1）。

base.htmlの中を見てみます。ログインしているときは、「ようこそ、ユーザー名さん」が表示されるようになり、ログインしていないときは「ようこそ、ゲストさん」と表示されるようにしました（☆2）。

さらに、ログインしているときは、「ログアウト」が、ログインしていないときは「新規登録」と「ログイン」が表示されるようにしました（☆3）。

base.html
{% load static %}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>BLOG</title>
    <link rel="stylesheet" href="{% static 'blog/style.css' %}">
  </head>
  <body>
    <header>
        <div class="header-nav">
          <a href="/">BLOG</a>
          {% if user.is_authenticated %} # ☆2
          <p>ようこそ、{{ user.username }}さん</p> # ☆2
          {% else %} # ☆2
          <p>ようこそ、ゲストさん</p>
          {% endif %} # ☆2
          <ul>
            <li><a href="{% url 'blog:list' %}">記事一覧</a></li>
            {% if user.is_authenticated %} # ☆3
              <li><a href="{% url 'blog:logout' %}">ログアウト</a></li>
            {% else %} # ☆3
              <li><a href="{% url 'blog:signup' %}">新規登録</a></li>
              <li><a href="{% url 'blog:login' %}">ログイン</a></li>
            {% endif %} # ☆3
          </ul>
        </div>
        <p>わんこの学びブログ</p>
      </header>

  </body>
{% block content %} <!--☆1-->
{% endblock content %} <!--☆1-->

個別のlist.htmlファイルを見てみます。

{% extends 'blog/base.html' %}の部分がポイントです。このコードはbase.htmlに記載されている内容をベースとして広げて使っていくイメージです（☆4）。base.htmlの中で定義した{% block content %} {% endblock content %}の中に個々のページのコードを書いていく感じです（☆5）。

ブログ記事のカテゴリーが全員か会員限定かで表示が変わるようにします（☆6）。

list.html
{% extends 'blog/base.html' %} <!--☆4-->

{% block content %} <!--☆5-->
  <main>
    <ul class="list">
      {% for object in object_list %}
      <li>
        {% if object.category == 'limited' %} <!--☆6-->
          <i>会員限定</i>
        {% endif %} <!--☆6-->
        <h2>{{ object.title }}</h2>
        <p>{{ object.summary }}</p>
        <a href="{% url 'blog:article' object.pk %}">続きを読む</a>
      </li>
      {% endfor %} <!--☆6-->
    </ul>
  </main>
{% endblock content %} <!--☆5-->

ブログ記事一覧を表示するため、ListViewを使います（☆7）。

blogapp/blog/views.py
from blog.models import BlogModel
from django.shortcuts import render, redirect
from django.views.generic import TemplateView, ListView # ☆7
from django.contrib.auth.models import User
from django.db import IntegrityError
from django.contrib.auth import authenticate, login, logout
from .models import BlogModel

class BlogTop(TemplateView):...

def signupview(request):...

def logoutview(request):...

class BlogList(ListView): # ☆7
    template_name = 'blog/list.html'
    model = BlogModel

urls.pyを編集します（☆8）。

blogapp/blog/urls.py
from django.urls import path
from .views import BlogTop, signupview, loginview, logoutview, BlogList # ☆8

app_name = 'blog'

urlpatterns = [
    path('', BlogTop.as_view(), name='top'),
    path('signup/', signupview, name='signup'),
    path('login/', loginview, name='login'),
    path('logout/', logoutview, name='logout'),
    path('list/', BlogList.as_view(), name='list'), # ☆8

]

完成。