"BOKU"のITな日常

62歳・文系システムエンジニアの”BOKU”は日々勉強を楽しんでます

Bootstrap4の導入・設定と、bootstrap4テンプレートを各画面で共有する/django3.0

今回は、Bootstrap4モジュールをインストール・設定し、Bootstrap4テンプレートを各画面で共有する方法をやります。

django2.0と3.0で動作確認済です。

f:id:arakan_no_boku:20190320212948j:plain 

 

はじめに

 

以下の記事の手順で、django3.0はインストール・設定されているものとします。

arakan-pgm-ai.hatenablog.com

また、以下の記事の通りstaticフォルダも設定済とします。

arakan-pgm-ai.hatenablog.com 

上記を引き継いで、中身を書き換えていきます。

 

bootstrap4を使うための追加モジュールインストール

 

CSSはbootstrap4を使います。

インターネット越しに参照しするのではなく、django-bootstrap4モジュールを使ったやり方でやってみます。

インストールの方法はこうです。

pip install django-bootstrap4

はいってなければインストールしときます。

あと。

pip install django-widget-tweaks

もインストールしておきます。

これはDjangoのFormにBootstrapのクラスを追加してカスタマイズするような記述をスマートに書けるようにしてくれるライブラリです。

インストールできたら、settings.pyに追加して利用可能にします。

 

settings.py

 

抜粋です。

INSTALLED_APPSに「bootstrap4」「'widget_tweaks」を追加し、TEMPLATESのOPTIONSの下に「builtins」以下を追加しました。

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'bootstrap4',
'widget_tweaks'
]
TEMPLATES = [
    {
        'BACKEND''django.template.backends.django.DjangoTemplates',
        'DIRS': [
            os.path.join(BASE_DIR, 'templates'),
        ],
        'APP_DIRS'True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
             'builtins':[ 
                'bootstrap4.templatetags.bootstrap4',
            ],
        },
    },
]

 

 

bootstrap4のテンプレートHTMLの作成

 

bootstrap4のテンプレートページを作ります。

bootstrapの以下のページの「Starter Templete」を元に使いまわし用のbase.htmlを書いて、外枠は共通ファイルで使いまわせるようにします。

getbootstrap.com

あと、bootstrapの各部品の書き方は、こちらのチートシートから。

hackerthemes.com

ほぼ、Starter Templeteのままのところへ、あとで処理を差し込むブロックを書きます。

Djangoのテンプレートは、任意の場所に{% block xxxxx %}{% endblock %}を置いて、実態HTMLでは、そのブロックの中に差し込む処理だけを書くことになります。

 

base.htmlのソースコード

 

{% load static %}
{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}
{% load widget_tweaks %}

<!doctype html>
<html lang="jp">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  	{% block header %}
	{% endblock %}
    <title>{% block title %}デモ用テンプレート{% endblock %}</title>
  </head>
  <body>
    <nav class="navbar navbar-dark bg-primary text-white">
        <h3 >サンプル (django3.0 & bootstrap4)</h3>
    </nav>

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

今回用意するblockは3つです。

header要素を差し込むブロック

{% block header %}{% endblock %}

titleのブロック

{% block title %}デモ用テンプレート{% endblock %} 

 bodyのブロック

{% block content %}{% endblock %}

です。

 

テンプレートを利用する子HTMLの作成

 

共通テンプレートができたので、今度はそれを利用する側をやっていきます。

前回の簡単な入力画面をベースにします。

前回はbootstrap4をインターネット経由で使っていたのを、今回は上記のbootstrap4テンプレートを再利用する形に修正します。 

python側(hello.py、helloform.py、urls.py)の修正は必要ありません。

hello.htmlのみ以下のようにBase.htmlの各ブロックを使うように書き換えます。

{% extends 'base.html' %}
{% load static %}
{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}
{% load widget_tweaks %}

{% block header %}
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    
{% endblock %}

{% block title %}
  Hello World
{% endblock %}

{% block content %}
    <div class="container">
        <div class="row text-center">
            <h1>Hello Form!!</h1>
        </div>
        <div class="row text-center">
            <img src="{% static "images/boku.jpg" %}" />
        </div>
        <div class="row text-center">
            <form action="" method="post">
                {% csrf_token %}
                {% if name %}
                    <h1>{{ name }}</h1>
                {% else %} 
                    {{form.as_p}}
                    </div>
                    <div class="row">
                        <input type="submit" value="送信">
                    </div>
                {% endif %} 
            </form>
        <div>
    </div>
 {% endblock %}

Bootstrap4を使うためのリンクやJavaScriptの読み込みの記述ややなどのブロックの記述を消して、正味の部分だけはめ込んだ感じになります。

{% extends 'base.html' %}
{% load static %}
{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}
{% load widget_tweaks %}

 の部分で、bootstrap4やbase.htmlを使うための記述が増えているのが肝です。

これを実行すると。

f:id:arakan_no_boku:20200419121007p:plain

Base.htmlの枠の中に、前回のhello.htmlの画面が収まってます。

今回はこんなところで。

ではでは。