2014年7月14日月曜日

bottleのテンプレートで共通ヘッダ、フッタ

前回はbottleのテンプレート機能をご紹介しました。今回はその延長です。

各ページで共通のヘッダ、フッタを使いたいニーズってありますよね。過去、自分はphpでヘッダ、フッタ出力用の関数を作って、各HTMLからそれを呼ぶ、というように実装していました。

それが正しいのかは分かりませんが、一つの例として、今回も基本は同じやり方で、実装してみたいと思います。ぶっちゃけ、php部分を、bottleテンプレートのコード埋め込み機能に変えるだけですね。


準備


ファイルフォルダ構成は以下の通りです。

kitabat@clientX% pwd
/home/kitabat/dev001/work
kitabat@clientX% tree .
.
├── headfoot.py
├── hello.py
├── static
│   └── css
│       └── default.css
└── views
    └── top.tpl

3 directories, 4 files


各ファイルの内容は以下の通りです。

hello.py


メイン処理です。今までと変更点はありません。(余計なコードは除きました)

from bottle import route, run, static_file, view

@route('/<hoge>')
@view('top')
def hello(hoge="root"):
    return dict(message = "hello, " + hoge)

@route('/file/<filename:path>')
def static(filename):
    return static_file(filename, root="/home/kitabat/dev001/work/static")

run(host='0.0.0.0', port=8080, debug=True, reloader=True)

headfoot.py


ヘッダ、フッタ出力用の関数を定義したファイルです。
header()関数で<head>タグの内容を共通化します。ページタイトルは引数で受け取ります。また、この中でcssファイルを指定しています。
footer()関数は、引数を与えると、それを表示するようにしています。

それとポイントとしては、ヒアドキュメントを使っています。pythonでは、' か " を3つ重ねる事で、ヒアドキュメントになります。

def header(title='title'):
        return '''
<head><meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="/file/css/default.css" type="text/css" />
<title>%s</title></head>
''' % title

def footer(msg=''):
        return '''
<hr><div align="right"><font class="s2">%s</font></div>
''' % msg


static/default.css


共通ヘッダ、フッタを使うならスタイルシートと組み合わせたいですよね。という事で、用意しておきました。背景色を変えるだけですが…。

BODY {
  background-color: green
}

top.tpl


テンプレート定義です。2〜4行目に埋め込んだコードのとおり、このファイルでは、上で定義したheadfoot.py内の関数を呼び出し、結果を格納した変数を、HTMLの表示したい部分に書いています。
注意点として、変数指定の際に {{!f}} というように、頭に!を付けてください。これをしないと、タグがそのまま表示されてしまいます。


<html>
% from headfoot import header, footer
% h = header()
% f = footer("bye,bye!")
{{!h}}
<body>
{{message}}
{{!f}}
</body>
</html>


最後に、アクセス結果を。こんな感じです。




はい、如何でしたか?
これでテンプレートファイルが複数存在する場合でも、中でheader()、footer()関数を呼ぶようにしておけば良いですね。


2 件のコメント:

  1. %includeを使えば簡単にヘッダやフッタを作れますよ
    http://bottlepy.org/docs/0.11/stpl.html#the-include-statement

    返信削除
    返信
    1. なんと!本当ですね、、、。コメントありがとうございます!

      削除