您现在的位置：程式碼之家 >> 編程語言 > >> .NET 網頁程式設計 >> ASP.NET 基礎 >> ASP.NET 基礎

ASP.NET 靜態頁面生成：模板替換法完整實作指南

編輯：ASP.NET 基礎

前言：為什麼仍需靜態頁生成？

雖然現代 Web 架構偏向動態渲染（SSR/CSR），但靜態頁生成在 SEO 型行銷頁、高流量內容頁、離線瀏覽、CDN 快取降低伺服器負載等場景仍具不可替代優勢。核心原理極簡單：讀取模板 → 替換標記 → 輸出檔案。本文提供可直接落地的三大核心方法：ReadHtmlFile、ReturnHtml、writeHtml，並說明分頁靜態化擴充思路。

核心三部曲程式碼

1. 讀取模板檔案 `ReadHtmlFile`

public static string ReadHtmlFile(string templatePath)
{
    var code = System.Text.Encoding.GetEncoding("utf-8");
    string str = string.Empty;
    StreamReader sr = null;
    try
    {
        sr = new StreamReader(HttpContext.Current.Server.MapPath(templatePath), code);
        str = sr.ReadToEnd();
    }
    catch (Exception exp)
    {
        HttpContext.Current.Response.Write(exp.Message);
        HttpContext.Current.Response.End();
    }
    finally
    {
        sr?.Dispose();
        sr?.Close();
    }
    return str;
}

2. 標記替換邏輯 `ReturnHtml`

public static string ReturnHtml(string html)
{
    string newHtml = html;
    newHtml = newHtml.Replace("<#Title#>", "這個是標題替換");
    // newHtml = newHtml.Replace("<#Content#>", "這個是內容替換");
    newHtml = CreateList(newHtml); // 若有列表區塊可擴充
    return newHtml;
}

// 範例：列表區塊循環替換（略）
private static string CreateList(string html) { /* ... */ return html; }

3. 寫入靜態檔案 `writeHtml`

public static void writeHtml(string fileName, string html)
{
    var code = System.Text.Encoding.GetEncoding("utf-8");
    string fullPath = HttpContext.Current.Server.MapPath(fileName);
    StreamWriter sw = null;
    try
    {
        sw = new StreamWriter(fullPath, false, code);
        sw.Write(html);
        sw.Flush();
    }
    catch (Exception ex)
    {
        HttpContext.Current.Response.Write(ex.Message);
        HttpContext.Current.Response.End();
    }
    finally
    {
        sw?.Close();
    }
}

完整呼叫流程範例

// 1. 讀取模板
string template = ReadHtmlFile("~/Templates/ArticleTemplate.html");

// 2. 替換標記（實際專案中從 DB 取得資料）
string html = ReturnHtml(template);

// 3. 輸出靜態檔
writeHtml("~/StaticPages/article_123.html", html);

模板檔案範例 (ArticleTemplate.html)

<!DOCTYPE html>
<html>
<head><title><#Title#></title></head>
<body>
  <h1><#Title#></h1>
  <div><#Content#></div>
  <ul><#List#></ul>
</body>
</html>

進階主題：分頁靜態化

若列表頁需分頁，邏輯為：查詢總筆數 → 計算總頁數 → 迴圈每頁呼叫上述三步驟 → 產生 page_1.html、page_2.html ...。建議搭配背景工作（Hangfire/Quartz）非同步生成，避免阻塞 Web 執行緒。

現代化替代方案對比

方案	優點	缺點	適用場景
模板替換法 (本文)	零依賴、部署簡單、完全控制輸出	手工維護標記、無型別安全、複雜邏輯難維護	舊專案維護、簡單行銷頁、離線封存
RazorEngine / RazorLight	強型別模板、支援邏輯/迴圈/部分視圖、效能佳	需引入套件、學習曲線稍高	新專案、需維護大量模板
SSG (Next.js, Astro, Hugo)	生態豐富、支援增量建置、自動最佳化	技術棧切換成本高	全新專案、內容導向站點