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>

动态模板

1 个答案: