具有共同標題和導航條的多個網頁

我正在製作一個小型的個人學術網站，該網站具有多個網頁，並且具有相同的結構。具有共同標題和導航條的多個網頁

問題：有沒有辦法不重複每個html文件中的標題和菜單（或導航欄）的代碼？如果我可以將標題和菜單的代碼放在另一個文件中，例如header.html並編寫一個語句，如\input{header.html}（使用TeX語法）將文件包含到index.html和publications.html中。

下面是一個網站的例子。

的index.html內容：的publications.html

<!DOCTYPE html> 

<html> 
    <head> 
     <title>The Title</title> 
     <link type="text/css" rel="stylesheet" href="stylesheet.css"> 
    </head> 
    <body> 
     <div id="header"> 
      <h1>My Name</h1> 
     </div> 

     <div id="menu"> 
      <p> 
       <a href="index.html">Home</a> 
       &nbsp&nbsp 
       <a href="publications.html">Publications</a> 
       &nbsp&nbsp 
       <a href="contact.html">Contact</a> 
      </p> 
     </div> 

     <div id="content"> 
      <p> 
       This is my academic webpage. 
      </p> 
      <p> 
       I am a 15th year PhD student in Filmmaking at Mickey's Institute of Technology (MIT). 
      </p> 
     </div> 
    </body> 
</html>

內容：中stylesheet.css

<!DOCTYPE html> 

<html> 
    <head> 
     <title>The Title</title> 
     <link type="text/css" rel="stylesheet" href="stylesheet.css"> 
    </head> 
    <body> 
     <div id="header"> 
      <h1>My Name</h1> 
     </div> 

     <div id="menu"> 
      <p> 
       <a href="index.html">Home</a> 
       &nbsp&nbsp 
       <a href="publications.html">Publications</a> 
       &nbsp&nbsp 
       <a href="contact.html">Contact</a> 
      </p> 
     </div> 

     <div id="content"> 
      <ol> 
       <li>Snow White and the Seven Dwarfs, 1937</li> 
       <li>Pinocchio, 1940</li> 
       <li>The Reluctant Dragon, 1941</li> 
      </ol> 
     </div> 
    </body> 
</html>

內容：

body {font-size: 16px; line-height: 20px; font-weight: light; color: #250517; /*gray*/} 
    a:link {text-decoration: none; color: #003399; /*blue*/} 
    a:visited {text-decoration: none; color: #003399; /*blue*/} 
    a:active {text-decoration: none; color: #003399; /*blue*/} 
    a:hover {text-decoration: none; color: #003399; /*blue*/} 

    #header { 
     width:800px; 
     margin-left:auto; 
     margin-right:auto; 
     text-align:center; 
     margin-top:50px; 
    } 

    #content { 
     width:730px; 
     margin-left:auto; 
     margin-right:auto; 
     height:410px; 
    } 

    #menu { 
     width:800px; 
     margin-left:auto; 
     margin-right:auto; 
     text-align:center; 
     margin-bottom:50px; 
     clear:both; 
    }

來源

2013-11-26 I Like to Code

如果提供給您一個服務器端語言，如PHP，你可以使用包括。 – j08691

你甚至可以使用SSI，如果它支持:)。 – kapa

如果你沒有/不能使用服務器端代碼，那麼使用框架是你最好的選擇。不過，框架已棄用，我的意思是'iframe'來加載您的內容。休息靜態標題/菜單仍然在主頁面上。 – Abhitalks

僅僅使用HTML和/或CSS，不，你不能這樣做這一點，因爲這個要求超出了他們的規格（rea d'目的'）。

有仍然存在兩種方法：

如果您使用的是服務器端語言（如PHP），您可以利用脫庫語法包括the case of PHP從其他文件內聯（include()）的內容，或Server Side Includes
您可以使用JavaScript或jQuery等庫來獲取其他頁面的輸出（內容），並將它們注入到指定位置的頁面中。這可以一樣容易使用jQuery的load()方法as seen here

來源

2013-11-26 14:58:50 SW4

我正面臨着同樣的事情要做。然後，我創建了一個新文件來存儲導航欄的html。

我創建了一個文件navbar.html，它具有我所有的導航條碼。然後，在您想要導航欄的主要html文件中，只需使用jquery包含此文件即可。

$(document).ready(function() { 
    $('#navigation').load('navbar.html'); 
});

然後在想要導航欄中的地方，只是加入這一行：

<div id="navigation"></div>

來源

2014-08-25 04:28:53

-1

由@Abhinav提供的解決方案只是部分正確。它不會成功加載chrome，因爲navbar.html的類型是file：//，而不是http：//，因爲jQuery加載函數需要。請嘗試以下操作：

$(document).ready(function() { 
    $('.navigation').load('navbar.html'); 
});

在具有類似格法的基本HTML文件

和參考如前所示：

<div class="navigation"></div>

來源

2015-11-20 04:35:43

具有共同標題和導航條的多個網頁

回答

相關問題