动态模板

Question

我不知道该怎么称呼它，动态模板可能不是正确的术语，但我想知道我是否可以这样做：

• 有一个被许多页面使用的模板
• 如果我更改该模板，网页将自动更新

例如，假设我有一堆网页，这些网页只是在一个页面上显示：

标题：银河护卫队

第一印象：很棒

现在我想将使用此模板的每个网页的第一印象更改为“第一想法”，因此我转到源模板并在那里进行更改，并且从该模板生成的每个网页都会更新。我还希望它能够添加部分（例如日期或其他内容）。

模板基本上只是布置页面、显示等，在实际页面中，他们只需加载此模板，然后将数据添加到每个部分。现在很明显，如果我添加一个新部分，那么每个缺少它的页面都必须单独编辑。

我做了一些搜索，他们似乎都推荐 php 或类似的。我想我可以弄清楚如何用 php 来做，但是有没有 javascript/html 唯一的解决方案？

Answer 1

已经提到了许多库，但有时，您不需要整个页面都适合它们。有时，如果所有页面之间共享一个或两个元素（例如导航栏），您可以创建一个可以加载到每个页面中的通用 Javascript 或 HTML 文件。

让我们用你的例子：

index.html

<title> I'm an Index Page </title>
...
<h1> This is my own unique content </h1>
<div id="container>
</div>
...

about.html

<title> I'm an About Page </title>
...
<h1> This is different content </h1>
<div id="container>
</div>
...

common.html

<h1> Guardians of the Galaxy </h1>
<p> first impressions: awesome </p>

因此，虽然这些文件中的每一个可能存在细微差别，但您知道您希望将 common.html 放入这两个文件中。为了实现这一点，我们添加了<div id="container"></div>，或其他一些等效的包装器。现在我们可以使用 Javascript 将 common.html 加载到每个 container 中。有一种简单的方法可以做到这一点Javascript，但我强烈推荐JQuery。

common.js

$(function() {
    $( "#container" ).load( "common.html" );
});

现在剩下的就是将此脚本包含在我们想要包含 common.html 内容的所有文件中（将其添加到 index.html、 about.html)

<script type="text/javascript" src="common.js"></script>