↓もし、良かったらSNSでの紹介よろしくお願いします。

【Python】Django入門(レイアウトとCSSと画像表示)

bootstrap

アプリを生成

今回は、layoutという名前のアプリ名で作成します。

python manage.py startapp layout

アプリ登録とパスの登録をします。

[プロジェクト名]/[プロジェクト名]/settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    ...
    'layout',# 追加
]

[プロジェクト名]/[プロジェクト名]/urls.py

from layout import views as layout_views# 追加

urlpatterns = [
    path('admin/', admin.site.urls),
    ...
    path('layout/hoge',layout_views.hoge,name='layout'),# 追加
    path('layout/fuga',layout_views.fuga,name='layout'),# 追加
]

viewを作成

今回は、ページを表示するだけの処理を追加します。

from django.shortcuts import render

def hoge(request):
    return render(request, 'hoge.html')
def fuga(request):
    return render(request, 'fuga.html')

レイアウトを作成

ページのヘッダーを共通化してタイトルとページの内容を切り替える場合、
テンプレートの継承を利用するのが便利です。

継承されるテンプレートに部品を定義して、
そこにページごとに異なるコンテンツを当てはめるような書き方ができます。

[プロジェクト名]/layout/templatesの下にhtmlを置きます。

継承されるテンプレート
[プロジェクト名]/layout/templates/base.htmlを作成します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>{% block title %}{% endblock %}</title>
  </head>
  <body>
    {% block content %}{% endblock %}
  </body>
</html>

base.htmlを継承するページを作成します。
contentとtitleが変更されているのを確認するため
hoge.htmlfuga.htmlを下記のように作成します。

[プロジェクト名]/layout/templates/hoge.html

{% extends 'base.html' %}
{% block title %}
hoge
{% endblock %}
{% block content %}
<h1>hoge</h1>
<p>このページはhogehoge</p>
{% endblock %}

[プロジェクト名]/layout/templates/fuga.html

{% extends 'base.html' %}
{% block title %}
fuga
{% endblock %}
{% block content %}
<h1>fuga</h1>
<p>このページはfugafuga</p>
{% endblock %}

さて、ここまでのコードが動くか確認しましょう。

python manage.py runserver

でアプリを起動します。

http://localhost:8000/layout/hoge
にアクセスするとhogeページが表示されます。
http://localhost:8000/layout/fuga
にアクセスするとfugaページが表示されます。
ヘッダーが共通化されているのがわかると思います。

cssと画像を追加する

つぎに、ページ共通のcssとヘッダー画像を追加します。
cssとヘッダー画像は静的ファイルなので、
[プロジェクト名]/layout/static/
の配下に置きます。

static配下にディレクトリを作成してその配下においても良いです。
今回は、簡単のために配下に配置します。

ヘッダー画像を適当に用意して、header.jpg[プロジェクト名]/layout/static/に置きます。
CSSも適当に作成してヘッダー画像と同様の場所に置きます。

[プロジェクト名]/layout/static/layout.css

h1 {color: blue;}
.header_img {width: 100%;}

[プロジェクト名]/layout/templates/base.html
スタイルシートとヘッダー画像を追加します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>{% block title %}{% endblock %}</title>
    {% load static %}
    <link rel="stylesheet" type="text/css" href="{% static 'layout.css' %}">
  </head>
  <body>
    <img class="header_img" src="{% static 'header.jpg' %}" />
    {% block content %}{% endblock %}
  </body>
</html>

静的ファイルを読み込むために再起動します。
アプリを起動させている場合、ctrl-cでアプリを止めて起動します。

python manage.py runserver

http://localhost:8000/layout/hoge
にアクセスするとh1タグが青になって、画像が表示されてます。