二十三.優化整個項目界面

ECHO信息管理平臺的基本功能均已經實現。但在這個平臺中還存在着幾個問題需要解決。

如下圖所示：

其中，

1)      需要將這個名字更改成我們自己的LOGO

2)      在點開頁面時，我們希望左邊的菜單能夠保持展開，而不是點開後就收回。

3)      導航條有着對應的顯示

4)      底部更換成自己的LOGO

 

對於問題1及問題4，非常容易解決，只需要再index.html頁面中修改相應位置的文字就可以。

 

1.      左側菜單欄保持展開的處理

現在我們通過對路徑的判斷來解決問題2，我們選取資源信息進行舉例。在資源信息中包含了節點信息，線路信息，設備信息。

 

Index.html:

            <!--如果相關路徑在請求路徑中，那麼一下li class爲active open -->
   {% if '/lists/' in request.path or '/add/' in request.path or '/edit/' in request.path %}
                       <li class="active open" >

                           {% else %}
                       <li class="">
                   {% endif %}
   <a href="#" class="dropdown-toggle">
      <i class="menu-icon fa fa-list"></i>
      <span class="menu-text"> 基礎信息 </span>

      <b class="arrow fa fa-angle-down"></b>
   </a>

   <b class="arrow"></b>

   <ul class="submenu">
                   <!--如果以下路徑有node在請求路徑中，那麼節點信息的class li="active"-->
      {% if '/node/' in request.path %}
                       <li class="active" >
                           {% else %}
                           <li class="">
                       {% endif %}
         <a href="{% url 'lists' table='node' %}">
            <i class="menu-icon fa fa-caret-right"></i>
            節點信息
         </a>

         <b class="arrow"></b>
      </li>

                       {% if '/line/' in request.path %}
                       <li class="active" >
                           {% else %}
                           <li class="">
                       {% endif %}
         <a href="{% url 'lists' table='line' %}">
            <i class="menu-icon fa fa-caret-right"></i>
            線路信息
         </a>

         <b class="arrow"></b>
      </li>

                        {% if  '/device/' in request.path %}
                       <li class="active" >
                           {% else %}
                           <li class="">
                       {% endif %}
         <a href="{% url 'lists' table='device' %}">
            <i class="menu-icon fa fa-caret-right"></i>
            設備信息
         </a>

         <b class="arrow"></b>
      </li>
   </ul>
</li>

2.      導航條的處理

我們通過views.py將相關信息傳遞到index.html頁面，並在其中進行展示。以task爲例，由於task.html繼承index.html。因此直接將變量page_title和sub_title傳遞給task頁面，就可以填充到index.html頁面中。

Index.html:

<div class="page-header">
        <h1>
            <!--設置導航欄的頁面標題-->
            {{ page_title }}
            <small>
                <i class="ace-icon fa fa-angle-double-right"></i>
                 <!--設置導航欄的頁面子標題-->
                {{ sub_title }}
            </small>
        </h1>
    </div><!-- /.page-header -->

views.py:

#任務的列表顯示
def task_list(request):
…
context = {
    'data': data_list,
    'page_range': page_range,
    'query': query,
    'count': count,
    'page_nums': page_nums,
    'page_title': '任務處理',
    'sub_title': '任務列表',
}
return render(request,'task_list.html',context)

3.      直接在index.html中修改LOGO與footer。

 

4.      修改後的效果如下，這樣導航條有了相應的顯示，左側菜單打開後也能保持而非收回。