动态模板

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>