django页面之间的前端模板继承或者引入详解(上)

佐手、 提交于 2020-10-31 11:16:04

1.{% load staticfiles %}

 

 

 

 

2.{% load rbac %}

    {% menu_html request %}           这部分就会变成用inclusion_tag生成的menu_html

 

 

 左侧菜单的生成templatetags目录下的rbac.py

功能;生成页面中的左侧菜单用inclusion_tag标签

运用:我们只需要在需要用到的文件中引用就可以生成这个菜单部分的内容。

  需要用到的模板文件中:

#!/usr/bin/env python
# -*- coding:utf-8 -*-
import re
from django.template import Library
from django.conf import settings
from collections import OrderedDict

register = Library()


@register.inclusion_tag('rbac/static_menu.html')
def static_menu(request):
    """
    创建一级菜单
    :return:
    """
    menu_list = request.session[settings.MENU_SESSION_KEY]
    return {'menu_list': menu_list}


@register.inclusion_tag('rbac/multi_menu.html')
def multi_menu(request):
    """
    创建二级菜单
    :return:
    """
    menu_dict = request.session[settings.MENU_SESSION_KEY]

    # 对字典的key进行排序
    key_list = sorted(menu_dict)

    # 空的有序字典
    ordered_dict = OrderedDict()

    for key in key_list:
        val = menu_dict[key]
        val['class'] = 'hide'

        for per in val['children']:
            regex = "^%s$" % (per['url'],)
            if re.match(regex, request.path_info):
                per['class'] = 'active'
                val['class'] = ''
        ordered_dict[key] = val

    return {'menu_dict': ordered_dict}
inclusion_tag生成左侧菜单

 

需要的模板文件templates下的menu.html

menu.html
# menu.html

<div class="menu">
    {% for k,menu in menu_dic.items %}
        {# 一级菜单 #}
        <div class="menu_first">{{ menu.menu_title }}</div>

        {# 二级菜单(就是一级菜单下边的内容) #}
        {% if menu.active %}
            <ul class="">
        {% else %}
            <ul class="hide">
        {% endif %}

    {% for child in menu.children %}
        {% if child.active %}
            <li class="menu_second active"><a href="{{ child.permission_url }}">{{ child.permission__title }}</a></li>
        {% else %}
            <li class="menu_second"><a href="{{ child.permission_url }}">{{ child.permission__title }}</a></li>
        {% endif %}
    {% endfor %}
    </ul>
    {% endfor %}
</div>


 

使用inclusion_tag的文件示例:

# 这个是django的模板文件
{% load rbac %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}模板{% endblock %}</title>
    <link rel="stylesheet" href="{% static 'rbac/bootstrap-3.3.7/css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'rbac/menu.css' %}">
    {% block css %} {% endblock css %}

</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-2 menu">
            {% block menu %}
                {% menu_html request %}    {# 用inclusion_tag生成的menu_html #}
            {% endblock menu %}
        </div>
        <div class="col-md-9">
            {% block content %}
            content
            {% endblock %}
        </div>
    </div>
</div>

inclusion_tag的使用模板文件

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!