Question

我有3个静态HTML文件，它们具有完全相同的标题。如果我需要编辑标题，我怎么能避免对所有3个文件做同样的事情？我想要另一个文件（部分，如在Rails中）粘贴我的标题代码并将其包含在这3个文件中。这样，每当我想编辑标题时，我只需编辑标题部分文件。

我知道这可以使用Handlebars（使用{{include filename}}或smth）完成，但是有没有为此设计的其他框架/库？把手需要配置并且更加强大。我想要一些不太复杂的东西 - 我只需要这部分东西。我不介意框架是否需要Node.js。

非常感谢！

Answer 1

您可以使用自定义HTML元素，聚合物和X标签是专注于此的框架。这样你就可以完全封装标题的代码，样式和标记，然后将其导入主文件，它基本上就像一个包含。

<head>
  <script src="platform.js"></script>
  <link rel="import" href="my-custom-header.html">
</head>
<body>
   <my-custom-header> Title </my-custom-header>
   <div> Content </div>
</body>

Polymer

X-Tags

Answer 2

<强> HTML Imports at html5rocks

完整的文章HTML Imports。

<head>
  <link rel="import" href="/path/to/imports/stuff.html">
</head>

类似问题

<强> Include another HTML file in a HTML file

Answer 3

最简单的方法是使用一个简单的<div>或<p>元素，其ID为

<div id="header"></div>

和一个外部js文件，除了在页面加载完成后包含标题之外什么都不做：

window.onload = function(){
    document.getElementById("header").innerHTML = "Lorem ipsum dolor sit amet, consetetur   sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.";
};

然后你只需要将js文件导入到你的网页中，如果你更改了js文件，你所有的网站都会得到新的标题

如何避免在多个HTML文件中编写重复代码（使用部分/部分/模板等）

3 个答案: