无法在 django 中加载引导导航栏(可能是明显的解决方案)

Posted

技术标签:

【中文标题】无法在 django 中加载引导导航栏(可能是明显的解决方案)【英文标题】:Unable to load bootstrap navigation bar in django (maybe obvious solution) 【发布时间】:2019-07-14 23:14:30 【问题描述】:

我主页上的导航栏没有点击、打开和显示链接。我知道我需要提取 javascript 代码来执行此操作。这是图片。这三行无法单击和打开。

这就是单击这三行时应该发生的情况。

我已经完成了 *** 中的所有问题,但仍然无法加载它。我尝试上传引导 CDN,保存 javascript 并通过静态文件加载它,尝试了不同的 javascript 文件,但导航栏无法正常工作。我可能上传了错误的文件。 CSS 文件会加载,因此会加载一些静态文件。

这是 html 文件。

% load staticfiles %


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Album example for Bootstrap</title>
     <link  href="% static 'css/album.min.css' %" rel="stylesheet">

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

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins)-->
<script href="% static 'js/jquery.js' %" ></script>  <!--jquery-->

<!-- <script href = "% static 'js/collapse.js' %"></script>

<script href = "% static 'js/dropdown.js' %"></script> -->

  </head>

  <body>

    <div class="collapse bg-inverse" id="navbarHeader">
      <div class="container">
        <div class="row">
          <div class="col-sm-8 py-4">
            <h4 class="text-white">
            <li><a href="% url 'about' %">About</a></li>
          </h4>
            <p class="text-muted">About us.</p>
          </div>
          <div class="col-sm-4 py-4">
            <h4 class="text-white">Contact</h4>
            <ul class="list-unstyled">
              <li><a href="% url 'contact' %" class="text-white">Contact us</a></li>
              <li><a href="#" class="text-white">Like on Facebook</a></li>
              <li><a href="#" class="text-white">Follow on Twitter</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="navbar navbar-inverse bg-inverse">
      <div class="container d-flex justify-content-between">
        <a href="#" class="navbar-brand">MedTrend</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      </div>
    </div>

这是我与此相关的设置文件。

STATIC_URL = '/static/'

STATICFILES_DIRS = (
    os.path.join(os.path.abspath(os.path.dirname(__file__)), "static",),
)

【问题讨论】:

您的static 文件夹在哪里? 这一切都在目录应用程序下。它在那个文件夹里。然后我有一个 css、js 和 img 文件夹,每个单独的文件都在各自的文件夹中。 【参考方案1】:

如果您使用 Django 2.0 并且您的静态设置工作,那么您需要使用 % load static % 而不是 % load staticfiles %

如果您需要参考,那么这里是静态文件的工作示例:

project/settings.py

STATIC_URL = '/static/'

STATICFILES_DIRS = [
         os.path.join(BASE_DIR, 'static'),
]

在这里,我的项目根目录中有一个名为“static”的文件夹,其中包含“css”、“js”等文件夹。您还需要在 urls.py 中进行设置,以便模板。所以我会这样做:

project/urls.py

from django.contrib import admin
from django.urls import path
from django.conf.urls.static import static        #---imports
from django.conf import settings                  #---imports

urlpatterns = [

    path('', user_login),
    path('admin/', admin.site.urls), 
] 

urlpatterns += staticfiles_urlpatterns()       # <------- Add this

然后在 HTML 页面的顶部,导入静态文件

% load static from staticfiles %          #<-----this

<link rel="stylesheet" href="% static 'css/bootstrap.min.css'%">
<link rel="stylesheet" href="% static 'css/style.css'%">

更新

您忘记在您的静态/js 中添加bootstrap.bundle.js,然后在您的base_generic.html 中添加以下内容:

<script src="% static 'js/b.b.js' %"></script>

【讨论】:

如果你正在生产,即Debug= False,你需要运行python manage.py collectstatic 然后添加所需的代码,以便我可以重新制定问题并尝试一下。 你有没有把它上传到某个 git repo 或者我可以查看的任何地方? 当然@JR。在我们说话的时候,我收到了邀请并克隆了它。肯定会回复你的数据科学。好的,我去看看,让你知道问题。 @JR 让我们通过一些消息传递平台进行连接,因为我们需要讨论一些事情。

以上是关于无法在 django 中加载引导导航栏(可能是明显的解决方案)的主要内容,如果未能解决你的问题,请参考以下文章

我在应用程序委托中加载的视图控制器(在导航控制器中)与标签栏重叠

如何在 twitter 引导下拉菜单中使用悬停图像

无法将图像添加到标签栏项目反应导航

在导航视图控制器中加载特定视图

无法在我的 django 模板中加载图像

JS 有时无法在 Chrome 和其他浏览器中加载 [重复]