Bootstrap 导航栏可用于我的所有 html 页面

Question

我正在构建一些前端 html、css 和 js 来显示通过 websockets 传递的信息。 在这个阶段，我目前正在手动输入所有 html 页面，并通过单击按钮将这些页面一起引用。 但是，在互联网上进行了一些阅读后，我相信有更好的方法可以做到这一点。 具体来说，我希望引导程序的导航栏元素在我的所有页面中共享。 但是，目前，我必须手动将代码输入到导航栏的每个 10+ html 页面中。 必须有一种更好的方法来做到这一点，它更具可扩展性和可扩展性。

您可能会说，“是的，我知道如何解决它，使用 node.js 后端并响应前端”。 然而，唯一的问题是我正在处理的项目需要一个可以在没有 CDN 的情况下工作的解决方案。 此外，它必须尽可能轻巧。

是否有一些更简单的方法/库可以在我缺少的 js 中执行此操作？ 我对 Web 开发很陌生，但我确实有嵌入式系统的经验。

Answer 1

如果您尝试在不同的页面上添加相同的内容，您需要创建一个具有相同 id 的元素，使用您想要重复的内容创建一个外部 .js 文件，并从页面底部调用它。

一般示例：

<div id="demo"></div> <!-- this where the content would be. Create this div on different pages and embed the script inorder to get content. -->
<script src="demo.js"></script>

demo.js file: 
<script>
var nav = // the content - example of bootstrap's nav
'<nav class="navbar navbar-expand-lg navbar-light bg-light">'+
'  <a class="navbar-brand" href="#">Navbar</a>'+
'  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">' +
'    <span class="navbar-toggler-icon"></span>' +
'  </button>' +
'  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">'+
'    <div class="navbar-nav">'+
'      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>' +
'      <a class="nav-item nav-link" href="#">Features</a>' +
'      <a class="nav-item nav-link" href="#">Pricing</a>' +
'      <a class="nav-item nav-link disabled" href="#">Disabled</a>' +
'    </div>' +
'  </div>' +
'</nav>';

var demo = document.getElementById('demo'); // target element.
demo.insertAdjacentHTML('beforeend', nav); // add content.
</script>

阅读本文了解更多可能性，希望有所帮助。

Answer 2

如果您在 Visual Studio 上进行开发，请尝试制作母版页，该母版页将充当您所有页面的父页面。

如果没有，则使用 Bootstrap 4 类，这使得创建导航栏变得非常容易

注意：下载 bootstrap 4 离线文件而不是通过 CDN 添加它以使其加载更快