问题背景：
在使用Metronic作为前端模版的时候， 默认的左侧导航栏的效果如下图所示：
Metronic 左侧导航栏
其示例Html文件对于这一个导航栏的实现长达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>
这段代码仅仅只是对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 %}
<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>
代码逻辑很简单， 而且从该文件我们发现，该实现只支持一级目录， 如果我们的目录结构存在2级以上，就不能正确的显示。
但是，我们发现Demo工程的顶部导航栏是支持多级目录结构的， 那让我们看看顶部导航栏的template文件内容
{% 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的判断逻辑，因此该模板文件是支持多级结构的（至少是2级，3级没有尝试）。 所以我们参考该文件编码，既可以使得sitetree能使用Metronic的风格。
新增menu_metronic.html模版文件，内容是
{% 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模版文件，内容是
{% 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>
目前我们有了两个针对metronic模版的文件， 只需要把这两个文件放置在工程默认的template目录下， 系统即可找到。
在页面的HTML文件中， 在放置侧边导航栏的位置，使用以下内容就可以导入我们在admin面板中编辑的目录结构呢。
{% sitetree_menu from "maintree" include "trunk" template "menu_metronic.html" %}
网友评论