📜  django 面包屑 (1)

📅  最后修改于: 2023-12-03 14:40:47.823000             🧑  作者: Mango

Django 面包屑

面包屑(Breadcrumbs)是一个常见的用户界面元素,用于显示当前页面在网站层级结构中的位置。在 Django 中,可以使用第三方库或自定义模板标签来实现面包屑功能。

什么是面包屑?

面包屑是一种导航辅助工具,它通过一系列链接来显示当前页面在网站层级结构中的位置。面包屑通常以层级结构的形式展示,让用户快速了解当前页面的上级页面和路径。

Django 中的面包屑

在 Django 中,可以使用第三方库或自定义模板标签来实现面包屑功能。下面分别介绍这两种方法。

1. 使用第三方库

有许多可用的第三方库可以帮助我们在 Django 中实现面包屑功能。其中一种常用的库是 django-breadcrumbs

安装 django-breadcrumbs

pip install django-breadcrumbs

使用 django-breadcrumbs

# settings.py
INSTALLED_APPS = [
    ...
    'breadcrumbs',
    ...
]

# urls.py
from django.urls import path
from breadcrumbs import urls as breadcrumbs_urls

urlpatterns = [
    ...
    path('breadcrumbs/', include(breadcrumbs_urls)),
    ...
]

# views.py
from django.views.generic import TemplateView
from breadcrumbs import register

@register('home')
class HomeView(TemplateView):
    template_name = 'home.html'

@register('home.child')
class ChildView(TemplateView):
    template_name = 'child.html'

# templates/child.html
{% extends "base.html" %}

{% block breadcrumbs %}
    {% load breadcrumbs_tags %}
    {% breadcrumbs request=request %}
{% endblock %}
2. 自定义模板标签

如果你不想使用第三方库,也可以自己编写 Django 模板标签来实现面包屑功能。

# breadcrumbs_tags.py
from django import template

register = template.Library()

@register.simple_tag(takes_context=True)
def breadcrumbs(context):
    path = context['request'].path
    crumbs = path.split('/')
    crumbs = [crumb for crumb in crumbs if crumb != '']
    breadcrumbs = []
    for i, crumb in enumerate(crumbs):
        breadcrumb = {
            'title': crumb,
            'url': '/'.join([crumbs[j] for j in range(i + 1)]),
        }
        breadcrumbs.append(breadcrumb)
    return breadcrumbs

# templates/child.html
{% extends "base.html" %}

{% load breadcrumbs_tags %}

{% breadcrumbs as breadcrumbs %}

{% block breadcrumbs %}
    <ul>
        {% for breadcrumb in breadcrumbs %}
            <li>
                <a href="{{ breadcrumb.url }}">{{ breadcrumb.title }}</a>
            </li>
        {% endfor %}
    </ul>
{% endblock %}

以上介绍了两种实现面包屑功能的方法,你可以根据自己的需求选择合适的方法来使用。使用面包屑能够提升用户体验,让用户更轻松地导航网站的层级结构。