django 通用导航栏选中状态实现（前后端不分离）

目的效果

导航栏通用，实现选中效果

开发环境

Django 前后端不分离

使用的 Django 知识点

1. 包含标签（inclusion_tag，放在 base.html 实现导航栏页面通用）
2. 模板里的 block, if, in, request.path, slice 等

选中状态实现原理

通过当前的 url 地址来判断 li 的 class 是否需要 active (激活状态)

实现过程

把导航栏制作成 包含标签

# blog_nav.html

代码语言：javascript复制

<li class="{% if request.path == "/" %} am-active {% endif %}"><a href="{% url 'blog:index' %}"><span
        class="am-icon-home"> 首页&nbsp;</span></a></li>

<li class="am-dropdown" data-am-dropdown>
    <a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;">
        {% if  "/node/" not in request.path %}
            <span class="am-icon-filter"></span>
            分类 <span class="am-icon-caret-down"></span>
        {% else %}
            <span style="color: #10D07A" class="am-icon-filter"></span>
            <span style="color: #10D07A">{{ request.path | slice:"6:-1" }}</span>
            <span class="am-icon-caret-down"></span>
        {% endif %}
    </a>
    <ul class="am-dropdown-content">
        {% for tag in nodes %}
            {% if tag.name in request.path %}
                <li class="am-active">
                    <a href="{% url 'blog:node' tag.name %}">{{ tag.name }}({{ tag.nods_set.count }})</a>
                </li>
            {% else %}
                <li><a href="{% url "blog:node" tag.name %}">{{ tag.name }}({{ tag.nods_set.count }})</a></li>
            {% endif %}
        {% endfor %}
    </ul>
</li>

{#<li class="am-dropdown" data-am-dropdown>#}
{#    <a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;">#}
{#        {% if "/tag/" not in request.path %}#}
{#            <span class="am-icon-tag"></span>#}
{#            标签 <span class="am-icon-caret-down"></span>#}
{#        {% else %}#}
{#            <span style="color: #10D07A" class="am-icon-tag"></span>#}
{#            <span style="color: #10D07A">{{ request.path | slice:"5:-1" }}</span> <span class="am-icon-caret-down"></span>#}
{#        {% endif %}#}
{#    </a>#}
{#    <ul class="am-dropdown-content">#}
{#        {% for tag in cloudtags %}#}
{#            {% if tag.name in request.path %}#}
{#                <li class="am-active"><a href="{% url 'blog:tag' tag.name %}">{{ tag.name }}</a></li>#}
{#            {% else %}#}
{#                <li><a href="{% url 'blog:tag' tag.name %}">{{ tag.name }}</a></li>#}
{#            {% endif %}#}
{#        {% endfor %}#}
{#    </ul>#}
{#</li>#}

<li class="{% if "/photos/" in request.path %} am-active{% endif %}"><a href="{% url 'photos:index' %}"><span
        class="am-icon-th-large"
        onclick="MtaH5.clickStat('10',{'1':'true'})"> 相册&nbsp;</span></a>
</li>
<li class="{% if "/timeline/" in request.path %} am-active {% endif %}"><a href="{% url 'blog:timeline' %}"><span
        class="am-icon-archive"> 归档&nbsp;</span></a></li>
<li class="{% if "/friendUrlA" in request.path %}am-active{% endif %}"><a href="{% url 'blog:friendUrlAll' %}"><span
        class="am-icon-link"> 友链&nbsp;</span></a></li>
{% if "/article/" in request.path %}
    <li class="am-active"><a href=""><span class="am-icon-book"></span> 文章&nbsp;</a></li>
{% endif %}

{% if "/search/" in request.path %}
    <li class="am-active"><a href="?q={{ query }}"><span class="am-icon-search"></span> 搜索&nbsp;</a></li>
{% endif %}


{#{{ request.path }}#}

# my_tags.py（传一个 request 参数，为了获取当前页面的 地址）

代码语言：javascript复制

@register.inclusion_tag("blog_nav.html")
def blog_nav(request):
    """
    博客导航页
    :return:
    """
    # 分类
    nodes = cache.get("nodes")
    if not nodes:
        nodes = Node.objects.filter().order_by("name")
        cache.set("nodes", nodes, CACHE_TIMEOUT_12H)

    # 标签
    cloudtags = cache.get("cloudtags")
    if not cloudtags:
        cloudtags = Tag.objects.filter().order_by("name")
        cache.set("cloudtags", cloudtags, CACHE_TIMEOUT_12H)

    return {"nodes": nodes, "cloudtags": cloudtags, "request": request}

base.html 页面 block 一个 nav, 并引用导航栏标签 blog_nav（其他页面需要继承 base.html）

代码语言：javascript复制

// block 导航栏 nav
{% block nav %}
    // 引用导航栏标签 blog_nav，并传参 request
    {% blog_nav request %}
{% endblock %}	

html django http

0 人点赞