您可以一起“编译”html 文件来模拟“包含”功能吗？

Question

我喜欢 SASS，因为您可以创建 mixins 并通过包含在导出/保存时编译的各种 SASS 文件（取决于您的应用程序）来重用您的代码。 PHP 可以做一些相同的事情，但我从未见过一个 HTML 页面被分解成各种 HTML 文件并在导出/保存时编译成一个整体。

我不会编写 PHP，我不希望这种开销只是为了让事情变得更容易，并且不得不调整一个文件（即“navigation.html”）而不是更改网站上每个页面中的代码。

因此，我要问以下两个之一：

1. 一种编译器，例如 Codekit，可以将部分 HTML 文件合并在一起
2. 一个 HTML/Javascript/jQuery/Ajax（

必须调整一个超过 50 页的内容可能会很痛苦，但在每个页面上使用相同的代码也可以提供一定的一致性并提供保证。这就是为什么我希望我的请求能够得到解决。

Answer 1

您的第二个选项是我使用的，您创建通用“组件”，并根据您插入它的父组件的 ID 等内容，它会以不同的方式运行或从 JS 或 jQuery 加载不同的“函数库” " 例如，如果菜单组件的父 div 是 'mainMenu'，它将调用显示主要选项的情况。当菜单组件父 ID 为“加载”时，它会显示加载按钮并在其上添加代码以加载文件...

第 1 页

 <div id='mainMenu'></div>

然后是第 2 页

 <div id='load'></div>

然后是 jQuery

$(document).ready(function(){
    component = "<ul id='menu'><li></li></ul>";
    $(body).find("div").each(function(){
        switch($(this).attr("id") {
            case "mainMenu":
                code to add functionality to component;
                break;
            case "load":
                code to add functionality to component;
                break;
            default:
                code to manage error;
        }
    });
}):

这只是我认为你可以做的一个例子。

Answer 2

你可以从w3.js使用w3-include-html

例子：

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

HTML Include