前のパートに戻る 完了して次のパートへ  

  1-3 ヘッダーとbootstrapの導入

bootstrapはTwitter社が作成したCSSライブラリで素早くアプリケーションを作ったりするためのものです。

またDjangoではヘッダーみたいないろんなページでも使う共通ページを別ファイルとして作って呼び出すことが出来ます。templatesディレクトリ内にbaseディレクトリを作って今後共通するhtmlはこちらに入れていきましょう。

ディレクトリが作成できたらapp.htmlを作成してヘッダーやbootstrapなどのライブラリを読み込むためのリンクを記入していきます。

また、app.htmlの途中にある{% block contents %}{% endblock %}の要素差し込みの処理を行っています。 子供の要素内にある{% block contents %}{% endblock %}の中にある部分を差し替えています。

新規作成: techpitgram/templates/base/app.html

今まで作成してきたテンプレートの最初にapp.htmlを呼び出すコードを入れてきます。 合わせて、最初と最後に{% block contents %}〜{% endblock %}を入れていきます。 これによって親テンプレートに差し込むコンテンツであることを示す事ができます。

修正:

techpitgram/templates/accounts/user_detail.html

techpitgram/templates/registration/login.html

techpitgram/templates/registration/signup.html

ここでもう一度ページを見てみましょう。 再度pipenv run python manage.py runserverで起動させて確認します。 




登録ページもきれいになりました。

次からはアイコンの編集画面を作っていきましょう。

議論

0 質問

このコースの評価は?