如何使用 Node js、ExpressJS、hbs 或 ejs 在 html 页面中为多页网站添加通用页眉和页脚答案

【问题标题】：How add common header and footer in html page for multi page website using Node js, ExpressJS,hbs or ejs如何使用 Node js、ExpressJS、hbs 或 ejs 在 html 页面中为多页网站添加通用页眉和页脚
【发布时间】：2019-05-09 09:22:13
【问题描述】：

我想创建通用 header(navbar) 和 footer 页面以包含在网站的多页/多个页面中。使用 nodejs 和 expressjs 创建动态网站

将导航栏和页脚的代码放在共同的 header.html 和 footer.html 中，并在其他 html 页面中调用或包含这个共同的页眉/导航栏和页脚 html 页面。

如何使用 hbs 或 ejs 等模板引擎使用 Nodejs 和 expressJs 创建网站

我知道它可以使用 php 或 jquery 来完成。

<html>
<head>
<title>document</title>

</head>
<body>
<div id="header">navbar</div>

<!--Remaining section-->

<div id="footer">footer</div>
</body>
</html>

但不使用以下方式：

W3school w3-include

<div w3-include-html="content.html"></div>

PHP

<?php include 'header.php' ?>
    ''Page content''
    <?php include 'footer.php' ?>

【问题讨论】：

您可以使用 jspf 将其包含在页面中，但我猜您不想使用该权限。
您仍然可以使用框架/iframe。这就是在动态后端语言之前在纯 html 中完成的方式。现在常用的做法是在服务器上编写页面
@Adassko 感谢您的回答和建议，但希望使用纯 javascript /ES6 以现代方式编写。没有服务器

标签： javascript html node.js express

【解决方案1】：

你可以保留你的html文件，比如

header.html 仅包含标题代码
footer.html 仅包含页脚代码
content.html 包含类似：

这里的标题

页面内容
在您的.htaccess 文件中

AddType application/x-httpd-php5 .html .htm

所以它会将所有的html文件解析为PHP文件，并包含并执行所有的php代码。

如果通过 js/jquery 加载。

你的 html 应该是

<header></header>
<div class="middle">page content here</div>
<footer></footer>

<script>
$(document).ready(function(){
    $('header').load("header.html");
    $('footer').load("footer.html");


});
</script>

【讨论】：

非常感谢您！想使用 HTML 或纯 javascript 或仅使用 Node js @Naveed Ramzan
@Sid 我也更新了 JQuery 的代码。如果可行，请查看并投票。

【解决方案2】：

您已经提供了所有（直截了当的）解决方案。您可以使用：

服务器端的 PHP、ASP.NET、JSP 等功能，或
客户端 JavaScript 中的 AJAX / XHR / Fetch API 功能。

据我所知，仅使用 HTML 和 JavaScript 就无法在纯粹的客户端（浏览器内部）使用诸如“母版页”或“模板页”之类的东西。 :-(

曾经有一些功能叫做HTML imports（作为HTML Web 组件的一部分），但它已经被废弃了一段时间。

如果有一种方法可以做你想做的事，我也会很高兴了解它。 :-)

【讨论】：

谢谢...回答可以使用带有 es6 或最新版本 ES 的 Node js 来完成

这里的标题