將可重複使用的導航菜單添加到HTML頁面

-1

當前，我的網站使用靜態手寫HTML頁面。我手動將導航菜單添加到所有頁面。我希望能夠維護包含菜單的HTML代碼的單個用戶資源文件，並從網站上的所有其他HTML文件引用此文件。我知道我們可以使用服務器端包括和客戶端包括做到這一點。但在閱讀了每種方法的優缺點之後，我很困惑應該使用哪種方法來處理我的情況。將可重複使用的導航菜單添加到HTML頁面

P.S.我的服務器不是PHP服務器。

謝謝！

來源

2013-03-21 Ruchita

1. PHP是不是服務器。無論你的服務器運行的是PHP腳本還是沒有。 – ITroubs 2013-03-21 21:56:00

只有您可以決定哪種解決方案最適合您的情況。如果您已閱讀了不同的選項，則可以獲得所需的所有信息。 – 2013-03-21 21:58:43

您可以使用CMS。有很多事情可以用ASP.NET，JAVA，PHP，RUBY，GRAILS等來構建......或者你甚至可以用JavaScript/jQuery來完成。這個問題有點含糊。 – 2013-03-21 22:00:07

最後，您希望網站加載速度更快且易於維護。如果您使用客戶端JavaScript來執行AJAX以獲取模塊/小部件，那麼您將添加更多的http請求，並且該網站的速度會明顯變慢。使用服務器來組裝頁面的工作，但是然後你失去了JavaScript動畫和AJAX的優勢。服務器和客戶端的混合可能會造成混淆，但可能是最佳的。如果你的服務器是Node.JS，你將擁有巨大的優勢，因爲服務器上的相同功能可以配置爲爲客戶端工作。

例如，你可以使用服務器之類的組裝的導航欄作爲索引文件的一部分，以及使用該客戶端的用戶通過AJAX登錄後加載之類的東西將更新導航欄。可以在Node和瀏覽器上使用相同的函數 - 例如，jQuery或YUI在節點中可用。

所以這取決於你的服務器，以及你想做多少工作。

到目前爲止，我可以給你的最簡單和最快捷的解決方案是使用服務器端模板。不知道你的服務器，使用jQuery和load方法對客戶端模板加載很有用。

http://docs.jquery.com/Ajax/load

來源

2013-03-21 22:02:42

謝謝大家的詳細回覆。我正在使用Amazon S3來託管我的網站。你能告訴我，如果PHP腳本將在S3上工作嗎？附：我是網絡技術的完全noobot，這就是我的問題可能聽起來含糊不清的原因。 – Ruchita 2013-03-22 22:04:48

平HTML文件不能被納入對方。您必須使用一種或另一種服務器端腳本語言。

您的服務器是Apache（Linux）的一些味道嗎？如果是的話，它可能會啓用PHP。與您的託管服務提供商聯繫

但是它可能是，拇指規則如下（適用於任何後端框架，但具體的relelvant到PHP）：

1）代碼你的資產淨值，一個HTML頁面上

2）將它保存爲一個PHP文件（或者按照程序進行，無論你有一個服務器端 - 從現在開始，我繼續假設你將使用php）

3）保存所有頁面爲.php，以便能夠包含您的新可重用元素

4）更換與PHP的所有頁面的導航部分HTML包括陳述，包括你的導航文件，例如nav.php 例如，

include($path . 'nav.php')

5）如果你希望包括「你，是，這裏」突出， a）在所有頁面的body標籤上設置一個ID b）在您包含的導航欄中的每個鏈接上設置一個ID。PHP

6）在你的CSS，列表頁ID &導航鏈接ID的所有可能的組合，例如

#homepage #homeLink, 
    #contactPage #contactLink, 
    #aboutPage #aboutLink { 

    /* format your "active" nav link here */ 

    }

來源

2013-03-21 22:11:02 niennte

或者你可以使用jQuery的.load（）函數到一個文本文件加載另一個進入導航（如果在txt文件中使用了html標籤，它將加載爲html），但如果用戶禁用了JavaScript，這將毫無用處。

見jQuery的文檔鏈接波紋管

http://api.jquery.com/load/

來源

2013-03-21 22:20:35

將可重複使用的導航菜單添加到HTML頁面

回答

相關問題