我在 'navbar' 中的链接相互重叠：/

Question

大家好:) 当我转换到另一个 link 时，我在 'navbar' 中的链接相互重叠。例如，我有一个导航栏菜单，其中包含四个不同的 link（主页、目录、分销商和联系人），'home' 是一个基本网页。即当我从基本网页 'http://127.0.0.1:8000/' to catalog I get this http://127.0.0.1:8000/catalog (all right) but then I make a transition into section 'distributors' and then I get this '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

Answer 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.

Answer 2

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

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

因此您的新 url 应该如下所示：

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

它起作用的原因是 / 代表网站的根目录，因此使用“/”会将您引导至根目录，而使用“/catalog”将您直接从根目录引导至目录页面。

我在 'navbar' 中的链接相互重叠：/

Links that I have in 'navbar' overlaps each other:/

python

django

url

django-urls