Question

我是django的新手，我想为其使用django创建一个响应式网站，该网站运行正常，除了一件事，当网站切换到移动视图时，导航栏不起作用。

这是我的urls.py

从django.conf.urls

导入URL 从应用程序导入视图中

urlpatterns = [

url(r'^$',views.index,name='index'),
url(r'^about/',views.about,name='about'),
url(r'^contact/',views.contact,name='contact'),
url(r'^portfolio_project1/',views.portfolio_project1,name='portfolio_project1'),
url(r'^portfolio_project2/',views.portfolio_project2,name='portfolio_project2'),
url(r'^portfolio_project3/',views.portfolio_project1,name='portfolio_project3'),
url(r'^resume/',views.resume,name='resume'),
url(r'^portfolio/',views.portfolio,name='portfolio'),

]

这是我的标题部分

<header role="banner" class="banner clearfix" id="banner">
        <div class="section-content">
            <div class="branding clearfix">
                <figure id="logo"><a href="{% url "index" %}" title="Return to Home Page"><img src="{% static "images/logo.png" %}" alt="my logo" /></a></figure>
                <h1><a href="{% url "index" %}" title="Return to Home Page">Sriram</a></h1>
                <h2>Portfolio Website</h2>
            </div>
        </div>
        <a href="#nav" aria-controls="nav" class="nav-menu-toggle control" id="menu-toggle">Menu</a>
    </header>
    <nav role="navigation" class="nav clearfix main-nav" id="nav">
        <ul class="nav-menu">
            <li class="menu-item"><a href="{% url "about" %}">About</a></li>
            <li class="menu-item"><a href="{% url "resume" %}">Resume</a></li>
            <li class="menu-item"><a href="{% url "portfolio" %}">Portfolio</a>
                <ul class="sub-menu">
        <li class="menu-item"><a href="{% url "portfolio_project1" %}">Project 1</a></li>
                    <li class="menu-item"><a href="{% url "portfolio_project2" %}">Project 2</a></li>
                    <li class="menu-item"><a href="{% url "portfolio_project3" %}">Project 3</a></li>
                </ul>
            </li>
            <li class="menu-item"><a href="{% url "contact" %}">Contact</a></li>
        </ul><!--/.nav-menu-->
    </nav>

这是我的views.py

从django.shortcuts导入渲染

从django.http导入HttpResponse

def索引（请求）：返回render（request，'index.html'）

关于（要求）的

def：返回render（request，'about.html'）

def联系人（请求）：返回render（request，'contact.html'）

def Portfolio_project1（请求）：返回render（request，'portfolio_project1.html'）

def Portfolio_project2（请求）：返回render（request，'portfolio_project2.html'）

def Portfolio_project3（请求）：返回render（request，'portfolio_project3.html'）

def简历（请求）：返回render（request，'resume.html'）

def组合（请求）：返回render（request，'portfolio.html'）

这些是链接的脚本

    <script>window.jQuery || document.write('<script src="{% static "js/vendor/jquery-1.12.0.min.js" %}"><\/script>')</script>
    <script src="{% static "js/plugins.js" %}"></script>

    <!-- Widowtamer -->
    <script src="{% static "js/vendor/widowtamer-min.js" %}"></script>

    <script src="{% static "js/main.js" %}></script>

我已经在不使用django的情况下测试了该网站，效果很好。但是，如果我在切换到移动视图时使用django，则菜单按钮不起作用，其他所有功能都可以正常工作。

Answer 1

要解决这个问题...

在您的main.html（其他人选择称为base.html）中，在head标签会话中引用此Django模板标签：

{% include "navbar.html" %}

，导航栏将出现在您的所有网站会话中

Answer 2

推荐观看本系列学习Django。 https://www.youtube.com/playlist?list=PLEsfXFp6DpzTD1BD1aWNxS2Ep06vIkaeW

使用 bootstrap 制作导航栏

将此入门 Template 添加到 base.html

Next 将此添加到正文的顶部

<!-- A grey horizontal navbar that becomes vertical on small screens -->
<nav class="navbar navbar-expand-sm bg-light">

  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 3</a>
    </li>
  </ul>`

来源https://www.w3schools.com/bootstrap4/bootstrap_navbar.asp

如果您在此链接中没有找到入门模板

然后是代码：

    <!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

完成后，您的代码应如下所示：

<!DOCTYPE html>
<html lang="en">
    <head>
         <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

        <title>BASE</title>
    </head>
    <body>
        <!-- A grey horizontal navbar that becomes vertical on small screens -->
<nav class="navbar navbar-expand-sm bg-light">

    <!-- Links -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="{% url 'link1' %}">Link 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="{% url 'link2' %}">Link 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="{% url 'link3' %}">Link 3</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="{% url 'link4' %}">Link 4</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="{% url 'link5' %}">Link 5</a>
      </li>
    </ul>
  
  </nav>

  
        {% block content %}
        Replace Me!
        {% endblock %}

        <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  
    </body>
</html>

Answer 3

我创建了一个包含导航条代码的HTML“ navbar.html”

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
        <a class="navbar-brand" href="#">Qina Smart Map</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href={%url "home"%}>Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link " href={%url "admin"%}>Admin</a>
            </li>
           <li class="nav-item">
              <a class="nav-link " href={%url "about"%}>About</a>
            </li>
         </div>
      </nav>

然后我在HTML文件中使用了此标记

{%include 'navbar.html'%}

我的url.py

urlpatterns = [
    url(r'^$', qinaschools.views.home, name='home'),
    path('about/', qinaschools.views.about, name='about'),
    url(r'^qinaschools_dataset/$', qinaschools_dataset, name='qinaschools'),
    path('admin/', qinaschools.views.admin, name='admin'),

]

如何在Django中链接导航栏？

3 个答案: