我在“导航栏”中的链接相互重叠：/答案

【问题标题】：Links that I have in 'navbar' overlaps each other:/我在“导航栏”中的链接相互重叠：/
【发布时间】：2018-07-11 06:32:57
【问题描述】：

大家好：）当我转换到另一个链接时，我在“导航栏”中的链接相互重叠。例如，我有一个导航栏菜单，其中包含四个不同的链接（主页、目录、分销商和联系人），而“主页”是一个基本网页。即，当我从基本网页“http://127.0.0.1:8000/”转换到目录时，我得到了这个http://127.0.0.1:8000/catalog（好吧），但随后我转换到了“分销商”部分，然后我得到了这个“http://127.0.0.1:8000/catalog/distributors”（它是不正常）如何纠正？我的 url 模式似乎是正确的：/

   urlpatterns = [
   url(r'^$', views.home, name='home'),
   url(r'^catalog/$', views.catalog, name='catalog'),
   url(r'^distributors/$', views.distributors, name='distributors'),
   url(r'^contacts/$', views.contacts, name='Contacts'),
   ]

template:
<div class="header">
  <div id="inner">
    <div class="col">
        <div class="inner">
            <div class="image"><p><a href="/">HOME</a></p></div>
            <div class="filter1"></div>
            <div class="filter2"></div>
            <div class="txt">
              <p>We greet you on the main</p>
              <p>page of our website!</p>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="inner">
            <div class="image"><p><a href="catalog">CATALOG</a></p></div>
            <div class="filter1"></div>
            <div class="filter2"></div>
            <div class="txt">
              <p>Browse through our catalog</p>
              <p>and select the good just for you.</p>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="inner">
            <div class="image"><p><a href="distributors">DISTRIBUTORS</a></p></div>
            <div class="filter1"></div>
            <div class="filter2"></div>
            <div class="txt">
              <p>We are currently expanding our</p>
              <p>distributor network into new markets.</p>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="inner">
            <div class="image"><p><a href="contacts">CONTACTS</a></p></div>
            <div class="filter1"></div>
            <div class="filter2"></div>
            <div class="txt">
              <p>You can always communicate with us</p>
              <p>using section "Contacts". </p>
            </div>
        </div>
    </div>
  </div>
</div>

views:
def home(request):
products_images = ProductImage.objects.filter(is_active=True, is_main=True, product__is_active=True)
products_images_with = products_images.filter(product__category__id=1)
products_images_without = products_images.filter(product__category__id=2)
return render(request, 'landing/home.html', locals())

def catalog(request):
products_images = ProductImage.objects.filter(is_active=True, is_main=True, product__is_active=True)
return render(request, 'landing/catalog.html', locals())

def distributors(request):
return render(request, 'landing/distributors.html', locals())

def contacts(request):
return render(request, 'landing/Contacts.html', locals())

有人可以帮我解决这个问题吗？ Django 版本 1.11.2

【问题讨论】：

你好。您能否使用包含访问“分销商”部分的链接的代码更新您的问题？错误可能在视图或模板中，而不是在 urls 声明中。
添加的内容

标签： python django url django-urls

【解决方案1】：

问题在于您在 Django 模板中使用链接的方式。

看看：https://docs.djangoproject.com/en/2.0/ref/templates/builtins/#url

您必须使用{% url 'url-name-here' %} 以便 Django 自己构建 url。

例如，在您的情况下：

<div class="image"><p><a href="{% url 'catalog'%}">CATALOG</a></p></div>

这边：

这对你来说容易多了，你只需提供 url 名称，让 Django 生成真正的 url。
你不要重复自己；如果要改变url的路径，只需要在urls.py中做一次即可。

【讨论】：

非常感谢您的帮助和详细信息！现在好了:)
不客气。如果你有时间，你可以做Django tutorial，它涵盖了这个概念和许多其他概念。

【解决方案2】：

正如@David D. 回答的那样，您应该使用 url 构建方法，因为它为您提供了灵活性。

但是，如果出于某种原因您希望在 href 中指定绝对 URL，那么在使用绝对 URL 时，可以通过在分配给 href 时在每个 url 名称前加上正斜杠来解决上述问题。

所以你的新网址应该是这样的：

<a href="/catalog">CATALOG</a>
<a href="/distributors">DISTRIBUTORS</a>
<a href="/contacts">CONTACTS</a>

它起作用的原因是 / 代表网站的根目录，因此使用“/”将您路由到根目录，使用“/catalog”将您直接从根目录路由到目录页面。

【讨论】：