【Django】base.html(ベーステンプレート)の作成【ブログアプリ2】

base.html(ベーステンプレート)の作成について
base.html(ベーステンプレート)を作成する手順
1. base.htmlの作成
2. ディレクトリ構成の確認
Django記事一覧

base.html(ベーステンプレート)の作成について

前回は以下を行った。

モデルの作成とマイグレーション
adminへの登録(モデルを管理者画面で表示)
管理者ユーザーの作成
urls.pyの作成(アプリケーションディレクトリ内)

今回はbase.htmlの作成を行う。

base.html(ベーステンプレート)を作成することで、複数のhtmlファイルに共通する部分を省略することができる。具体的には、各htmlファイルがこのbase.htmlを継承することで実現する。

前回：【Django】モデル作成とマイグレーション・adminへの登録・管理者ユーザーの作成・urls.pyの作成【ブログアプリ】

現在のディレクトリ構成は以下の通り。

■ディレクトリ構成

デスクトップ
 └Blog2
   ├app
   │ ├migrations
   │ ├__init__.py
   │ ├admin.py
   │ ├apps.py
   │ ├models.py
   │ ├tests.py 
   │ ├views.py 
   │ ├urls.py
   ├db.sqlite3
   ├config
 　│ ├・・・
 　│ ├settings.py
 　│ └urls.py
   ├templates
   ├env_blog2
   └manage.py

デスクトップ

└Blog2

├app

│ ├migrations

│ ├__init__.py

│ ├admin.py

│ ├apps.py

│ ├models.py

│ ├tests.py

│ ├views.py

│ ├urls.py

├db.sqlite3

├config

　│ ├・・・

　│ ├settings.py

　│ └urls.py

├templates

├env_blog2

└manage.py

base.html(ベーステンプレート)を作成する手順

base.htmlの作成

まず、templatesディレクトリで、base.htmlを作成する。

次にbase.htmlに以下のように記述する。

～デスクトップ/Blog2/templates/base.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}ブログ{% endblock %}</title>
</head>


<body>
    {% block content %}{% endblock %}
</body>

</html>

<!DOCTYPE html>

<head>

<title>{% block title %}ブログ{% endblock %}</title>

</head>

<body>

{% block content %}{% endblock %}

</body>

</html>

今回作成したbase.htmlを各htmlファイル(個別ページ)の作成時に継承する。そして各々の必要な内容を追記していくことになる。

個別ページの作成についてはまた改めて記載する。

ディレクトリ構成の確認