无法在 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 中加载引导导航栏(可能是明显的解决方案)的主要内容,如果未能解决你的问题,请参考以下文章