共通のテンプレートを呼び出す

## はじめに
3つの記事で構成しています

1. [Djangoをセットアップする](https://qiita.com/k-shinto/items/1c3b77cd94e2c35faf1d)
- （この記事）
- [Django Bootstrap4の導入からSass(SCSS)導入まで](https://qiita.com/k-shinto/items/c967c1e677bfe02f92b8)

同じプロジェクト内のアプリで共通のテンプレートを呼び出す方法
以下のような雛形をアプリ毎に変更を加えていく必要になるので一括管理がしたい

```
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
  </body>
</html>
```

## ビューを表示させるための準備

```sampleproject/urls.py
from django.contrib import admin
from django.urls import path, include ←追加

urlpatterns = [
    path('sampleapp/', include('sampleapp.urls')),  ←追加
    path('admin/', admin.site.urls),
]
```

アプリディレクトリ内に`urls.py`を追加する
`touch sampleapp/urls.py`

```sampleapp/urls.py
from django.urls import path
from . import views

app_name = 'sampleapp'
urlpatterns = [
    path('', views.index, name='index'),
]
```

```sampleapp/views.py
from django.shortcuts import render

def index(request):
    return render(request, 'sampleapp/index.html')
```

 app/templates/appの様に追加する
`mkdir sampleapp/templates sampleapp/templates/sampleapp`

```sampleapp/templates/sampleapp/index.html
<h1>Hello, World!</h1>
```

ターミナルで`python manage.py runserver`

ブラウザで`http://127.0.0.1:8000/`にアクセスします
![スクリーンショット 2018-09-09 15.06.23.png](https://qiita-image-store.s3.amazonaws.com/0/222146/5b214c8e-5c94-a68b-9047-e491581e4cec.png)
無事「Hello, World!」と表示させることができました

## ベースとなるhtmlファイルを作成する
##### プロジェクトディレクトリ直下にtemplatesを追加
`mkdir templates`

##### 先ほど作成したtemplatesの中にbase.htmlを追加
`touch templates/base.html`

##### base.htmlを編集する

```templates/base.html
{% load i18n static %}
<!DOCTYPE html>{% get_current_language as LANGUAGE_CODE %}
<html lang="{{ LANGUAGE_CODE|default:"en-us" }}">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>{% block title %}SampleProject{% endblock %}</title>
  </head>
  <body>
    <div class="container">
      {% block content %}
      {{ content }}
      {% endblock %}
      foo bar baz <!-- base.htmlが読み込まれたか確認 -->
    </div>
  </body>
</html>
```

##### settings.pyを編集する

```settings.py
.
.
.
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',
            ],
        },
    },
]
.
.
.
```

##### index.htmlを編集する
```sampleapp/templates/sampleapp/index.html
{% extends "base.html" %}
{% block content %}
<h1>Hello, World!</h1>
{% endblock %}
```

## 確認

#### ブラウザをリロードしてみましょう
![スクリーンショット 2018-09-09 15.32.09.png](https://qiita-image-store.s3.amazonaws.com/0/222146/4e774521-dfc3-6ef1-9ec0-0d4e1439a2b1.png)

base.htmlに記述した「foo bar baz」が追加されている、title属性が確認できれば成功です


## 補足：title属性をページ毎に変更する

```sampleapp/templates/sampleapp/index.html
{% extends "base.html" %}
{% block title %}Hello,World{% endblock %} ←注目
{% block content %}
<h1>Hello, World!</h1>
{% endblock %}
```