動態模板

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>