Django模板html中如何将context名称传入导航链接的url调用

首先明确你代码中的3个核心问题：

• Django模板的{% url %}标签内部属于模板语法作用域，直接引用变量即可，不需要额外套{{ }}
• 你当前urls.py中定义的index路由没有配置路径参数，无法接收传入的参数
• 模板中存在拼写错误：sbout应为about

实现步骤 #

1. 调整urls.py路由配置

给index路由新增可选的section参数，支持传入context键名：

from django.urls import path
from . import views

urlpatterns = [
   path('', views.index, name='index'),
   # 新增带section参数的路由，对应不同导航区块
   path('<str:section>/', views.index, name='index_section'),
   path('blog/', views.blog, name='blog')
]

2. 修改views.py的index函数，接收参数

# 新增section参数，默认值为None
def index(request, section=None):
    # 原有数据查询逻辑保持不变
    home = Home.objects.latest('updated')
    about = About.objects.latest('updated')
    profiles = Profile.objects.filter(about=about)
    categories = Category.objects.all()
    portfolios = Portfolio.objects.all()
    
    context = {
        'home': home,
        'about': about,
        'profiles': profiles,
        'categories': categories,
        'portfolios': portfolios,
        # 把当前section传入模板，用于导航激活状态判断
        'current_section': section
    }

    if request.method == "POST":
        form_inst = FormFill(
            name = request.POST['name'],
            email = request.POST['email'],
            text = request.POST['text']
        )
        form_inst.save()
        return redirect('index')

    return render(request, 'index.html', context=context)

3. 修正HTML模板导航代码

<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
   <li class="nav__item"><a href="{% url 'blog' %}" class="nav__link active" target="_blank">Blog</a></li>
   <li class="nav__item"><a href="{% url 'index_section' 'home' %}" class="nav__link {% if current_section == 'home' %}active{% endif %}">Home</a></li>
   <li class="nav__item"><a href="{% url 'index_section' 'about' %}" class="nav__link {% if current_section == 'about' %}active{% endif %}">About</a></li>
   <li class="nav__item"><a href="{% url 'index_section' 'profiles' %}" class="nav__link {% if current_section == 'profiles' %}active{% endif %}">Skills</a></li>
   <li class="nav__item"><a href="{% url 'index_section' 'categories' %}" class="nav__link {% if current_section == 'categories' %}active{% endif %}">Portfolio</a></li>
   <li class="nav__item"><a href="{% url 'index_section' 'portfolios' %}" class="nav__link {% if current_section == 'portfolios' %}active{% endif %}">Contact</a></li>
 </ul>
</div>

替代方案（单页锚点跳转，无需修改后端） #

如果你只是需要实现单页内不同区块的跳转，不需要向后端传参，可直接用锚点实现，更简单：

1. 给页面中对应区块加上id属性，比如Home区块加<section id="home">
2. 导航链接直接写锚点即可：

<li class="nav__item"><a href="#home" class="nav__link">Home</a></li>

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