Django - 如何集成使用sitetree插件

问题背景：

在使用Metronic作为前端模版的时候， 默认的左侧导航栏的效果如下图所示：

Metronic 左侧导航栏

其示例Html文件对于这一个导航栏的实现长达1000多行，此处只截取部分展示：

    
        
        Form Stuff
        
    
    

        

            
                Bootstrap Form
                    
Controls
            
        
        

            
                Material Design
                    
Form Controls
            
        
        

            
                Form Validation
            
        
        

            
                Material Design
                    
Form Validation States
            
        
        

            
                Material Design
                    
Form Validation
            
        
        

            
                Form Layouts
            
        
        

            
                Form Input Mask
            
        
        

            
                Form X-editable
            
        
        

            
                Form Wizard
            
        
        

            
                iCheck Controls
            
        
        

            
                Image Cropping
            
        
        

            
                Multiple File Upload
            
        
        

            
                Dropzone File Upload
            
        
    

这段代码仅仅只是对Elements的实现。
如果在网站中导航栏的内容比较多， 按照Metronic的实现方式， 代码的可维护性不会太好。
那么这个问题， 在Django的生态中，有没有好的解决方法呢？

Sitetree介绍

经过搜索， 在Django中有许多可以实现导航栏的插件。 在本文中将讲述如何集成Sitetree插件。
Sitetree的github传送门在此sitetree's github,官网的自我介绍如下：

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

官网也有对如何使用的介绍，文档传送门
虽然官网文档在手， 但是刚接触的同学想要顺利的使用起来可能也会遇到一些问题。 通过百度搜索也发现相关的中文资料比较少。 因而特此记录，希望对大家有所帮助。

使用步骤

1. Sitetree安装

据官网中的的INSTALL文件， 有两种安装方法，一种是

  pip install django-sitetree

另外一种是下载源码， 在源码目录中使用命令：

  pip install .

我在安装的过程中， 使用第一个命令并没有安装成功。 索性就从github中下载了v1.9.0源码， 使用第二个命令安装成功。

2. 例子

关于Django使用sitetree的中文资料比较少， 还好下载了源码， 在源码目录中，看到了有Demo工程。
进入Demo工程，使用

  python manage.py runserver

就可以成功运行， 可以看到sitetree支持bootstrap2/3/4，选择主题为bootstrap3之后， 效果如下图所示：

sitetree官方Demo

既然Demo跑起来了， 我们依葫芦画瓢就好

3. 使用

修改项目配置
在Django 1.11版本下，只需要在setting文件中的INSTALL_APPS项目中加入sitetree就可以使用呢。

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

添加目录结构
在Django的admin中能看到如下界面， 就说明sitetree已经能正常使用呢。

sitetree使能

现在就可以进入sitetree编辑页面，根据需要编辑生成目录结构了，笔者编辑生成的目录结构如下图：

使用sitetree编辑目录结构

在HTML文件中引入目录结构
我们这里可以参考Demo工程中的listing_bootstrap3.html的文件，就可以展示出符合bootstrap3风格的目录效果呢。

4. 适配Metronic模版

Sitetree的官方例子里面并没有直接支持Metronic，但是通过对Demo例子的学习，发现要使Sitetree能支持Metronic风格并不难。
首先Sitetree在适配相关风格的文档，都是通过template文件的形式实现的， 比如我们要使用bootstrap3的风格， 就需要使用诸如以下命令：

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

那我们可以看看这个menu_bootstrap3_navpills-stacked.html文件的内容是什么？
在安装Sitetree之后，系统路径是

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

Python的版本不同， 路径会各不相同。
在该路径下存在templates/sitetree目录。 Django在startserver的时候， 本目录会成为系统搜索templates文件的默认目录之一。
让我们看一下该文件的内容：

{% load sitetree %}

    {% for item in sitetree_items %}
        

            {{ item.title_resolved }}
        
    {% endfor %}

代码逻辑很简单， 而且从该文件我们发现，该实现只支持一级目录， 如果我们的目录结构存在2级以上，就不能正确的显示。
但是，我们发现Demo工程的顶部导航栏是支持多级目录结构的， 那让我们看看顶部导航栏的template文件内容

{% load sitetree %}

    {% for item in sitetree_items %}
        

            
                {{ item.title_resolved }}
                {% if item.has_children %}{% endif %}
            
            {% if item.has_children %}
                {% sitetree_children of item for menu template "sitetree/menu_bootstrap3_dropdown.html" %}
            {% endif %}
        
    {% endfor %}

可以看到，该文件有类似　if item.has_children的判断逻辑，因此该模板文件是支持多级结构的（至少是2级，3级没有尝试）。 所以我们参考该文件编码，既可以使得sitetree能使用Metronic的风格。

新增menu_metronic.html模版文件，内容是

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


    

        

            {% for item in sitetree_items %}
            

                
                    {{ item.title_resolved }}
                    {% if item.has_children %}
                    
                    {% endif %}
                
                {% if item.has_children %}
                {% sitetree_children of item for menu template "menu_metronic_dropdown.html" %}
                {% endif %}
            
            {% endfor %}
        
    

新增menu_metronic_dropdown.html模版文件，内容是

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

    {% for item in sitetree_items %}
        

            
                {{ item.title_resolved }}
            
        
    {% endfor %}

目前我们有了两个针对metronic模版的文件， 只需要把这两个文件放置在工程默认的template目录下， 系统即可找到。

在页面的HTML文件中， 在放置侧边导航栏的位置，使用以下内容就可以导入我们在admin面板中编辑的目录结构呢。

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