导航链接在导航栏中不起作用 (Bootstrap)(Django)

Question

我正在使用 django 1.10 和 python 3.6 创建一个网站。我的网络应用名为 'profiles'，项目名为 'firstsite'。我使用了 bootstrap 中的模板，该模板另存为 'base.html'。我的 Web 应用程序中有两个页面使用模板 'home.html' 和 'about.html'。导航栏是另一个名为 'navbar.html' 的 html 文件。我正在尝试 link 'home' 和 'about' 在导航栏中。 linking 之后，当我运行服务器并打开“http://127.0.0.1:8000/”时，出现 'NoReverseMatch at/' 错误。

firstsite/firstsite/urls.py

from django.conf import settings
from django.conf.urls.static import static
from django.conf.urls import url, include
from django.contrib import admin

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^', include('profiles.urls')),
]

if settings.DEBUG:
    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

firstsite/profiles/urls.py

from django.conf.urls import url
from profiles import views

app_name = 'profiles'
urlpatterns = [
    url(r'^$', views.home, name='home'),
    url(r'^about/$', views.about, name='about'),
]

firstsite/profiles/views.py

from django.shortcuts import render

def home(request):
    context = locals()
    template = 'home.html'
    return render(request, template, context)

def about(request):
    context = locals()
    template = 'about.html'
    return render(request, template, context)

firstsite/profiles/templates/base.html

{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Theme Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
    <!-- Bootstrap theme -->
    <link href="{% static 'css/bootstrap-theme.min.css' %}" rel="stylesheet">
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="{% static 'css/theme.css' %}" rel="stylesheet">
    <link rel='stylesheet' href='{% static "css/main.css" %}'>

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="../../assets/js/ie-emulation-modes-warning.js"></script>


<![endif]-->
</head>

<body>   
   {% include 'navbar.html'%}
   <div class="container theme-showcase" role="main">

   {% block content %}
   {% endblock %}

     <!-- Main jumbotron for a primary marketing message or call to action -->
     <div class="jumbotron">
       <h1>Theme example</h1>
       <p>This is a template showcasing the optional theme stylesheet included in Bootstrap. Use it as a starting point to create something more unique by building on or modifying it.</p>
     </div>
   </div> <!-- /container -->


   <!-- Bootstrap core JavaScript
   ================================================== -->
   <!-- Placed at the end of the document so the pages load faster -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
   <script src="{% static 'javascript/bootstrap.min.js' %}"></script>
   <script src="{% static 'javascript/docs.min.js' %}"></script>
   <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
   <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>

firstsite/profiles/templates/home.html

{% extends 'base.html' %}


{% block content %}
<h1>Hello World. I'm Back.</h1>
{% endblock %}

firstsite/profiles/templates/about.html

{% extends 'base.html' %}

{% block content %}
<h1>Hello About</h1>
{% endblock %}

firstsite/profiles/templates/navbar.html

<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Bootstrap theme</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="{% url 'home' %}">Home</a></li>
        <li><a href="{% url 'about' %}">About</a></li>
        <li><a href="#contact">Contact</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li class="dropdown-header">Nav header</li>
            <li><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

正如您在 navbar.html 中看到的那样，{% url 'home' %} 应该可以工作，但我收到此错误：

Error Screenshot

如果我删除 navbar.html 中的 {% url 'home' %} 并放置 #，该网站可以正常运行，没有任何错误。

Answer 1

只需在命名网址前使用应用名称

<li class="active"><a href="{% url 'profiles:home' %}">Home</a></li>
<li><a href="{% url 'profiles:about' %}">About</a></li>

这会很好用。

导航链接在导航栏中不起作用 (Bootstrap)(Django)

Navigation links not working in navbar (Bootstrap)(Django)

html

python

django

navbar

twitter-bootstrap