动态模板

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。

常见。JS

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

现在所有剩下的就是包括我们希望有common.html内容的所有文件，这个脚本（添加到这个的index.html，about.html）

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