問(wèn)題背景：

Metronic 左側(cè)導(dǎo)航欄

其示例Html文件對(duì)于這一個(gè)導(dǎo)航欄的實(shí)現(xiàn)長(zhǎng)達(dá)1000多行监透，此處只截取部分展示：

<li class="nav-item  ">
    <a href="javascript:;" class="nav-link nav-toggle">
        <i class="icon-settings"></i>
        <span class="title">Form Stuff</span>
        <span class="arrow"></span>
    </a>
    <ul class="sub-menu">
        <li class="nav-item  ">
            <a href="form_controls.html" class="nav-link ">
                <span class="title">Bootstrap Form
                    <br>Controls</span>
            </a>
        </li>
        <li class="nav-item  ">
            <a href="form_controls_md.html" class="nav-link ">
                <span class="title">Material Design
                    <br>Form Controls</span>
            </a>
        </li>
        <li class="nav-item  ">
            <a href="form_validation.html" class="nav-link ">
                <span class="title">Form Validation</span>
            </a>
        </li>
        <li class="nav-item  ">
            <a href="form_validation_states_md.html" class="nav-link ">
                <span class="title">Material Design
                    <br>Form Validation States</span>
            </a>
        </li>
        <li class="nav-item  ">
            <a href="form_validation_md.html" class="nav-link ">
                <span class="title">Material Design
                    <br>Form Validation</span>
            </a>
        </li>
        <li class="nav-item  ">
            <a href="form_layouts.html" class="nav-link ">
                <span class="title">Form Layouts</span>
            </a>
        </li>
        <li class="nav-item  ">
            <a href="form_input_mask.html" class="nav-link ">
                <span class="title">Form Input Mask</span>
            </a>
        </li>
        <li class="nav-item  ">
            <a href="form_editable.html" class="nav-link ">
                <span class="title">Form X-editable</span>
            </a>
        </li>
        <li class="nav-item  ">
            <a href="form_wizard.html" class="nav-link ">
                <span class="title">Form Wizard</span>
            </a>
        </li>
        <li class="nav-item  ">
            <a href="form_icheck.html" class="nav-link ">
                <span class="title">iCheck Controls</span>
            </a>
        </li>
        <li class="nav-item  ">
            <a href="form_image_crop.html" class="nav-link ">
                <span class="title">Image Cropping</span>
            </a>
        </li>
        <li class="nav-item  ">
            <a href="form_fileupload.html" class="nav-link ">
                <span class="title">Multiple File Upload</span>
            </a>
        </li>
        <li class="nav-item  ">
            <a href="form_dropzone.html" class="nav-link ">
                <span class="title">Dropzone File Upload</span>
            </a>
        </li>
    </ul>
</li>

這段代碼僅僅只是對(duì)Elements的實(shí)現(xiàn)。
如果在網(wǎng)站中導(dǎo)航欄的內(nèi)容比較多航唆， 按照Metronic的實(shí)現(xiàn)方式才漆， 代碼的可維護(hù)性不會(huì)太好。
那么這個(gè)問(wèn)題佛点， 在Django的生態(tài)中醇滥，有沒(méi)有好的解決方法呢？

Sitetree介紹

經(jīng)過(guò)搜索超营， 在Django中有許多可以實(shí)現(xiàn)導(dǎo)航欄的插件鸳玩。 在本文中將講述如何集成Sitetree插件。
Sitetree的github傳送門(mén)在此sitetree's github,官網(wǎng)的自我介紹如下：

django-sitetree is a reusable application for Django, introducing site tree
menu and breadcrumbs navigation elements.

官網(wǎng)也有對(duì)如何使用的介紹演闭，文檔傳送門(mén)
雖然官網(wǎng)文檔在手不跟， 但是剛接觸的同學(xué)想要順利的使用起來(lái)可能也會(huì)遇到一些問(wèn)題。 通過(guò)百度搜索也發(fā)現(xiàn)相關(guān)的中文資料比較少米碰。 因而特此記錄窝革，希望對(duì)大家有所幫助。

使用步驟

1. Sitetree安裝

據(jù)官網(wǎng)中的的INSTALL文件吕座， 有兩種安裝方法虐译，一種是

  pip install django-sitetree

另外一種是下載源碼， 在源碼目錄中使用命令：

  pip install .

我在安裝的過(guò)程中吴趴， 使用第一個(gè)命令并沒(méi)有安裝成功漆诽。 索性就從github中下載了v1.9.0源碼， 使用第二個(gè)命令安裝成功。

2. 例子

關(guān)于Django使用sitetree的中文資料比較少厢拭， 還好下載了源碼兰英， 在源碼目錄中，看到了有Demo工程供鸠。
進(jìn)入Demo工程畦贸，使用

  python manage.py runserver

就可以成功運(yùn)行， 可以看到sitetree支持bootstrap2/3/4楞捂，選擇主題為bootstrap3之后薄坏， 效果如下圖所示：

sitetree官方Demo

既然Demo跑起來(lái)了鼻忠， 我們依葫蘆畫(huà)瓢就好

3. 使用

修改項(xiàng)目配置
在Django 1.11版本下涵但，只需要在setting文件中的INSTALL_APPS項(xiàng)目中加入sitetree就可以使用呢。

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'sitetree',
    'users',
    'sku',
]

添加目錄結(jié)構(gòu)
在Django的admin中能看到如下界面， 就說(shuō)明sitetree已經(jīng)能正常使用呢。

sitetree使能

使用sitetree編輯目錄結(jié)構(gòu)

4. 適配Metronic模版

Sitetree的官方例子里面并沒(méi)有直接支持Metronic闸盔，但是通過(guò)對(duì)Demo例子的學(xué)習(xí)，發(fā)現(xiàn)要使Sitetree能支持Metronic風(fēng)格并不難击费。
首先Sitetree在適配相關(guān)風(fēng)格的文檔快压，都是通過(guò)template文件的形式實(shí)現(xiàn)的坪郭， 比如我們要使用bootstrap3的風(fēng)格嫌松， 就需要使用諸如以下命令：

 {% sitetree_tree from "main" include "trunk" template "sitetree/menu_bootstrap3_navpills-stacked.html" %}

那我們可以看看這個(gè)menu_bootstrap3_navpills-stacked.html文件的內(nèi)容是什么？
在安裝Sitetree之后育灸，系統(tǒng)路徑是

/Library/Python/2.7/site-packages/sitetree/

Python的版本不同砸喻， 路徑會(huì)各不相同愉适。
在該路徑下存在templates/sitetree目錄惠爽。 Django在startserver的時(shí)候， 本目錄會(huì)成為系統(tǒng)搜索templates文件的默認(rèn)目錄之一。
讓我們看一下該文件的內(nèi)容：

{% load sitetree %}
<ul class="nav nav-pills nav-stacked">
    {% for item in sitetree_items %}
        <li {% if item.is_current or item.in_current_branch %}class="active"{% endif %}>
            <a href="{% sitetree_url for item %}">{{ item.title_resolved }}</a>
        </li>
    {% endfor %}
</ul>

代碼邏輯很簡(jiǎn)單， 而且從該文件我們發(fā)現(xiàn)人弓，該實(shí)現(xiàn)只支持一級(jí)目錄沼死， 如果我們的目錄結(jié)構(gòu)存在2級(jí)以上，就不能正確的顯示意蛀。
但是健芭，我們發(fā)現(xiàn)Demo工程的頂部導(dǎo)航欄是支持多級(jí)目錄結(jié)構(gòu)的， 那讓我們看看頂部導(dǎo)航欄的template文件內(nèi)容

{% load sitetree %}
<ul class="nav navbar-nav">
    {% for item in sitetree_items %}
        <li class="{% if item.has_children %}dropdown{% endif %} {% if item.is_current or item.in_current_branch %}active{% endif %}">
            <a href="{% if item.has_children %}#{% else %}{% sitetree_url for item %}{% endif %}" {% if item.has_children %}class="dropdown-toggle" data-toggle="dropdown"{% endif %}>
                {{ item.title_resolved }}
                {% if item.has_children %}<b class="caret"></b>{% endif %}
            </a>
            {% if item.has_children %}
                {% sitetree_children of item for menu template "sitetree/menu_bootstrap3_dropdown.html" %}
            {% endif %}
        </li>
    {% endfor %}
</ul>

可以看到，該文件有類似　if item.has_children的判斷邏輯，因此該模板文件是支持多級(jí)結(jié)構(gòu)的（至少是2級(jí)，3級(jí)沒(méi)有嘗試）代乃。 所以我們參考該文件編碼旬牲，既可以使得sitetree能使用Metronic的風(fēng)格吭历。

新增menu_metronic.html模版文件堕仔，內(nèi)容是

{% load static   %}
{% load sitetree %}

<div class="page-sidebar-wrapper">
    <div class="page-sidebar navbar-collapse collapse">
        <ul class="page-sidebar-menu   " data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">
            {% for item in sitetree_items %}
            <li class="nav-item">
                <a href="javascript:;" class="nav-link nav-toggle">
                    <span class="title">{{ item.title_resolved }}</span>
                    {% if item.has_children %}
                    <span class="arrow"></span>
                    {% endif %}
                </a>
                {% if item.has_children %}
                {% sitetree_children of item for menu template "menu_metronic_dropdown.html" %}
                {% endif %}
            </li>
            {% endfor %}
        </ul>
    </div>
</div>

新增menu_metronic_dropdown.html模版文件，內(nèi)容是

{% load static   %}
{% load sitetree %}
<ul class="sub-menu">
    {% for item in sitetree_items %}
        <li class ="nav-item">
            <a href="{% sitetree_url for item %"} class = "nav-link">
                <span class="title">{{ item.title_resolved }}</span>
            </a>
        </li>
    {% endfor %}
</ul>

目前我們有了兩個(gè)針對(duì)metronic模版的文件晌区， 只需要把這兩個(gè)文件放置在工程默認(rèn)的template目錄下摩骨， 系統(tǒng)即可找到。

在頁(yè)面的HTML文件中朗若， 在放置側(cè)邊導(dǎo)航欄的位置恼五，使用以下內(nèi)容就可以導(dǎo)入我們?cè)赼dmin面板中編輯的目錄結(jié)構(gòu)呢。

{% sitetree_menu from "maintree" include "trunk" template "menu_metronic.html" %}