如何避免多個html文件中的重複信息？

我正在製作一個網站，併爲我的所有網頁設置了一個模板，但是我的網頁中有2/10是同一件事的不同版本。一個是一個圖片庫，當你點擊一個彈出圖片並將所有圖片信息成像出來。第二個是彈出完全相同信息的完全相同圖像的列表視圖。如何避免多個html文件中的重複信息？

彈出的信息是「隱藏」的，直到您點擊鏈接，並使用div完成。這使得代碼很長，當我在一個頁面上對信息進行更改時，我必須在另一頁上進行更改。我不想將這些信息添加到模板中，因爲那樣我會使所有頁面變得非常長。

有什麼方法可以把信息放到一個單獨的html文件中，然後讓List和Gallery html文件訪問單獨的html文件？或者有沒有其他方法可以減少重複性？

這是畫廊的HTML文件的例子：

<ol id="selectable"> 
    <a href="#" data-reveal-id="1"> 
     <li class="ui-state-list"><b>CT8002</b> 
      <img src="IMG"> 
     </li> 
    </a> 
</ol>

這兩個頁面訪問的信息：

<div id="1" class="reveal-modal"> 
    <h1>CT8002</h1> 
    <p>Product information goes here.</p> 
    <a class="close-reveal-modal">&#215;</a> 
</div>

CSS：

#selectable { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    width: 900px; 
} 

.reveal-modal { 
    visibility: hidden; 
    top: 100px; 
    left: 50%; 
    margin-left: -300px; 
    width: 600px; 
    background: #EEE url(modal-gloss.png) no-repeat -200px -80px; 
    position: absolute; 
    z-index: 101; 
    padding: 30px 40px 34px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 
    -moz-box-shadow: 0 0 10px rgba(0,0,0,.4); 
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,.4); 
    -box-shadow: 0 0 10px rgba(0,0,0,.4); 
}

來源

2013-12-18 Michelle Flandin

您是否在使用任何服務器端技術？或者這只是靜態的HTML？大多數Web應用程序框架都提供了使用靜態HTML來包含不同文件中的HTML位的功能，我不認爲這是可能的。看看[這個問題]（http://stackoverflow.com/questions/3928331/equivalent-of-include-in-html） – Slicedpan

使用靜態html，它可能與ajax，但它更容易做一個服務器邊語言。 –

使用php includes或equiv爲您的服務器。 – Christina

您是否使用框架任何形式的？如果你不是那麼你可以探索切換到PHP，然後使用include所有類似的部分。

所以，你的代碼可能是這樣的：

<ol id="selectable"> 
    <a href="#" data-reveal-id="1"> 
     <li class="ui-state-list"><b>CT8002</b> 
      <img src="IMG"> 
      </li> 
     </a> 
</ol> 
<? include 'gallery.php' ?>

將產生（假設gallery.php有您發佈的代碼的第二部分）：

<ol id="selectable"> 
    <a href="#" data-reveal-id="1"> 
     <li class="ui-state-list"><b>CT8002</b> 
     <img src="IMG"> 
     </li> 
    </a> 
</ol> 

<div id="1" class="reveal-modal"> 
    <h1>CT8002</h1> 
    <p>Product information goes here.</p> 
    <a class="close-reveal-modal">&#215;</a> 
</div>

這是一個有點快的和骯髒的做法，但這將是小型網站的最佳解決方案。

如果您的網站超過10或15個網頁，您應該開始尋找某種框架來幫助解決您可能遇到的此類問題以及其他問題。

沒有重新發明輪子的意思！

來源

2013-12-18 23:32:54

如何避免多個html文件中的重複信息？

回答

相關問題