如何使用 JavaScript 在多個 HTML 頁面中有效地包含通用頁首和頁尾？

在多個HTML 頁面中包含公共頁眉和頁腳

要在多個HTML 頁面中包含公共頁眉和頁腳部部分，使用JavaScript 是一種有效的方法方法。以下是有關如何實現此目標的逐步指南：

1. 建立佔位符元素：在主HTML 頁面（例如，index.html）中，使用下列命令建立佔位符元素：唯一ID（例如，
   ）和

   ）。這些佔位符將用作載入頁首和頁尾內容的錨點。
2. 載入外部頁首和頁尾：在主HTML 頁面的 中，部分，包括jQuery 庫和一個透過AJAX 請求載入頁眉和頁腳內容的腳本區塊。以下是一個範例腳本：

<script>
$(function() {
  $("#header").load("header.html"); 
  $("#footer").load("footer.html"); 
});
</script>

此腳本向外部「header.html」和「footer.html」檔案發出AJAX 請求，並將其內容載入到指定的佔位符元素中。

3. 建立頁首和頁腳模板：在單獨的HTML 檔案中（「header.html」和「footer.html」），定義要包含在頁首和頁腳的內容。例如：

<!-- header.html -->
<a href="http://www.google.com">Click here for Google</a>

<!-- footer.html -->
<p>Copyright 2023</p>

4. 放置頁眉和頁腳檔案：將「header.html」和「footer.html」檔案放入與HTML 主頁相同的目錄（即index.html)。
5. 存取 HTML 主頁：最後，在瀏覽器中載入 HTML 主頁 (index.html)。現在您應該看到頁面上包含的共享頁首和頁尾部分。點擊頁眉中的連結應按預期重定向您。

透過執行這些步驟，您可以使用 JavaScript 和 AJAX 輕鬆地在多個 HTML 頁面中包含並維護一致的頁首和頁尾部分。這種方法消除了在每個單獨頁面中複製貼上程式碼的需要，確保了效率和易於管理。