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

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

Gentelellaのデモページはココ

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

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

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

やってみた事

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

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

フォルダ構成

#index_master.html

{% extends "base_master.html" %}
<!-- index_client.htmlは base_client.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 %}
(以下略)

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

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

#templates/index.html

{% extends "base.html" %}
<!-- templates/clients/index.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 %}
(以下略)

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

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

#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/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_02/templates/index.htmlが閲覧したbase.htmlは『app_01/templates』のbase.htmlでした。
クッキーの影響かとも思いキャッシュクリアなどしてみましたが症状は同じ。
理屈が判らずイマイチ釈然としませんが...。

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

#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/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 %}
(以下略)

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

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

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

まとめ

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

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

＼ 最新情報をチェック ／