如何使用 jquery/ javascript 在 html 模板中分隔页眉页脚和侧边栏
how to separate header footer and sidebar in a html template with jquery/ javascript
我有一个包含页眉、页脚和边栏的模板;我想将它们分成单独的文件并将它们包含在主模板中。以前我使用 PHP,通过 include()
或 required()
函数很容易做到这一点,但由于我使用 node.js 而不是 PHP 我不知道该怎么做。
我猜想做类似
的事情
<% include ../partials/head %>
在您看来应该可以正常工作。您还可以查看 here 了解更多信息
<script>
$(document).ready(function (e) {
$( "#header" ).load( "header.html" );
$( "#sidebar" ).load( "sidebar.html" );
$( "#footer" ).load( "footer.html" );
});
</script>
您可以使用 jquery。
您可以使用 W3schools 库轻松实现此目的。
将此脚本添加到您的 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>
我有一个包含页眉、页脚和边栏的模板;我想将它们分成单独的文件并将它们包含在主模板中。以前我使用 PHP,通过 include()
或 required()
函数很容易做到这一点,但由于我使用 node.js 而不是 PHP 我不知道该怎么做。
我猜想做类似
的事情<% include ../partials/head %>
在您看来应该可以正常工作。您还可以查看 here 了解更多信息
<script>
$(document).ready(function (e) {
$( "#header" ).load( "header.html" );
$( "#sidebar" ).load( "sidebar.html" );
$( "#footer" ).load( "footer.html" );
});
</script>
您可以使用 jquery。
您可以使用 W3schools 库轻松实现此目的。
将此脚本添加到您的 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>