previous arrowprevious arrow
next arrownext arrow
Shadow
Slider

Django独学 共通化したhtmlテンプレートを反映させる

Djangoのユーザ管理アプリ作成の目次ページはこちらです。

 

少し見栄えもかっこよくしたいので、今回は共通テンプレートを作成して、各テンプレートに反映させます。

UdemyのDjangoの基礎をマスターして、3つのアプリを作ろう!を参考に勉強していています。

bootstrapを使うため、HTMLの基礎知識が必要です。

Udemy講座を載せておきます。

「BootstrapをCDNで利用する」だけであれば無料で見れます。

[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門

テンプレート共通化のメリット

テンプレートを共通化しておくと、コーディング数を減らすことができます。

例えば、htmlのテンプレートが5つあり、共通の箇所があったとします。

共通テンプレートがない場合、5つすべてを修正する必要があります。

共通テンプレートのbase.htmlを作れば、baseを修正すれば、5つに反映させることができます。

共通テンプレートのbase.htmlを作成する

作っていく共通テンプレートは上記のようなものです。

ヘッダーとフッターは共通です。

真ん中には作ったアプリが入ります。

以下に、base.htmlというファイルを作成します。

C:\django\myproject\myapp\templates\myapp

base.html中身は以下のように作っています。

ヘッダーとフッターを作っています。

因みに、4~9行目でBootstrapを読み込んでいます。

特に何かをインストールする必要はなく、サイトに公開されているCSSを読み込んでいます。

12行目でbodyの表示を少し真ん中よりにしています。

23、24行目はボディの記載をしています。

{% block app %}~{% endblock %}の中に各アプリを読み込む場所です。

users.htmlとdetail.htmlに共通部分を継承させる

それぞれ2ファイルにbase.htmlを継承させて、共通部分を反映させます。

共通化したのはbodyタグ以外の部分です。

なので、bodyタグの中身以外を残して以下のように書き換えます。

users.html

detail.html

 

bodyタグ以降の中身を{% block app %}{% endblock %}で囲むだけでOKです。

ユーザ一覧画面を表示させてみると以下の通り上手くできました!

ここから、英二をクリックして詳細ページを見てみると…

ABOUT ME
LooseCarrot
LooseCarrot
ブログ運営をしているLooseCarrotです。 興味のあることにトライして発信していきます! プロフィール
関連している記事

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です