使用引导程序在多个 html 页面上显示导航栏
Posted
技术标签:
【中文标题】使用引导程序在多个 html 页面上显示导航栏【英文标题】：Displaying navbar on multiple html pages using bootstrap 【发布时间】：2017-06-14 10:43:48 【问题描述】：我一直在寻找这个问题的答案。我正在使用 Bootstrap 框架来创建投资组合网站。我已经完成了带有固定顶部导航栏的 index.html：
This is the home page. The top shows the navbar.
此导航栏包含指向“简历”页面、“项目”下拉菜单和“联系人”页面的链接。我为每个页面创建了单独的 html 页面（例如：我有 index.html、bio.html、contact.html、video.html、design.html 等）。但是，当我按下链接时，它们不会显示导航栏，也不会显示任何其他格式。
我有这个图形设计html代码：
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Graphic Design</title>
</head>
<body>
<h1>Graphic Design</h1>
<p>Creating</p>
</body>
</html>
这就是显示的内容： graphicdesign.html page
我想知道是否有办法让项目中每个 HTML 页面上的导航栏保持一致。
我看到了这个：Bootstrap Navbar in multiple pages，但我很难使用 jQuery 加载它。
我也看到了这个：Do I have to duplicate the navbar code on every page with Bootstrap? 但我不想使用 php。
感谢您的宝贵时间。
【问题讨论】：
【参考方案1】：由于问题的标题吸引了对 Bootstrap nav-bar 感兴趣的人，这里是一个 nav-bar 的演示。假定 Bootstrap 和 jQuery。
我的重点是展示如何正确激活每个页面中必须不同的导航栏链接。
nav-bar.html
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">
<img src="icon.png">
<span class=px-2>My Site</span>
</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 ml-auto">
<li class="nav-item ">
<a class="nav-link" href="#">Home Page </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page2</a>
</li>
</ul>
</div>
</nav>
现在将以下代码放入应显示导航栏的每个页面的<head> 部分。
注意li:nth-child(2) 部分。该数字应根据其在导航栏中的位置在每个 html 源中进行调整。
<script type="text/javascript">
window.onload = function()
$.get("navbar.html", function(data)
$("#common-navbar").html(data);
$('.navbar-nav').find('li:nth-child(2)')
.addClass('active')
.find('a').append('<span class="sr-only">(current)</span>');
);
</script>
现在剩下的就是以div 开始每个页面，导航栏将被加载到其中：
<body>
<div id="common-navbar"></div>
【讨论】：
【参考方案2】：首先，恭喜您提出问题。
它解决了编程中的基本需求和最重要的原则之一：DRY，这是开发和实现大多数常见 Web 技术的主要原因，例如 php 或 CSS（可以进一步 DRY-由LESS 或SASS 编辑）。
php，例如，被发明并立即被广泛采用，主要是因为这个“非常酷的（当时）新功能”：你只需要所做的是将扩展名从 .html 更改为 .php 并且您可以使用以下方法包含其他部分：
<?php include "part.html"; ?>
通常称为模板/组件加载，这也是使用JavaScript 的常见任务。相当多的图书馆提供它。例如jQuery 提供$.load() 而AngularJS 使您可以使用directives 来包含templates，它可以定义为内联或外部HTML。事实上，所有包依赖管理器和所有框架都以某种形式提供它，因为如果没有可重用的组件，当今的 Web 是不可想象的。
如果您想找到更多选项，建议您开始搜索html、include、templates、loading 和components 的组合。
请注意，大多数 JavaScript 库都有开销。然而，最流行的通常提供一些灵活性，允许您有选择地只构建您想要的功能。
如果（以及何时）微软向万维网联盟提交的HTML Components 使用<component> 标签被采纳，包含模板很可能会成为核心HTML 的一部分。
目前，这可以使用 AngularJSs type:"E" 指令来实现。
【讨论】：
我很想知道投反对票的原因，以及投反对票的人究竟认为我的回答是错误的还是不完整的。我很乐意改进它。 我喜欢这个答案如何从根本上解决问题。我还会在这里列出一些静态站点生成器。但是我认为值得注意的是，与 PHP 和 SSG 相比，当前所有的 javascript 解决方案都需要额外的库和 HTTP 请求，从而带来开销。 -（不是反对票） 这似乎很明显，但 PHP 是一个服务器端功能，您必须启用它才能使这项技术发挥作用。安装和配置 PHP 很容易，说明可以在其他地方找到。 Javascript 在客户端（浏览器）上运行，它应该默认启用并且不需要服务器配置。对于 PHP 生产页面，请确保您的托管服务支持 PHP（其中许多支持）。【参考方案3】：为了在每个页面中包含您的navbar，您必须使用php 或javascript。否则，您只需在每个页面中复制粘贴 html 标记即可。试试这两个步骤--
HTML
<div class="container-fluid" id="footer">
</div>
JAVASCRIPT
<script type="text/javascript">
$(function()
$("#footer").load("footer.html");
);
</script>
注意：
确保您没有在 footer.html 文件中添加引导程序 CDN s。
编辑
正如 andrei 在评论中提到的，是的，知道我的回答需要jquery 是非常重要的。
要使用 jquery，您需要在 head 标签中使用以下 cdn，或者您可以下载 jquery 并从您自己的文件系统中提供它。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
【讨论】：
谢谢。我现在正在尝试这个。为了解决您关于复制和粘贴 html 标记的第二点，我确实将整个 index.html 代码复制并粘贴到其他页面中，但它们没有正确显示/与索引相同。 希望对您有所帮助！ @Abby：复制标记时不要复制整个标记。只需复制标题部分。也不要忘记包含必要的样式 css 表。但是 jquery 是更好的方法。 @neophyte：你的回答没有错。我相信我们周围潜伏着一个巨魔，因为我也被否决了。阻止我支持你的答案是你没有指定它使用 jQuery。很重要，没有jQuery就不行。 我正在尝试做同样的事情 - 尝试上面的建议不起作用。我在页脚上方的主 HTML 文件中有 javascript。它应该去别的地方吗？以上是关于使用引导程序在多个 html 页面上显示导航栏的主要内容，如果未能解决你的问题，请参考以下文章