「bottle」+「jinja2」を使ってサイト構築 3 共通テンプレートの利用
今回はbottleやjinja2の使い方というより、フレームワークの開発方法。
複数ページに渡るサイトをフレームワークで開発するとき、ヘッダー、フッターなどの各ページの共通部分を
ベースとなるテンプレートファイルに作成しておき、各ページごとにベースのテンプレートファイルを呼び出して
作成する。
ベースのテンプレートファイルを作成
まずベースのテンプレートファイル base.html をviewsディレクトリに作成する。
({# … #}で囲まれている部分は、jinja2のコメント)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> {# 各ページごとにタイトルを定義できる #} <title>bottle's Page - {% block title %}{% endblock %}</title> <script type="text/javascript" src="/js/jquery.min.js"></script> <script type="text/javascript" src="/js/jquery-ui.min.js"></script> <script type="text/javascript" src="/js/bootstrap.min.js"></script> <link rel="stylesheet" href="/css/jquery-ui.min.css" /> <link rel="stylesheet" href="/css/jquery-ui.theme.min.css" /> <link rel="stylesheet" href="/css/jquery-ui.structure.min.css" /> <link rel="stylesheet" href="/css/bootstrap.min.css" /> <link rel="stylesheet" href="/css/bootstrap-theme.min.css" /> {# base.tplを呼び出した先でヘッダーを追加する #} {% block header %} {% endblock %} </head> <body> <div class="navbar navbar-inverse" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">ナビゲーションの切替</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Slackツール</a> </div><!-- /.navbar-header --> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="/top">ホーム</a></li> <li class="active"><a href="">リンク1</a></li> <li class="active"><a href="">リンク2</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container --> </div><!-- /.navbar --> {# base.tplを呼び出した先でコンテンツを記述する #} <div class="col-xs-8 col-xs-offset-2"> {% block contents %} {% endblock %} </div> </body> </html> |
派生のテンプレートファイルを作成
各ページの共通部分以外の部分に関しては
|
1 2 |
{% block ブロック名 %} {% endblock %} |
といった具合に記述しておくことで、あとからその部分に入れることができる。
上のbase.htmlの場合だと、title, header, contents というブロック名の部分。
さて、これまでに作った top.html を、 base.html を使うようにしてみる。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
{% extends 'base.html' %} {# base.html の title の中に入れるコンテンツ #} {% block title %} {{ name }} のページ {% endblock %} {# ヘッダー情報を追加する場合はここに記述する。 #} {% block header %} {% endblock%} {# base.html の contents の中に入れるコンテンツ #} {% block contents %} こんにちは、 {{name}} <h1>今日のfizzbuzz</h1> <table class="table table-striped"> <thead> <tr> <th>header</th> </tr> </thead> <tbody> <tr> <td>データ1</td> </tr> <tr> <td>データ2</td> </tr> <tr> <td>データ3</td> </tr> <tr> <td>データ4</td> </tr> </tbody> </table> {% endblock %} |
base.htmlを使う という宣言はファイル冒頭の
|
1 |
{% extends 'base.html' %} |
と記述することで適応される。
base.htmlで記述した共通部分以外の各ページごとに差し込みたい部分に関しては
|
1 2 |
{% block ブロック名 %} {% endblock %} |
の間に記述することで挿入することができる。