如何在单独的 HTML 页面上制作单个页眉和页脚，然后在每个后续页面上显示？答案

【问题标题】：How do you make a single header and footer on separate HTML pages that then are displayed on each subsequent page?如何在单独的 HTML 页面上制作单个页眉和页脚，然后在每个后续页面上显示？
【发布时间】：2022-10-28 00:46:56
【问题描述】：

在一个初级水平我正在尝试制作一个在所有页面上都有页眉和页脚的前端页面。每个页面可以有相同的页眉和页脚。在页眉中，我想添加一个 Bootstrap 导航栏（或类似的），在页脚中添加类似的东西。但是，我不想只是将页眉和页脚复制到每个页面，而是将其作为一个单独的东西，并在加载时将其插入每个页面。这样，如果我更新页眉或页脚，它会在所有页面上更新。

过去，我用 Python 完成了这项工作，但我只在这个项目中使用前端，而且我只打算在 GitHub 上发布（主要是出于我自己的目的）。

如果这样做更容易，我将使用 Visual Studio Code 作为我的编辑器。

我也会有 CSS 和 JS 文件夹（如果这有什么不同的话）。

**更新编辑：

我试图这样做，但我在这里遗漏了一些东西。

这就是我尝试的（在快速谷歌搜索之后，我知道我在追求什么）：

<!--JQuery CDN-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <!--Include Content-->
    <script>
        $(function () {
        var includes = $('[data-include]')
        $.each(includes, function () {
        var file = 'views/' + $(this).data('include') + '.html'
        $(this).load(file)
        })
        })
    </script>
</head>

<body>
    <header>
        <div data-include="header"></div>
    </header>

自从我这样做以来已经有一段时间了，所以我很生疏，但这似乎由于某种奇怪的原因而不起作用。

【问题讨论】：

请不要在您的问题中添加“已解决”。使用下面的答案空间来展示和解释解决方案。

标签： html twitter-bootstrap header navbar footer

【解决方案1】：

有几种方法可以遵循它，在初学者级别，您可以有一个内容是动态的方案，即页眉和页脚部分填充变量或代码插入，在高级级别有模板引擎，如果你想开始，用php配置很容易

【讨论】：

嘿，谢谢你。我如何在没有 PHP 的情况下执行该方案？但我想我也可以学习 PHP，我相信有一些易于学习的视频。

【解决方案2】：

我用的是W3方法：https://www.w3schools.com/HOWTO/howto_html_include.asp

到目前为止，它不能同时使用页眉和页脚，只有页眉在工作。我不确定为什么。将是下一个问题解决。

【讨论】：