DjangoGirlsに挑戦～テンプレートの拡張～

テンプレートの拡張

テンプレートの拡張
- テンプレートファイルの作成

テンプレートファイルの作成

HTMLファイルで毎回ナビゲーションやら静的ファイルの読み込みを記述するのは
無断なのでテンプレートファイルを１個作って共通で読み込むものは
管理します。

/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側で同じように中身を記述してあげれば
読み込んでくれます。

テンプレートの拡張は複数画面を使うようになると絶対に使用するので、
作るようにすると後後の記述が楽になりますね。