Chapter 05無料公開

メインコンテンツ

はる@Python、Djangoプログラミング講師
はる@Python、Djangoプログラミング講師
2021.03.21に更新

メインコンテンツを作成していきます。

このチュートリアルは、認証メインのチュートリアルなので、メインコンテンツは簡易的なものにします。

プロジェクト URL

プロジェクト URL に app アプリケーションを指定します。

mysite/urls.py

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('app.urls')),
]

アプリケーション URL

アプリケーション URL にビューを指定します。

今回は、IndexViewにします。

逆引き名はindexです。

app/urls.py

from django.urls import path
from app import views

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

ビュー

TemplateViewを使用して、固定ページにします。

テンプレート名は、app/index.htmlです。

app/views.py

from django.views.generic import TemplateView


class IndexView(TemplateView):
    template_name = "app/index.html"

テンプレート

ベースとなるテンプレートを作成します。

簡単にレイアウトをするため、Bootstrap を導入しています。

app/templates/app/base.html

{% load static %}

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    />
    <link rel="stylesheet" href="{% static 'css/style.css' %}" />
    <title>カスタム認証チュートリアル</title>
  </head>

  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="/">ホーム</a>
          </li>
        </ul>
      </div>
    </nav>

    <main>
      <div class="container">{% block content %} {% endblock %}</div>
    </main>

    <footer class="py-2 bg-dark">
      <p class="m-0 text-center text-white">
        Copyright &copy; Django Startup 2020
      </p>
    </footer>

    {% block extra_js %} {% endblock %}
  </body>
</html>

index.html の中は文字だけを記載しておきます。

app/templates/app/index.html

{% extends "app/base.html" %} {% block content %}

<div class="my-5">
  <h1>Hello World!!</h1>
</div>

{% endblock %}

CSS

CSS も導入しておきます。

app/static/css/style.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #f1f1f1;
  display: flex;
  flex-flow: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

確認

メインコンテンツはこのような画面になります。

http://127.0.0.1:8000/

メインコンテンツ