Djangoでbase.htmlを用いたブログを作成する。

こんにちは！
今回は、Djangoブログをテンプレートを用いて作成したいと思います。

使用環境は以下となります。
python==3.6, django==2.2, OS==windows10

初めに仮想環境を作成し、設定してDjangoをインストールします。

```python:command
python -m venv venv
venv\Scripts\activate
pip install django
```

その後、プロジェクトを作成します。（今回はproject1にします。）

```python:command
python -m django startproject project1
```

ここで軽くファイルの紹介をします。

```python:project1
manage.py 開発用サーバーの起動やデータベースへのデータの反映に用います。
db.sqlite3 データの保存先です。データベースと考えてください。
__pycahe .pyをコンパイルした.pycの保存先です。djangoでは軽量化のために.pyを.pycにします。
__init__.py パッケージを読んだ際の初期化用のファイル
wsgi.py djangoを実際のサーバーにデプロイする際に必要なファイル
urls.py URLに対応した処理を実行するファイル
setting.py django全体の設定をするファイル
```

次にdjangoの設定を日本語にします。

```python:setting.py
LANGUAGE_CODE = 'ja'

TIME_ZONE = 'Asia/Tokyo'
```

次にアプリケーションを追加します。ここではnewappとします。

```python:command
python manage.py startapp newapp
```

newapp内のファイルも紹介します。

```python:newapp
migrations データベース関連のフォルダーですが、基本的に触ることはありません。
admin.py 管理画面の設定ファイル
apps.py アプリケーションの詳細ですが、基本的に触ることはありません。
models.py データベースの設定や追加を行うファイルです。
tests.py djangoアプリケーションのテストを書くファイルです。
views.py urls.pyから呼び出される処理を書きます。
```

次に作成したアプリケーションをsetting.pyに登録します。

```python:setting.py
INSTALLED_APPS = [
    'newapp.apps.NewappConfig', 追記
...
]

次にproject1内のurls.pyを編集します。

```python:urls.py
from django.contrib import admin
from django.urls import path, include #includeはURLの対応を整理するのに便利です。

urlpatterns = [
    path('admin/', admin.site.urls),
    path('newapp', include('myapp.urls'))
]
```

次にnewapp内にurls.pyを作成します。

```python:newapp/urls.py
from django.urls import path
from .import views

app_name = 'newapp'

urlpatterns = [
    path('', views.index, name='index'), #viewsのindex関数を利用する。
    path('about/', views.about, name='about'),
]
```

次にviews.pyを編集します。

```python:views.py
from django.shortcuts import render

def index(request):
    context = {
        'name':'newappuser' #nameをindex.htmlへ送る
    }
    #return render(request, 'newapp/index.html') #コメントありがとうございます。
    return render(request, 'newapp/index.html',context)

def about(request):
    return render(request, 'newapp/about.html')
```

templates内にbase.htmlを作成します。
base.htmlの存在理由は共通設定を繰り返し利用と修正をしやすくするためです。

```python:templates/newapp/base.html
<!doctype html>
<html lang="ja">
  <head>
    <title>newapp</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
  </head>
  <body>
    {% block content %}
    {% endblock %}

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
  </body>
</html>
```

次にindex.htmlを作成します。

```python:templates/newapp/index.html
{% extends 'myapp/base.html' %}

{% block content %}
<h1>Hello, {{ name }}</h1>
{% endblock %}
```

次にabout.htmlを作成します。

```python:templates.newapp/about.html
{% extends 'newapp/base.html' %}

{% block content %}
<h1>Aboutページです</h1>
{% endblock %}
```

最後にサーバーを立ち上げれば完成です。

```python:command
python manage.py runserver
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214013/de82d2e2-ec08-fbbc-460b-2685b3ab169e.png)