如何使用 jquery/javascript 在 html 模板中分隔页眉页脚和侧边栏答案

【问题标题】：how to separate header footer and sidebar in a html template with jquery/ javascript如何使用 jquery/javascript 在 html 模板中分隔页眉页脚和侧边栏
【发布时间】：2018-02-04 00:37:19
【问题描述】：

我有一个包含页眉、页脚和侧边栏的模板；我想将它们分成单独的文件并将它们包含在主模板中。以前我使用的是 PHP，通过 include() 或 required() 函数很容易做到这一点，但是由于我使用的是 node.js 而不是 PHP，所以我不知道该怎么做。

【问题讨论】：

标签： javascript jquery html node.js html-templates

【解决方案1】：

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

});
</script>

您可以使用 jquery。

【讨论】：

【解决方案2】：

我猜是在做类似的事情

<% include ../partials/head %>

在您看来应该可以正常工作。您也可以查看here 了解更多信息

【讨论】：

【解决方案3】：

您可以使用 W3schools 库轻松实现这一目标。

More info here

在您的 HTML 中添加此脚本

<script src="https://www.w3schools.com/lib/w3.js"></script>

调用 w3.includeHTML() 以包含 HTML：

<script>
w3.includeHTML();
</script>

完整示例

<!DOCTYPE html>
<html>
<script src="https://www.w3schools.com/lib/w3.js"></script>

<body>

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

<script>
w3.includeHTML();
</script>

</body>
</html>

【讨论】：