javascript - 动态模板

Question

我不知道该怎么调用它，动态模板可能不是正确的术语，但这是我想知道我是否可以做到的:

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

例如，假设我有一堆网页，它们仅在页面上显示此内容:

title: Guardians of the Galaxy

first impressions: awesome

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

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

我做了一些搜索，他们似乎都推荐 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>