動態模板

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>