【Bootstrap】かっこいいテンプレ Gentelella を見つけたので解析②

2020.12.10
Python備忘録
Bootstrap4, CSS, Django, JavaScript, python, Template構成, エラー改善, スクリプト備忘録

1. 【Bootstrap】かっこいいテンプレ Gentelella を見つけたので解析②

【Bootstrap】かっこいいテンプレ Gentelella を見つけたので解析②

今回は解析と言うより使い方編といった内容です。
ログインユーザーによってサイドナビのメニューを分けたり表題を変えたりしたいシーンがあります。
今作っているシステムの場合は【管理者】と【依頼者(ユーザーさん)】で同じメニューが出てはいけません。

「依頼者は依頼者の情報のみに。管理者は全てのデータにアクセス」

こんな姿を作りたいのでサイドメニューの内容が大きく変わります。

やってみた事

同一アプリで extends するファイルを分ける
同一アプリでTemplatesフォルダ内にclient専用フォルダを作成しextendsするファイル名はそのまま利用
アプリを分けてTemplatesフォルダ内で全て操作 ※継承ファイル名(base.htmlやsidebar.html)などの名称は同一
アプリを分けてTemplatesフォルダ内にclient/masterの専用フォルダを用意。その中で全て操作する

結果として、1と4は意図した動きになりましたが、2と3はサイドメニューなどが変更されませんでした。
細かく見ていきます。

同一アプリで extends するファイルを分ける

フォルダ構成

project
├── project/
│ ├─── settings.py
│ (以下略)
├── app_01/
│ ├─── templates/
│ │　├─── base_master.html
│ │　├─── base_client.html
│ │　├─── sidebar_master.html
│ │　├─── sidebar_client.html
│ │　├─── index_master.html
│ │　├─── index_client.html
│ │　(以下略)
(以下略)

#index_master.html

{% extends "base_master.html" %}
<!-- index_client.htmlは base_client.html に変更-->
{% if user.is_authenticated %}
{% block title %} Dashboard {% endblock title %l
(以下略)

#index_master.html

{% extends "base_master.html" %}

{% if user.is_authenticated %}

{% block title %} Dashboard {% endblock title %l

(以下略)

#base_maseter.html
(前略)
          {% block sidebar %}
             <div class="col-md-3 left_col {% block sidebar_class %} {% endblock sidebar_class %}">
             {% include "master_sidebar.html" %}
             <!-- base_client.htmlは client_sidebar.html に変更-->
            </div>
          {% endblock sidebar %}

          {% block top_navigation %}
            <div class="top_nav">
              {% include "master_top_navigation.html" %}>
              <!-- base_client.htmlは client_top_navigation.html に変更-->
            </div>
          {% endblock top_navigation %}

          {% block content %}
            {{ content }}
          {% endblock content %}

          {% block footer %}
            <footer>
              {% include "master_footer.html" %}>
              <!-- base_client.htmlは client_footer.html に変更-->
            </footer>
          {% endblock footer %}
(以下略)

#base_maseter.html

(前略)

{% block sidebar %}

{% include "master_sidebar.html" %}

</div>

{% endblock sidebar %}

{% block top_navigation %}

{% include "master_top_navigation.html" %}>

</div>

{% endblock top_navigation %}

{% block content %}

{% endblock content %}

{% block footer %}

{% include "master_footer.html" %}>

</footer>

{% endblock footer %}

(以下略)

しっかり指定をしているのでこれは意図した通りの構成で動作しました。

同一アプリでTemplatesフォルダ内にclient専用フォルダを作成しextendsする

project
├── project/
│ ├─── settings.py
│ (以下略)
├── app_01/
│ ├─── templates/
│ │　├─── base.html
│ │　├─── sidebar.html
│ │　├─── index.html
│ │　(以下略)
│ │
│ │　├─── clients/
│ │　│　├─── base.html
│ │　│　├─── sidebar.html
│ │　│　├─── index.html
(以下略)

#templates/index.html

{% extends "base.html" %}
<!-- templates/clients/index.html も同じ記載(変更点無し)-->
{% if user.is_authenticated %}
{% block title %} Dashboard {% endblock title %l
(以下略)

#templates/index.html

{% extends "base.html" %}

{% if user.is_authenticated %}

{% block title %} Dashboard {% endblock title %l

(以下略)

#templates/base.html
(前略)
          {% block sidebar %}
             <div class="col-md-3 left_col {% block sidebar_class %} {% endblock sidebar_class %}">
             {% include "sidebar.html" %}
             <!-- templates/clients/base.html も同じ記載(変更点無し)-->
            </div>
          {% endblock sidebar %}

          {% block top_navigation %}
            <div class="top_nav">
              {% include "top_navigation.html" %}>
              <!-- templates/clients/base.html も同じ記載(変更点無し)-->
            </div>
          {% endblock top_navigation %}

          {% block content %}
            {{ content }}
          {% endblock content %}

          {% block footer %}
            <footer>
              {% include "footer.html" %}>
              <!-- templates/clients/base.html も同じ記載(変更点無し)-->
            </footer>
          {% endblock footer %}
(以下略)

#templates/base.html

(前略)

{% block sidebar %}

{% include "sidebar.html" %}

</div>

{% endblock sidebar %}

{% block top_navigation %}

{% include "top_navigation.html" %}>

</div>

{% endblock top_navigation %}

{% block content %}

{% endblock content %}

{% block footer %}

{% include "footer.html" %}>

</footer>

{% endblock footer %}

(以下略)

この構成の場合、clients/index.htmlが閲覧したbase.htmlは『templates直下』のbase.htmlでした。
その為、sidebar.htmlなども同じくtemplates直下の値を見に行ってしまいクライアント用ページにマスタ用メニューが表示される状態になりました。

アプリを分けてTemplatesフォルダ内で全て操作

project
├── project/
│ ├─── settings.py
│ (以下略)
├── app_01/
│ ├─── templates/
│ │　├─── base.html
│ │　├─── sidebar.html
│ │　├─── index.html
│ │　(以下略)
├── app_02/
│ ├─── templates/
│ │　├─── base.html
│ │　├─── sidebar.html
│ │　├─── index.html
│ │　(以下略)
(以下略)

#app_01/templates/index.html

{% extends "base.html" %}
<!-- app_02/templates/clients/index.html も同じ記載(変更点無し)-->
{% if user.is_authenticated %}
{% block title %} Dashboard {% endblock title %l
(以下略)

#app_01/templates/index.html

{% extends "base.html" %}

{% if user.is_authenticated %}

{% block title %} Dashboard {% endblock title %l

(以下略)

#app_01/templates/base.html
(前略)
          {% block sidebar %}
             <div class="col-md-3 left_col {% block sidebar_class %} {% endblock sidebar_class %}">
             {% include "sidebar.html" %}
             <!-- app_02/templates/base.html も同じ記載(変更点無し)-->
            </div>
          {% endblock sidebar %}

          {% block top_navigation %}
            <div class="top_nav">
              {% include "top_navigation.html" %}>
              <!-- app_02/templates/base.html も同じ記載(変更点無し)-->
            </div>
          {% endblock top_navigation %}

          {% block content %}
            {{ content }}
          {% endblock content %}

          {% block footer %}
            <footer>
              {% include "footer.html" %}>
              <!-- app_02/templates/base.html も同じ記載(変更点無し)-->
            </footer>
          {% endblock footer %}
(以下略)

#app_01/templates/base.html

(前略)

{% block sidebar %}

{% include "sidebar.html" %}

</div>

{% endblock sidebar %}

{% block top_navigation %}

{% include "top_navigation.html" %}>

</div>

{% endblock top_navigation %}

{% block content %}

{% endblock content %}

{% block footer %}

{% include "footer.html" %}>

</footer>

{% endblock footer %}

(以下略)

この構成の場合、app_02/templates/index.htmlが閲覧したbase.htmlは『app_01/templates』のbase.htmlでした。
クッキーの影響かとも思いキャッシュクリアなどしてみましたが症状は同じ。
理屈が判らずイマイチ釈然としませんが…。

アプリを分けてTemplatesフォルダ内にclient/masterの専用フォルダを用意

project
├── project/
│ ├─── settings.py
│ (以下略)
├── app_01/
│ ├─── templates/
│ │　├─── master/
│ │　│　├─── base.html
│ │　│　├─── sidebar.html
│ │　│　├─── index.html
│ │　│　(以下略)
├── app_02/
│ ├─── templates/
│ │　├─── clients/
│ │　│　├─── base.html
│ │　│　├─── sidebar.html
│ │　│　├─── index.html
│ │　(以下略)
(以下略)

#app_01/templates/master/index.html

{% extends "master/base.html" %}
<!-- app_02/templates/clients/index.html は clients/base.html -->
{% if user.is_authenticated %}
{% block title %} Dashboard {% endblock title %l
(以下略)

#app_01/templates/master/index.html

{% extends "master/base.html" %}

{% if user.is_authenticated %}

{% block title %} Dashboard {% endblock title %l

(以下略)

#app_01/templates/master/base.html
(前略)
          {% block sidebar %}
             <div class="col-md-3 left_col {% block sidebar_class %} {% endblock sidebar_class %}">
             {% include "master/sidebar.html" %}
             <!-- app_02/templates/clients/base.html は clients/sidebar.html -->
            </div>
          {% endblock sidebar %}

          {% block top_navigation %}
            <div class="master/top_nav">
              {% include "top_navigation.html" %}>
              <!-- app_02/templates/clients/base.html は clients/top_navigation.html -->
            </div>
          {% endblock top_navigation %}

          {% block content %}
            {{ content }}
          {% endblock content %}

          {% block footer %}
            <footer>
              {% include "master/footer.html" %}>
              <!-- app_02/templates/clients/base.html は clients/footer.html -->
            </footer>
          {% endblock footer %}
(以下略)

#app_01/templates/master/base.html

(前略)

{% block sidebar %}

{% include "master/sidebar.html" %}

</div>

{% endblock sidebar %}

{% block top_navigation %}

{% include "top_navigation.html" %}>

</div>

{% endblock top_navigation %}

{% block content %}

{% endblock content %}

{% block footer %}

{% include "master/footer.html" %}>

</footer>

{% endblock footer %}

(以下略)

この形だと一方が存在しなければエラーが発生しました。
ファイルも混雑しないのでこのスタイルが一番いいかも知れません。

# 個別にimportする場合
from アプリ名.models import クラス名
# まとめてimportする場合
from アプリ名.models import *

# 個別にimportする場合

from アプリ名.models import クラス名

# まとめてimportする場合

from アプリ名.models import *

こうしてあげれば別アプリで作成したモデルの情報も読込めるので動作的には全く問題なしです。

まとめ

なんでこんな動きをしたのでしょうか…。
動きだけ見るとキャッシュが残ってたからのような気もするのですがクリアしても動作が変わらないと言う状況がよくわからないです。

まぁ別アプリ立てて管理する方が利便性は高いのでいいんですけどね。

【Bootstrap】かっこいいテンプレ Gentelella を見つけたので解析②

【Bootstrap】かっこいいテンプレ Gentelella を見つけたので解析②

やってみた事

同一アプリで extends するファイルを分ける

同一アプリでTemplatesフォルダ内にclient専用フォルダを作成しextendsする

アプリを分けてTemplatesフォルダ内で全て操作

アプリを分けてTemplatesフォルダ内にclient/masterの専用フォルダを用意

まとめ

関連

【Django】SQLテーブルの作成『migrate』をやり直す方法 2020.12.09

【Python】今月の集計をしたい時に使う月初の取得方法 2020.12.11

【Bootstrap】かっこいいテンプレ Gentelella を見つけたので解析②

【Bootstrap】かっこいいテンプレ Gentelella を見つけたので解析②

やってみた事

同一アプリで extends するファイルを分ける

同一アプリでTemplatesフォルダ内にclient専用フォルダを作成しextendsする

アプリを分けてTemplatesフォルダ内で全て操作

アプリを分けてTemplatesフォルダ内にclient/masterの専用フォルダを用意

まとめ

共有:

関連

【Django】SQLテーブルの作成『migrate』をやり直す方法 2020.12.09

【Python】今月の集計をしたい時に使う月初の取得方法 2020.12.11