Flaskでコンテンツのテンプレートを利用する

前回のエントリで静的なコンテンツを配置しましたが、これではフレームワークを使っている意味がないので、テンプレート機能について触れてみます。

①

まず、テンプレート機能を使うためには、importで、render_templateを追加します。

②

次に、インスタンスを定義するところで、コンテンツのテンプレート配置ディレクトリを指定します。staticのときと同様にデフォルトはありますが、実行コマンドのディレクトリ/templatesなので、最初から定義しましょう。

③

@app.routeでコンテンツのパスを指定します。別に拡張子がhtmlである必要はありません。

④

テンプレートを呼び出すために、render_templateにテンプレートファイルを指定して、コンテンツを生成します。コンテンツ内に可変の文字列等を挿入したい場合は、「コンテンツ内で定義している変数名に代入して引数に追加」します。この例では、テンプレート名はtemplate.html、titleに直前に変数に代入している"test page"、nameには"Flask template test"となります。

次のようなtemplate.htmlを用意します。

ここで、{{ title }}と{{ name }}とでてきます。この部分が"test page"と"Flask template test"に置き換わります。例よってcurlを実行すると、

テンプレートから置き換わった文字を表示します。次のようにすると、template.htmlは一つですが、タイトルや本文を変えたページを生成できるというわけです。

ただ、これでは、コンテンツ本文のHTMLはすべてプログラム内に？ということになるので、もう少しテンプレートらしくしてみます。

共通ページ (template.html)

ページ1 (top.html)

ページ2 (sample.html)

プログラム

この中で重要なのはコンテンツにある{% block content %}と{% endblock %}です。まず、top.htmlとsample.htmlは文言の異なる2つの文章が{% block content %}と{% endblock %}の間に書かれています。そして、{% extends "template.html" %}がありますが、template.htmlがベースのコンテンツであることを示しており、{% block content %}と{% endblock %}で定義した内容が、そのまま、template.htmlの{% block content %}と{% endblock %}に取り込まれます。

こうすることで、ヘッダのタブやフッタのコピーライトなどは共通化してすべてのページで表示し、コンテンツ部分は個別にページを作成することができます。何かメニューなどを追加したい場合は、共通ページを調整するだけですべてのページへ反映ができるというわけです。