フォルダ構成
- 下記の構成でプロジェクト全体で利用するテンプレートとアプリケーションで利用するテンプレートを使い分ける
├── application
│ ├── templates (アプリケーションのテンプレート)
│ │ └── index.html
│ └── views.py
├── templates (プロジェクト全体のテンプレート)
│ └── app
│ ├── base.html
│ ├── footer.html
│ └── header.html
└── project
├── settings.py
settings.py
- DIRSパラメータの箇所にプロジェクト全体で利用するテンプレートフォルダのパスを指定する
import os
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [
os.path.join(BASE_DIR, 'templates'),
],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
( 〜 省略 〜)
プロジェクト全体のテンプレート
<!doctype html>
<html lang="ja">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<title>{{ title }}</title>
</head>
<body>
{% include "app/header.html" %}
{% block content %}
{% endblock %}
{% include "app/footer.html" %}
</body>
</html>
templates/app/header.html
<div class="w-full">
<nav class="bg-white shadow-lg">
<div class="md:flex items-center justify-between py-2 px-8 md:px-12">
<div class="flex justify-between items-center">
<div class="text-2xl font-bold text-gray-800 md:text-3xl">
<a href="#">Brand</a>
</div>
<div class="md:hidden">
<button type="button" class="block text-gray-800 hover:text-gray-700 focus:text-gray-700 focus:outline-none">
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24">
<path class="hidden" d="M16.24 14.83a1 1 0 0 1-1.41 1.41L12 13.41l-2.83 2.83a1 1 0 0 1-1.41-1.41L10.59 12 7.76 9.17a1 1 0 0 1 1.41-1.41L12 10.59l2.83-2.83a1 1 0 0 1 1.41 1.41L13.41 12l2.83 2.83z"/>
<path d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"/>
</svg>
</button>
</div>
</div>
<div class="flex flex-col md:flex-row hidden md:block -mx-2">
<a href="#" class="text-gray-800 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium py-2 px-2 md:mx-2">Home</a>
<a href="#" class="text-gray-800 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium py-2 px-2 md:mx-2">About</a>
<a href="#" class="text-gray-800 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium py-2 px-2 md:mx-2">Contact</a>
</div>
</div>
</nav>
<div class="flex bg-white" style="height:600px;">
<div class="flex items-center text-center lg:text-left px-8 md:px-12 lg:w-1/2">
<div>
<h2 class="text-3xl font-semibold text-gray-800 md:text-4xl">Build Your New <span class="text-indigo-600">Idea</span></h2>
<p class="mt-2 text-sm text-gray-500 md:text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis commodi cum cupiditate ducimus, fugit harum id necessitatibus odio quam quasi, quibusdam rem tempora voluptates. Cumque debitis dignissimos id quam vel!</p>
<div class="flex justify-center lg:justify-start mt-6">
<a class="px-4 py-3 bg-gray-900 text-gray-200 text-xs font-semibold rounded hover:bg-gray-800" href="#">Get Started</a>
<a class="mx-4 px-4 py-3 bg-gray-300 text-gray-900 text-xs font-semibold rounded hover:bg-gray-400" href="#">Learn More</a>
</div>
</div>
</div>
<div class="hidden lg:block lg:w-1/2" style="clip-path:polygon(10% 0, 100% 0%, 100% 100%, 0 100%)">
<div class="h-full object-cover" style="background-image: url(https://images.unsplash.com/photo-1498050108023-c5249f4df085?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1352&q=80)">
<div class="h-full bg-black opacity-25"></div>
</div>
</div>
</div>
</div>
templates/app/footer.html
<footer class="mt-16">
<div class="max-w-screen-lg mx-auto border-none px-4">
<section
class="flex flex-col md:flex-row md:justify-between md:border-solid md:border-t text-gray-700 font-light text-sm pt-4 pb-6 md:pt-5 md:pb-6 w-full"
>
<div>
<p class="leading-8 tracking-wide">
© hogehoge
</p>
</div>
<div>
<p class="leading-8 tracking-wide">Privacy Policy</p>
</div>
</section>
</div>
</footer>
アプリケーションのテンプレート
{% extends 'app/base.html' %}
{% block content %}
<div>
<section class="py-40 bg-gray-100 bg-opacity-50 h-screen">
<div class="mx-auto container max-w-2xl md:w-3/4 shadow-md">
<div class="bg-gray-100 p-4 border-t-2 bg-opacity-5 border-indigo-400 rounded-t">
<div class="max-w-sm mx-auto md:w-full md:mx-0">
<div class="inline-flex items-center space-x-4">
<img
class="w-10 h-10 object-cover rounded-full"
alt="User avatar"
src="https://avatars3.githubusercontent.com/u/72724639?s=400&u=964a4803693899ad66a9229db55953a3dbaad5c6&v=4"
/>
<h1 class="text-gray-600">Charly Olivas</h1>
</div>
</div>
</div>
<div class="bg-white space-y-6">
<div class="md:inline-flex space-y-4 md:space-y-0 w-full p-4 text-gray-500 items-center">
<h2 class="md:w-1/3 max-w-sm mx-auto">Account</h2>
<div class="md:w-2/3 max-w-sm mx-auto">
<label class="text-sm text-gray-400">Email</label>
<div class="w-full inline-flex border">
<div class="pt-2 w-1/12 bg-gray-100 bg-opacity-50">
<svg
fill="none"
class="w-6 text-gray-400 mx-auto"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
/>
</svg>
</div>
<input
type="email"
class="w-11/12 focus:outline-none focus:text-gray-600 p-2"
placeholder="email@example.com"
disabled
/>
</div>
</div>
</div>
<hr />
<div class="md:inline-flex space-y-4 md:space-y-0 w-full p-4 text-gray-500 items-center">
<h2 class="md:w-1/3 mx-auto max-w-sm">Personal info</h2>
<div class="md:w-2/3 mx-auto max-w-sm space-y-5">
<div>
<label class="text-sm text-gray-400">Full name</label>
<div class="w-full inline-flex border">
<div class="w-1/12 pt-2 bg-gray-100">
<svg
fill="none"
class="w-6 text-gray-400 mx-auto"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
/>
</svg>
</div>
<input
type="text"
class="w-11/12 focus:outline-none focus:text-gray-600 p-2"
placeholder="Charly Olivas"
/>
</div>
</div>
<div>
<label class="text-sm text-gray-400">Phone number</label>
<div class="w-full inline-flex border">
<div class="pt-2 w-1/12 bg-gray-100">
<svg
fill="none"
class="w-6 text-gray-400 mx-auto"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"
/>
</svg>
</div>
<input
type="text"
class="w-11/12 focus:outline-none focus:text-gray-600 p-2"
placeholder="12341234"
/>
</div>
</div>
</div>
</div>
<hr />
<div class="md:inline-flex w-full space-y-4 md:space-y-0 p-8 text-gray-500 items-center">
<h2 class="md:w-4/12 max-w-sm mx-auto">Change password</h2>
<div class="md:w-5/12 w-full md:pl-9 max-w-sm mx-auto space-y-5 md:inline-flex pl-2">
<div class="w-full inline-flex border-b">
<div class="w-1/12 pt-2">
<svg
fill="none"
class="w-6 text-gray-400 mx-auto"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
/>
</svg>
</div>
<input
type="password"
class="w-11/12 focus:outline-none focus:text-gray-600 p-2 ml-4"
placeholder="New"
/>
</div>
</div>
<div class="md:w-3/12 text-center md:pl-6">
<button class="text-white w-full mx-auto max-w-sm rounded-md text-center bg-indigo-400 py-2 px-4 inline-flex items-center focus:outline-none md:float-right">
<svg
fill="none"
class="w-4 text-white mr-2"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
/>
</svg>
Update
</button>
</div>
</div>
<hr />
<div class="w-full p-4 text-right text-gray-500">
<button class="inline-flex items-center focus:outline-none mr-4">
<svg
fill="none"
class="w-4 mr-2"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
/>
</svg>
Delete account
</button>
</div>
</div>
</div>
</section>
</div>
{% endblock %}
- アプリケーションのview.pyからテンプレートを呼び出す
from django.shortcuts import render
from django.http import HttpResponse
# Create your views here.
def index(request):
params = {
'message': "aaaa",
}
return render(request, 'index.html', params)
参考
