トップページを作成していきます。

モデル

プロフィールモデルを作成します。

自己紹介となるので、しっかりと書いていきましょう。

app/models.py

from django.db import models


class Profile(models.Model):
    title = models.CharField('タイトル', max_length=100, null=True, blank=True)
    subtitle = models.CharField('サブタイトル', max_length=100, null=True, blank=True)
    name = models.CharField('名前', max_length=100)
    job = models.TextField('仕事')
    introduction = models.TextField('自己紹介')
    github = models.CharField('github', max_length=100, null=True, blank=True)
    twitter = models.CharField('twitter', max_length=100, null=True, blank=True)
    linkedin = models.CharField('linkedin', max_length=100, null=True, blank=True)
    facebook = models.CharField('facebook', max_length=100, null=True, blank=True)
    instagram = models.CharField('instagram', max_length=100, null=True, blank=True)
    topimage = models.ImageField(upload_to='images', verbose_name='トップ画像')
    subimage = models.ImageField(upload_to='images', verbose_name='サブ画像')

    def __str__(self):
        return self.name

Admin

管理画面でデータを登録できるようにします。

app/admin.py

from django.contrib import admin
from .models import Profile

admin.site.register(Profile)

マイグレーション実行

モデルを追加したので、マイグレーションが必要になります。

(myvenv) ~$ python3 manage.py makemigrations
(myvenv) ~$ python3 manage.py migrate

データ追加

管理画面で Profile モデルのデータを追加します。

各項目を登録しましょう。

SNS リンクは登録しないと、表示しないようになっています。

プロジェクト URL

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

mysite/urls.py

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

from django.conf.urls.static import static
from django.conf import settings

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

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

アプリケーション URL

トップページの URL を作成します。

app/urls.py

from django.urls import path
from app import views

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

ビュー

ビューを作成します。

プロフィールのデータを降順で並び変えて、テンプレートに渡しています。

app/views.py

from django.views.generic import View
from django.shortcuts import render
from .models import Profile


class IndexView(View):
    def get(self, request, *args, **kwargs):
        profile_data = Profile.objects.all()
        if profile_data.exists():
            profile_data = profile_data.order_by("-id")[0]
        return render(request, 'app/index.html', {
            'profile_data': profile_data,
        })

テンプレート

base

ベースのテンプレートを作成します。

レイアウトは Bootstrap、アイコンは FontAwesome を使用しています。

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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
    />
    <link rel="stylesheet" href="{% static 'css/style.css' %}" />
    <title>Portfolio</title>
  </head>

  <body>
    <nav class="navbar navbar-expand-lg">
      <div class="container">
        <a class="navbar-brand" href="/">
          <img src="{% static 'img/logo.svg' %}" width="80" height="80" />
        </a>
        <ul class="navbar-nav">
          <li class="nav-item mr-3">
            <a class="nav-link nav-color" href="/">HOME</a>
          </li>
          <li class="nav-item mr-3">
            <a class="nav-link nav-color" href="">ABOUT</a>
          </li>
          <li class="nav-item">
            <a class="nav-link nav-color" href="">CONTACT</a>
          </li>
        </ul>
      </div>
    </nav>

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

    <footer class="py-4 bg-dark text-center">
      <small class="text-white">&copy; 2020 Haruyasu Kaitori</small>
    </footer>

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

index

トップページのテンプレートを作成します。

ビューから渡されたデータを表示します。

app/templates/app/index.html

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

<div class="card top d-flex flex-column justify-content-end mb-4">
  <img src="{{ profile_data.topimage.url }}" alt="" />
  <div class="overlay text-white p-5">
    <h1 class="title">{{ profile_data.title }}</h1>
    <h5 class="subtitle">{{ profile_data.subtitle }}</h5>
  </div>
</div>

{% endblock %}

CSS

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;
}

/* index */

.navbar-nav {
  flex-direction: row !important;
}

.nav-color {
  color: black;
}

.nav-color:hover {
  color: #ee6c4d;
}

.nav-color:after {
  content: "";
  display: block;
  height: 2px;
  background: #ee6c4d;
  margin-top: 6px;
  opacity: 0;
  transform: translateY(12px);
  transition: all 0.3s ease-in-out;
}

.nav-color:hover:after {
  transform: translateY(0px);
  opacity: 1;
}

.top img {
  object-fit: cover;
  height: 500px;
}

.overlay {
  position: absolute;
}

.title {
  font-size: 4rem;
}

.subtitle {
  font-size: 2rem;
}

確認

トップページがこのように表示されるか確認してください。

画像はアップロードした画像になっているはずです。

トップページ