DjangoGirlsに挑戦 ~テンプレートの拡張~
テンプレートの拡張
テンプレートファイルの作成
HTMLファイルで毎回ナビゲーションやら静的ファイルの読み込みを記述するのは
無断なのでテンプレートファイルを1個作って共通で読み込むものは
管理します。
/app ├templates #追加 └blog ├base.html #追加 └post_list.html
共通ファイルとなるbase.htmlを以下のように記述
基本はpost_list.htmlをコピー
{% load staticfiles %} <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" > <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" > <link href="http://fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="{% static 'css/blog.css' %}"> </head> <body> <div class="page-header"> <h1><a href="">the dawn of yuriko hisory</a></h1> </div> <div class="content container"> <div class="row"> <div class="col-md-8"> <!-- ここを修正 --> {% block content %} {% endblock %} <!-- ここまで --> </div> </div> </div> </body> </html>
{% block content %}
{% endblock %}
の中身をpost_list.htmlに記述、そのほかはbase.html側で読み込ませるように設定しています。
そしてpost_list.htmlの修正
{% extends 'blog/base.html' %} //1 {% block content %} //2 {% for post in posts %} <div class="post"> <div class="date"> 書いた人:{{ post.author }} </div> <h1><a href="">{{ post.title }}</a></h1> <p>{{ post.text|linebreaks }}</p> </div> {% endfor %} {% endblock content %} //2
1.extendsは拡張、テンプレートの拡張用に記述
その後に読み込ませるbase.htmlの場所を指定してあげます。
これでbase.htmlに書かれている部分を読み込んでくれるようになります。
2.base.htmlで書いた{% block content %}の中身です
{% block 変数名 %}で記述するので、埋め込みたい場所を複数指定もできます。
なのでファイルごとにcss/jsファイルなどを埋め込みたい場合は
base.htmlに{% block static %}とかで指定してpost_list.html側で同じように中身を記述してあげれば
読み込んでくれます。
テンプレートの拡張は複数画面を使うようになると絶対に使用するので、
作るようにすると後後の記述が楽になりますね。