将html源分割成多个文件

dot*_*NET 5 html html5

HTML是否支持将源拆分成多个文件?我正在寻找一些等效的C ++ #include; 或类似C#的东西partial;一个可以采用源路径并将文件内容注入该位置的元素。

抱歉,是否曾经有人问过。Google和SO搜索返回的并不多。我不是网络专家,但是我发现的唯一解决方案是使用iframe,许多人出于各种原因不喜欢它。

仅仅是我的html源变得越来越大,我想通过分割成多个文件来对其进行管理。

小智 6

你不能,至少在平面 HTML 中不能。您可以做的是使用 Javascript 加载和放置片段。 s 也是不理想的,因为与和 等iframe指令发生的情况相反,这些片段永远不会编译在一个页面中。#includepartial

但是,我认为了解如何提供您的页面非常重要。这是静态网站吗?因为在这种情况下,我会用您选择的语言编写一个简单的脚本来编译页面。假设您有这样的基础:

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

    <body>
        {{ parts/navigation.html }}
        <!-- ... -->
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

您可以编写一个脚本,逐行运行该文件并将内容加载到名为 的变量中,例如compiled_html. 当它找到{{ file }}它时,它会打开file,读取其内容并将其附加到compiled_html. 当它到达末尾时,它将变量的内容写入 HTML 文件。如何实现它取决于您所了解的语言。我确信用 C# 来做这件事是非常简单的。

这样,您就可以将 HTML 页面的源代码拆分为多个文件(如果需要,可以重用某些部分),但最终您仍然会得到功能齐全的单个文件。


小智 3

如果您运行 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>
Run Code Online (Sandbox Code Playgroud)

基本上让你的主index.php文件成为一个容器文件,并且包含的​​html文件成为你想要单独维护的组件。

如需进一步阅读,我推荐PHP 手册W3Schools 包含页面。