将html源拆分为多个文件答案

【问题标题】：Split html source into multiple files将html源拆分为多个文件
【发布时间】：2017-03-27 06:03:02
【问题描述】：

HTML 是否支持将源代码拆分为多个文件？我正在寻找相当于 C++ 的#include；或者可能是 C# 的 partial;一个可以获取源路径并在该位置注入文件内容的元素。

如果之前有人问过这个问题，我们深表歉意。谷歌和 SO 搜索没有返回太多。我不是网络人，但我发现的唯一解决方案是使用iframe，许多人出于各种原因不喜欢它。

只是我的html源越来越大，我想通过拆分成多个文件来管理它。

【问题讨论】：

不确定这是否是您所要求的，但请查看此内容。 w3schools.com/howto/howto_html_include.asp
很遗憾，这不是 HTML 规范的一部分，但是有许多服务器端和客户端工具可以为您提供这种能力。
@marmeladze：看起来很有趣，尽管据我了解这是一个自定义解决方案。
@CarlJan：是的。考虑到网页可以/确实有多大，几乎有必要对包含进行语言级别的支持。在我看来，现在这门语言已经 30 多年了，这似乎是一个很大的遗漏。
是的，它是一种自定义解决方案，可能并不适用于所有场合，但那是 html - 一种标记语言，而不是一种完全成熟的编程语言。

标签： html

【解决方案1】：

你不能，至少在纯 HTML 中不能。您可以做的是使用 Javascript 加载和放置 sn-ps。 iframes 也是不理想的，因为与 #include 和 partial 等指令的情况相反，这些 sn-ps 永远不会在一个页面中编译。

但是，我认为了解您的网页的服务方式很重要。这是一个静态网站吗？因为在这种情况下，我会用您选择的语言编写一个简单的脚本来编译页面。假设您有这样的基础：

<html>
    <head>
        <!-- ... -->
    </head>

    <body>
        {{ parts/navigation.html }}
        <!-- ... -->
    </body>
</html>

您可以编写一个脚本逐行运行该文件并将内容加载到一个名为compiled_html 的变量中。当它找到{{ file }} 时，它会打开file，读取其内容并将其附加到compiled_html。当它结束时，它将变量的内容写入 HTML 文件。你将如何实现它取决于你所知道的语言。我确信在 C# 中执行此操作非常简单。

通过这种方式，您可以将 HTML 页面的源代码拆分为多个文件（并在需要时重复使用某些部分），但最终仍会得到功能齐全的单个文件。

【讨论】：

这个，就像朱利安的回答需要代码并且在仅 HTML 的情况下不起作用。
它们是解决同一问题的两种截然不同的方法。由于您要求将静态 HTML 页面拆分为多个文件，我想您不需要动态更改页面。使用 PHP 或其他服务器端语言仅包含一些文件将是一种过度杀伤力，因为每次请求页面时都会调用 PHP 解释器。如果您需要即时修改页面，有更好的方法。但是，我建议的不是服务器端解决方案。您将编译一次文件，上传您的静态文件，然后过上幸福的生活。
啊，我刚刚重新阅读了您的答案。我不认为这是一个可行的解决方案。在静态 HTML 情况下，尤其是在设计期间，没有人愿意在每次编辑后通过自定义实用程序传递这些文件，只是为了看看它的外观。它不仅乏味，而且会扼杀任何 HTML 设计器的设计时支持。如果这真的是最后的选择，@marmeladze 使用w3-data 的建议更易于管理。

【解决方案2】：

如果您正在运行 PHP，这很容易实现：

PHP 语言内置了“include”命令。因此，您可以拥有“index.php”（注意您必须更改后缀，以便 PHP 解析器启动）并简单地使用以下语法。

<html>
  <head>
    [...] (header content you want to set or use)
  </head>
  <body>
    <?php
      include "relative/path/to/your/firstfile.html";
      include "relative/path/to/your/secondfile.html";
      include "relative/path/to/your/evenwithothersuffix/thirdfile.php";
      include "relative/path/to/your/fourth/file/in/another/folder.html";
    ?>
    [...] (other source code you whish to use in the HTML body part)
  </body>
</html>

基本上让你的主 index.php 文件成为一个容器文件，包含的 html 文件是你喜欢单独维护的组件。

为了进一步阅读，我推荐PHP Manual 和W3Schools Include 页面。

【讨论】：

谢谢。这在我目前的情况下可以很好地工作，但不适用于纯 HTML 环境。如果我们没有得到更好的结果，我会将此标记为答案。
给出-1，因为问题是专门询问香草HTML

【解决方案3】：

静态 html 不可能。

一般来说，这个问题（内容的延迟获取）是通过模板处理器解决的。

两个选项：

模板处理器运行在服务器端
- 任何语言
- 静态网站生成器，服务器端渲染
模板处理器在客户端运行
- javascript
- 网络框架

【讨论】：

嗯，在这一点上，使用include() 函数完全依靠 PHP 来完成它要容易得多； 一行编程/代码。作为“最佳”答案，从 2017 年开始，已经解释过；尽管没有一个答案能正确解决问题（它要求采用 HTML 方式）。