使用 Bootstrap 4 导航栏组织 HTML 网站

Question

TLDR：使用导航栏时组织不同 HTML 站点/文件的标准/最佳实践是什么，导航栏应该在每个站点上可见？

背景：我第一次开始创建网站。它应该在 ESP 上运行，并且我使用 Bootstrap 4 得到了一些不错的结果。我定义了一个 Bootstrap 导航栏，就像在所有示例中一样（例如在 w3schools 上）。尽管这些示例仅使用无操作链接；它们没有显示这些链接如何通常与导航栏和不同的文件一起使用（这必须是一个一般原则，我不知道）。

导航栏当然应该在每个网站上可见，而其下方的内容应根据单击的链接而变化。当我只是在导航栏中使用指向不同 html 文件的链接而不包含导航栏时，它当然是不可见的。

不同的网站通常是如何与导航栏相关的？

我想过不同的可能性：

• 每个文件中都有一个导航栏（显然维护起来是一场噩梦）

• 将导航栏放在额外的文件中，并以某种方式将其包含在每个其他文件中

• 与导航栏一起管理主文件中的所有内容，包括其他内容文件

以我目前的知识，我还不够了解，所以我也不知道要搜索什么。如果网络上已经有关于此的良好信息，您能给我提供搜索词或链接吗？

Answer 1

如果您打算使用，HTML那么别无选择。您需要navigation bar向每个页面添加一个，正如您所提到的，这是一场噩梦。但是，如果您打算使用server-side programming类似的语言PHP，那么它们会提供一个名为 的关键字include。它的语法现在是 您可以在文件夹内include 'filename'添加file类似的内容，并且可以跨多个页面使用。但是如果你正在使用，那么他们有自己的，比如，，。它们由以下部分组成，因此，部分内容可以跨多个页面使用。header.phpincludeNodeJSExpressJStemplating-enginesejshandlebarspugpartials

Answer 2

我需要使用一些编程语言。一个问题是，我无法使用服务器端编程语言，因为 ESP 不支持它们。所以我需要转向客户端编程，即 JavaScript。我现在只提供主 HTML 文件，其中包含导航栏和以下部分，用于根据pageURL 中的参数加载正确的 HTML 文件：<div class="container-fluid" id="content" style="display:block;overflow:visible"><br>  <script>    $(function(){      var url = new URL(window.location.href);      var c = url.searchParams.get("page");      if(c != null){        $("#content").load(c+".html");      }    });  </script></div>这就像一个魅力，我现在知道如何组织我的 html 文件以通过导航栏显示。