使用 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 文件以通过导航栏显示。