Webアプリ開発実践：Djangoでシフト作成ページを作ろう！（ベースとなるテンプレートを書く） #Python

各ページを作る前に、テンプレートの基礎部分を作っていこうと思います。

Djangoには extends という便利なテンプレートタグがあり、これを使えばHTMLを書く手間をかなり省けそうなので活用しましょう。

templates以下にbasesというディレクトリ（名前は何でもいいですが）を作り、全ページの骨組みとなるbase.htmlを書きました。

templates/bases/base.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>{% block title %}Shift-Maker{% endblock %}</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="{{ STATIC_URL }}css/bootstrap.min.css">
        <link rel="stylesheet" href="{{ STATIC_URL }}css/bootstrap-theme.min.css">
        <script src="{{ STATIC_URL }}js/jquery-1.11.0.js"></script>
        <script src="{{ STATIC_URL }}js/bootstrap.min.js"></script>
    </head>

    <body><div class="container">
    {% block main %}
    {% endblock %}
    </div></body>
</html>

BootstrapとjQueryはどのページでも使いたいのでここであらかじめ指定してしまっています。 STATIC_URL は settings.py で設定してあり、自分の場合

STATIC_URL = '/static'

STATICFILES_DIRS = (
        os.path.join(BASE_DIR,'static'),
)

です。 STATICFILES_DIRS でファイルを置くディレクトリを指定できるので適当にディレクトリを作成して適用しましょう。

あとは各ページごとに内容を入れていくだけです。流れとしては、 extends で親のテンプレートを宣言して block で指定した箇所に中身を入れる感じです。
例えば以下のように書きます。

{% extends 'bases/base.html' %}

{% block title %}Hello,world!{% endblock %}

{% block main %}
<h1>This is test!!</h1>
<button class="btn btn-lg">Click me</button>
<script type="text/javascript">
var count = 0;
$('.btn').click(function(){
        alert(count + "click!");
});
</script>
{% endblock main %}

BootstrapやjQueryを親からちゃんと受け継いでいますので、いちいち同じことを書かずに済むようになりました。

さて、実はここに来て 以前作ったデータベースモデルに問題があることに気付き、大幅に修正したので 、次回はその辺を改めて投稿し直そうと思います（前のも記念に残しますが）。

ビューはその後に作っていくとしましょう。