在多个页面中重复相同的 HTML 代码答案

【问题标题】：Repeat same HTML code in several pages在多个页面中重复相同的 HTML 代码
【发布时间】：2012-06-29 18:16:33
【问题描述】：

我很难找到这个，因为我不知道怎么称呼它。

我将尝试描述我想要的过程，看看你们中是否有人知道这样的编辑器。我有一个网站，其中重复了相同的 html 组件，例如菜单。我可以用 css 定义菜单的外观，但我不能（据我所知）用简单的一行将同一段 html 添加到每个 html 页面。我所做的是将菜单复制到每个地方。如果我改变菜单，我需要再做一遍。我知道这可以通过使用动态服务器来实现，例如 php 或 jsp，但我不需要它是动态的。

我想知道是否有办法做到这一点。我想可能有一个编辑器，我可以在其中使用包含编辑 html，然后在修改后“编译”html，以生成我将在我的服务器上替换的 html。

谢谢

【问题讨论】：

你可以使用jQuery的.load()函数来实现。但我猜你不是在寻找基于 jQuery 的解决方案。
这就是 PHP 的用途。内容是否是动态的并不重要。只需编写一次菜单，然后在需要时将其包含在 PHP 中。
我觉得你在看模板，我觉得dreamweaver有这种功能？
@JezenThomas ：我完全同意你的看法，这可能是最简单的解决方案
如果您不想使用 PHP，那么我认为 Clyde 使用 jQuery 加载菜单的想法是个好主意。虽然它会引入必须加载 jQuery 的开销。

标签： html static editor repeat

【解决方案1】：

看看server side includes ...创建一个menu.shtml页面，然后像这样包含它：

<!--#include virtual="/menu.shtml" -->

大多数开箱即用的 Web 服务器都支持它（包括 IIS、Apache 和 lighttpd）

【讨论】：

【解决方案2】：

你听说过MasterPage Concept

以下链接将为您提供快速入门

母版页是作为所有其他页面的框架的页面。你只需要写一个。并且在此之下的每个页面都必须包含母版页。就是这样！

【讨论】：

【解决方案3】：

你可以用jquery做到这一点

假设你有 page1.html page2.html 等

您希望在每个页面中都有您的联系信息。您可以创建一个名为“info.txt”的文件。在您想要此联系信息的地方，放置一个 div。如本例所示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <!-- page content -->
    <div id="contact"></div>
  </body>
</html>




<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<script>
$(document).ready(function(){
        $("#contact").load("info.txt");
    ;
});
</script>

无论您在“info.txt”中放置什么内容，都将放在原处

【讨论】：

【解决方案4】：

你可以在一个外部文件中写一段简单的js，然后在每个页面调用它来动态加载菜单。然后，您可以通过编辑 JS 文件来简单地编辑菜单。然后你需要做的就是在 html 中包含并使用 document.getElementById("menu").innerHTML = menuHTML;其中 menuHTML 是一个包含菜单的纯 HTML 代码的变量。然后你可以包含 JS 文件并在 body onload 中调用它

【讨论】：