djangoで共通のヘッダーを用意してみよう

2022年5月3日

djangoで共通のヘッダーを用意してみよう

WEBサイトを作る時は、ほぼ必ずと言って良い程ヘッダーやフッターは各ページとは別ファイルとして用意します。
ヘッダーやフッターは各ページ共通で使用するので、各々のページに同じコードを書くと保守性が下がってしまうからですね。

今回は「ヘッダー」「フッター」を作ってみます。
まずは階層を見てみましょう。


.
├── app
│   ├── admin.py
│   ├── apps.py
│   ├── __init__.py
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── tests.py
│   ├── urls.py
│   └── views.py
├── config
│   ├── asgi.py
│   ├── __init__.py
│   ├── __pycache__
│   │   ├── __init__.cpython-36.pyc
│   │   └── settings.cpython-36.pyc
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── manage.py
├── static
│   └── css
│       └── style.css #3.作成
└── templates
    └── app
        ├── base.html #1.作成
        ├── index.html #2.base.htmlを取り込み
        └── redirected.html

今回関係あるファイルは下の3つだけになります。

1.base.html

2.index.html

3.style.css

base.html

・{% load static %} - 「static」のパスを使用できるようにします。
・{% block content %}{% endblock %} - 各ページはこの中に取り込まれます。


{% load static %}
<!DOCTYPE html>
<html>
<head>
    <title>Django Practice</title>
</head>
<body>
    <h1>Django Practice</h1>
    <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
    <div class="container">
        {% block content %}{% endblock %}
    </div>
</body>
</html>

index.html

・{% extends 'app/base.html' %} - これでbase.htmlを読み込みます。
・{% block content %}{% endblock %} - これで囲まれた部分がbase.htmlに取り込まれます。


{% extends 'app/base.html' %}
{% block content %}
    <div>{{message}}</div>
{% endblock %}

style.css

こちらはデコレーションになります。


body {
    margin: 0;
    padding: 0;
  }
  h1 {
    margin-top: 0;
    padding: 10px;
    font-size: 35px;
    background: -moz-linear-gradient(left, rgb(30, 0, 253), rgb(255, 247, 0));
    background: -webkit-linear-gradient(left, rgb(30, 0, 253), rgb(255, 247, 0));
    background: linear-gradient(to right, rgb(30, 0, 253), rgb(255, 247, 0));
    color: #fff;
    text-align: center;
    box-shadow: 0 1px 8px #777;
    text-shadow: 1px 1px 1px #777;
  }
  .container{
    width: 70%;
    margin: auto;
  }

結果

下の通りヘッダーがついているのが確認できました。

2022年5月3日