一個專案寫很多的純靜態頁面，有公共的部分（例如頭和尾）你是怎麼提取公用的？

王铁柱6發表於2024-11-23

在前端開發中，處理大量包含公共部分（例如頁首和頁尾）的靜態 HTML 頁面，有很多方法可以提取和複用這些公共部分，避免重複程式碼和提高維護效率。以下是一些常用的方法：

1. 使用 Includes (伺服器端包含):

  • 原理: 如果你的靜態頁面是透過伺服器（例如 Apache, Nginx 等）提供的，可以使用伺服器端包含機制。 伺服器會在傳送頁面給瀏覽器之前，將公共部分的檔案內容插入到主頁面中。
  • 方法: 不同的伺服器有不同的語法，例如：
    • Apache (SSI): <!--#include virtual="/path/to/header.html" -->
    • Nginx (SSI): <!--#include file="/path/to/header.html" --> (需要配置 nginx 支援 ssi)
    • PHP: <?php include 'header.php'; ?> (雖然是 PHP 程式碼，但可以用在 HTML 中)
  • 優點: 簡單易用，伺服器端處理，對客戶端透明。
  • 缺點: 需要伺服器支援，如果只是純靜態 HTML 頁面託管在例如 GitHub Pages 等靜態託管服務上，則無法使用。

2. 使用 JavaScript:

  • 原理: 使用 JavaScript 動態載入公共部分的 HTML 檔案並插入到頁面中。
  • 方法:
    function includeHTML() {
  const elements = document.querySelectorAll('[w3-include-html]');
  for (let element of elements) {
    const file = element.getAttribute('w3-include-html');
    fetch(file)
      .then(response => response.text())
      .then(html => element.innerHTML = html);
  }
}
includeHTML(); // 在頁面載入完成後呼叫

// 在 HTML 中使用：
<div w3-include-html="header.html"></div>
<div w3-include-html="footer.html"></div>
  • 優點: 純前端解決方案，不依賴伺服器，適用於各種靜態託管服務。
  • 缺點: 需要 JavaScript 執行，可能會略微影響頁面載入速度。

3. 使用構建工具 (例如 Gulp, Webpack, Parcel):

  • 原理: 使用構建工具在構建過程中自動將公共部分插入到每個頁面中。
  • 方法: 不同的構建工具有不同的外掛和配置方式，例如可以使用 html-include-webpack-plugin (Webpack), gulp-include (Gulp) 等外掛。
  • 優點: 自動化處理，方便管理，可以進行程式碼壓縮、最佳化等操作。
  • 缺點: 需要一定的學習成本，需要配置構建流程。

4. 使用模板引擎 (例如 Handlebars, Nunjucks, Pug):

  • 原理: 使用模板引擎定義頁面模板，然後在構建過程中根據模板生成最終的 HTML 頁面。
  • 方法: 不同的模板引擎有不同的語法和使用方法。
  • 優點: 功能強大，可以實現更復雜的邏輯和動態內容生成。
  • 缺點: 需要學習模板引擎的語法，需要配置構建流程。

選擇哪種方法取決於你的專案需求和技術棧:

  • 對於簡單的靜態頁面，伺服器端包含或 JavaScript 方法就足夠了。
  • 對於複雜的專案，構建工具和模板引擎是更好的選擇。

希望以上資訊能幫到你!

相關文章