×

Django - 如何集成使用sitetree插件

96
fall4u
2017.12.24 15:30* 字数 1036
问题背景:

在使用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" %}

日记本
Web note ad 1