HTML 模板答案 - 爱码网

【问题标题】：HTML templatingHTML 模板
【发布时间】：2013-11-11 08:33:53
【问题描述】：

我想知道是否可以设置某种 HTML 模板系统，基本上我有 3 个不同的文件： - header.html - 页脚.html -landing.html（landing.html 是包含页面的主要模板）

本质上我只希望人们编辑landing.html，当他们打开这个文件时，应该将header.html和footer.html插入到这个文件中。

所以 header.html 将是：

<!DOCTYPE>
<html>
    <head></head>
<body>

footer.html 将是

</body>
</html>

andlanding.html 将包含所有显示页面的 html，但所有这些都应该在没有任何形式的预处理或生成器的情况下完成，可以使用 javascript 完成，但我希望人们只打开landing.html并在其中插入页眉和页脚。

这样的事情有可能吗？

【问题讨论】：

你可以使用 php 并使用 include() 函数
@theDazzler 我考虑过，但是将打开landing.html 的人不会运行本地服务器。

标签： html templates

【解决方案1】：

你可以使用小 jQuery，

在 landing.html 中：

$(document).ready(function(e) {

var header;
    $.get('header.html', function(data){
    header= data;
    $("body").prepend(header);
});
var footer;
    $.get('footer.html', function(data){
    footer= data;
    $("body").append(footer);
});

});

使用上述代码，您可以请求位于同一根目录中的 header.html 和 footer.html 页面。但我认为这不是一种正确的模板方式。

【讨论】：

问题是一旦你打开landing.html，浏览器会自动创建和标签，在header.html中