今回は、テンプレート（画面の表示部分）の使い方についてみていきます。
アプリの作成
まずはアプリを作成します。
今回は「my_app」という名前にします。
python manage.py startapp my_app
そして、作成したアプリを settings.py の INSTALLED_APPS に設定します。
INSTALLED_APPS = [
.
.
.
'my_app',
]テンプレートの作成
「my_app」の中に「templates」ディレクトリを作成し、その中に「index.html」を作成します。
<h1>Hello</h1>
次に、「my_app」の中の「views.py」を以下のように書きます。
from django.shortcuts import render
from django.http import HttpResponse
# Create your views here.
def index(request):
return render(request, 'index.html')render()の第二引数にファイルを指定します。
「templates」という名前のディレクトリの中身を自動的に探すため、「templates/ファイル名」とする必要はありません。
次に、「my_app」の中に「urls.py」を作成し、以下のように書きます。
from django.urls import path
from . import views
app_name = 'my_app'
urlpatterns = [
path('', views.index, name='index'),
]
そして、この url の設定を、プロジェクトディレクトリの「urls.py」に設定します。
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('my_app/', include('my_app.urls')),
]
これで「/my_app」にアクセスすると、「Hello」と表示されるかと思います。
テンプレートディレクトリの位置の変更
「settings.py」の中から「BASE_DIR」が定義されているところを探し、
以下のように修正します。
from pathlib import Path
import os
# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent
TEMPLATE_DIR = os.path.join(BASE_DIR, 'templates')
そして、同ファイルの「TEMPLATES」の「DIRS」に、いま定義した「TEMPLATE_DIR」を指定します。
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [TEMPLATE_DIR,],
.
.
.
次に、アプリディレクトリ（my_app）と同階層に「templates」ディレクトリを作成し、その中に「index.html」を作成します。
これで「/my_app」にアクセスすると「Good bye」と表示され、
テンプレートディレクトリの位置を変更できたことが確認できます。
テンプレートに値を渡す
「my_app」の「views.py」の中で context を用いることで、テンプレートに値を渡すことができます。
def index(request):
return render(request, 'index.html', context={'msg': 'Hello'})
この例では、「msg」というキーで「Hello」という値を渡しています。
ではテンプレートでこの値を使用します。
<h1>{{ msg }}</h1>
このように書くことで、「Hello」と表示されます。
制御文の使用
テンプレートに if, for などの制御文を入れるには、「{% %}」で囲みます。
from django.shortcuts import render
from django.http import HttpResponse
# Create your views here.
def index(request):
return render(request, 'index.html', context={'msg': 'Hello'})
def home(request):
info = {
'name': 'taro',
'age': 20,
'favorite_fruits': ['apple', 'grape', 'lemon']
}
return render(request, 'home.html', context={
'info': info,
})from django.urls import path
from . import views
app_name = 'my_app'
urlpatterns = [
path('', views.index, name='index'),
path('home', views.home, name='home'),
]<p>名前： {{ info.name }}</p>
<p>好きな果物</p>
<ul>
{% for fruit in info.favorite_fruits %}
<li>{{ fruit }}</li>
{% endfor %}
</ul>
{% if info.age < 20 %}
<p>未成年です</p>
{% else %}
<p>成人です</p>
{% endif %}
ブラウザで「/my_app/home」にアクセスしたときの表示↓
テンプレートの継承
<head>タグなど複数のページにおける共通部分を定義し、
それを継承させることで使いまわすことができます。
今回は、継承元のファイルを「base.html」、
継承先のファイルを「sample1.html」「sample2.html」とします。
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>{% block title %}ページ{% endblock %}</title>
</head>
<body>
{% block content %}{% endblock %}
</dody>
</html>{% extends 'base.html' %}
{% block title %}Sample1{{ block.super }}{% endblock %}
{% block content %}
<p>これはSample1です</p>
{% endblock %}{% extends 'base.html' %}
{% block title %}Sample2{{ block.super }}{% endblock %}
{% block content %}
<p>これはSample2です</p>
{% endblock %}
{% block 名前 %} とすることで、ブロックに名前を付けられます。
{% extends ‘ファイル名’ %} とすることで、継承元のファイルを指定します。
{{ block.super }} とすることで、親の同ブロックの中身を表示できます。
今回の例だと、
Sample1{{ block.super }}
↓
Sample1ページ
に置き換わります。
そして、パスを通します。
.
.
.
def sample1(request):
return render(request, 'sample1.html')
def sample2(request):
return render(request, 'sample2.html')from django.urls import path
from . import views
app_name = 'my_app'
urlpatterns = [
path('', views.index, name='index'),
path('home', views.home, name='home'),
path('sample1', views.sample1, name='sample1'),
path('sample2', views.sample2, name='sample2'),
]
ブラウザで「/my_app/sample1」「/my_app/sample2」にそれぞれアクセスし、
検証ツールでHTMLを確認すると、以下のようにきちんと継承されているのがわかります。
フィルター機能
フィルターを用いることで、テンプレート上の値を変換することができます。
文章全体を指定
{% filter フィルターの種類 %}~{% endfilter %}
各データを指定
{{ データ | フィルターの種類 }}
例：upper（大文字に変換）
<p>{% filter upper %}abc{% endfilter %}</p>
<p>{{ 'def' | upper }}</p>
ブラウザの表示↓
たくさんの種類のフィルターがあるので、詳細は下記URLを参照
https://docs.djangoproject.com/ja/3.1/ref/templates/builtins/#built-in-filter-reference
テンプレートでの画面遷移
基本的な使い方
<a>タグの href に以下のような指定をします。
<a href="{% url 'アプリ名:パス名' %}">home</a>
例えば、遷移先を home にする場合、
「my_app」の「urls.py」は以下のようになっているので、
from django.urls import path
from . import views
app_name = 'my_app'
urlpatterns = [
path('', views.index, name='index'),
path('home', views.home, name='home'),
path('sample1', views.sample1, name='sample1'),
path('sample2', views.sample2, name='sample2'),
]
下記のように指定することで、home を遷移先にすることができます。
<a href="{% url 'my_app:home' %}">home</a>値を渡す
例えば、「/home/○○」のようなURLに遷移する場合を見てみます。
（今回は「/home/jiro」に遷移）
「index.html」を以下のように修正します。
<a href="{% url 'my_app:home' name='jiro' %}">home</a>
次に、「urls.py」の home のパスを修正します。
path('home/<name>', views.home, name='home'),
そして、「views.py」の home 関数を修正します。
def home(request, name):
info = {
'name': name,
'age': 20,
'favorite_fruits': ['apple', 'grape', 'lemon']
}
return render(request, 'home.html', context={
'info': info,
})
これで、<a>タグから home へ遷移すると、jiro という値を渡せていることが確認できます。
静的コンテンツの利用
cssファイル、jsファイル、画像ファイルなど静的コンテンツを利用したい場合、
「static」というディレクトリを用います。
今回は「my_app」と同階層に「static」ディレクトリを作り、その中に「sample.jpg」というサンプル画像を保存しました。
では、まずは「static」ディレクトリの位置を settings.py に設定します。
from pathlib import Path
import os
# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent
TEMPLATE_DIR = os.path.join(BASE_DIR, 'templates')
STATIC_DIR = os.path.join(BASE_DIR, 'static')
.
.
.
STATIC_URL = '/static/'
STATICFILES_DIRS = [
STATIC_DIR
]
そして、静的コンテンツを使いたいテンプレートで以下のように書きます。
{% load static %}
<img src="{% static 'sample.jpg' %}">
これだけで画像が表示されます。
また、読込先のファイルを識別子で分けて管理したい場合、
以下のように書くことで実現できます。
STATICFILES_DIRS = [
('名前', STATIC_DIR)
]<img src="{% static '名前/sample.jpg' %}">
本日は以上になります。
ご覧いただきありがとうございました！
続きはこちら↓
コメント