Smarty 模板引擎與 CSS 大括號衝突的三種解決方案

Smarty 模板引擎與 CSS 大括號衝突的三種解決方案

Smarty 預設使用 {} 作為定界符，而 CSS 規則集同樣使用 {}，若直接在模板中內嵌 <style> 區塊，會導致 Smarty 解析錯誤（「Unknown tag」）。本文提供三種解決方案，由簡至繁。

方案一：外部樣式表（推薦）

將 CSS 抽離為獨立 .css 檔案，以 <link> 引入。這是最佳實踐，優點：

• 完全避開模板引擎解析，零衝突。
• 瀏覽器可快取 CSS，減少 HTML 體積。
• 支援 CSS 壓縮、合併、CDN 分發、版本控制。
• 關注點分離，前後端協作更清晰。

{* template.tpl *}
<html>
<head>
    <title>{$title}</title>
    <link rel="stylesheet" href="/css/app.css?v={$version}">
</head>
<body>...</body>
</html>

方案二：{literal} 標籤包裹

若必須內嵌 CSS（如關鍵 CSS 內聯、動態樣式），用 {literal}...{/literal} 告訴 Smarty 「原樣輸出，不解析」：

<style>
{literal}
    .container { margin: 0 auto; max-width: 1200px; }
    .btn { padding: 8px 16px; border-radius: 4px; }
{/literal}
</style>

• 優點：就地解決，無需改動配置。
• 缺點：區塊內無法使用 Smarty 變數/邏輯；大量 CSS 時模板可讀性下降。

方案三：修改 Smarty 定界符

在 PHP 程式碼中設定 left_delimiter、right_delimiter 為較罕見的字串：

$smarty = new Smarty();
$smarty->left_delimiter  = '';

// 模板中改用新定界符
<title></title>
<style>
    .box { color: red; }  <!-- 普通大括號不再衝突 -->
</style>

• 優點：模板中可自由撰寫 CSS/JS 大括號。
• 缺點：所有模板需統一修改定界符，遷移成本高；團隊協作需約定新語法；部分第三方插件可能不相容。

進階：區塊級定界符切換 (Smarty 3+)

Smarty 3 支援在模板中臨時變更定界符：

{* 區塊開始 *}
{ldelim}}rdelim}
{* 區塊結束，恢復預設定界符 *}

但語法較繁瑣，實務上較少用。

最佳實踐總結

1. 首選方案一：CSS/JS 全部外部引入，模板僅保留結構與資料綁定。
2. 次選方案二：極少量關鍵 CSS/JS 內聯時，用 {literal} 包裹。
3. 避免方案三：除非歷史專案重構成本極高，否則不要修改全域定界符，增加認知負擔。

常見誤區

• 誤以為 {literal} 可巢狀：不支援巢狀，內層 {literal} 會被當作文字輸出。
• 在 {literal} 區塊中使用變數：不會被解析，原樣輸出 {$var}。
• 修改定界符後忘記更新所有模板：導致大量語法錯誤。

遵循「關注點分離」原則，將樣式、腳本、結構分離，是解決模板引擎語法衝突的根本之道。現代前端工程化（Webpack、Vite、CSS Modules）更進一步解決了命名衝突、依賴管理、構建優化等問題，建議專案漸進式升級。