如何在Django中为Bootstrap导航栏添加跳转链接

Bootstrap导航栏兼容修复 #

你当前引入的是Bootstrap 5版本，代码中使用的是Bootstrap 3的导航栏类名，语法不兼容会导致样式异常，先替换为Bootstrap 5的正确语法：

• 导航栏类从navbar-default改为navbar-expand-lg bg-light
• 折叠按钮类从navbar-toggle改为navbar-toggler，属性前缀从data-toggle/data-target改为data-bs-toggle/data-bs-target
• 导航列表类从nav navbar-nav改为navbar-nav

导航链接后台可配置实现方案 #

1. 新增导航链接模型 #

在应用的models.py中添加如下代码：

from django.db import models

class NavLink(models.Model):
    title = models.CharField("链接文本", max_length=50)
    url = models.CharField("链接地址", max_length=200)
    is_authenticated_only = models.BooleanField("仅登录用户可见", default=False)
    is_anonymous_only = models.BooleanField("仅未登录用户可见", default=False)
    sort_order = models.IntegerField("排序优先级", default=0, help_text="数字越小排列越靠前")

    class Meta:
        ordering = ['sort_order']
        verbose_name = "导航链接"
        verbose_name_plural = "导航链接"

    def __str__(self):
        return self.title

2. 后台注册模型 #

在应用的admin.py中注册该模型，即可在管理后台编辑：

from django.contrib import admin
from .models import NavLink

@admin.register(NavLink)
class NavLinkAdmin(admin.ModelAdmin):
    list_display = ('title', 'url', 'is_authenticated_only', 'is_anonymous_only', 'sort_order')
    list_editable = ('sort_order', 'is_authenticated_only', 'is_anonymous_only')

3. 配置全局上下文处理器 #

新建应用目录下的context_processors.py，让所有模板都能读取导航链接数据：

from .models import NavLink

def nav_links(request):
    return {'nav_links': NavLink.objects.all()}

在settings.py的TEMPLATES配置中添加该处理器：

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
                # 替换为你的实际应用名
                'your_app_name.context_processors.nav_links',
            ],
        },
    },
]

4. 模板动态渲染导航链接 #

替换base.html中原写死的导航列表部分：

<div id="navbar" class="collapse navbar-collapse">
    <ul class="navbar-nav me-auto">
        {% for link in nav_links %}
            {% if not link.is_anonymous_only or not user.is_authenticated %}
                {% if not link.is_authenticated_only or user.is_authenticated %}
                    <li class="nav-item">
                        <a class="nav-link" href="{{ link.url }}">{{ link.title }}</a>
                    </li>
                {% endif %}
            {% endif %}
        {% endfor %}
    </ul>
</div>

配置完成后执行python manage.py makemigrations和python manage.py migrate生成数据表，即可在Django管理后台新增、编辑、排序导航链接，无需修改代码即可更新导航栏内容。

内容的提问来源于stack exchange，提问作者panti