【问题标题】:Navigation links not working in navbar (Bootstrap)(Django)导航链接在导航栏中不起作用(Bootstrap)(Django)
【发布时间】:2017-08-31 08:17:57
【问题描述】:

我正在使用 django 1.10 和 python 3.6 创建一个网站。 我的网络应用程序称为“配置文件”,项目称为“firstsite”。我使用了来自 bootstrap 的模板,该模板保存为“base.html”。我的 webapp 中有两个页面使用模板“home.html”和“about.html”。导航栏是另一个名为“navbar.html”的 html 文件。我正在尝试在导航栏中链接“主页”和“关于”。链接后,当我运行服务器并打开“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' %} 并放置 #,则网站可以正常运行,没有任何错误。

【问题讨论】:

    标签: python html django twitter-bootstrap navbar


    【解决方案1】:

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

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

    这会很好用。

    【讨论】:

    • 非常感谢朋友。像魅力一样工作。
    • 我很荣幸能帮助你。@K.Grewal
    猜你喜欢
    • 2015-04-17
    • 2018-03-25
    • 2017-01-28
    • 2021-07-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-06-18
    相关资源
    最近更新 更多