プログラミング独学・スクール・就職(目次)
プログラミング独学・スクール・就職(目次)
おすすめのプログラミングスクール めざせ就職・年収アップ!
おすすめのプログラミングスクール めざせ就職・年収アップ!
SEの転職活動で使うべきサイト・エージェント 目指せ年収アップ
SEの転職活動で使うべきサイト・エージェント 目指せ年収アップ
メンズクリア2年通い放題入会! その後のヒゲ状況(不定期更新)
メンズクリア2年通い放題入会! その後のヒゲ状況(不定期更新)
ブログ開始3年が経った月収が1万超えてた!
ブログ開始3年が経った月収が1万超えてた!
7年目で初の転職活動 2カ月で内定獲得した記録
7年目で初の転職活動 2カ月で内定獲得した記録
面接で評価されたプログラミング未経験者の学習方法
面接で評価されたプログラミング未経験者の学習方法
previous arrowprevious arrow
next arrownext arrow
 
Shadow
Django

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です。 興味のあることにトライして発信していきます! プロフィール
関連している記事