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

問題根源

Smarty、Dwoo 等模板引擎默認使用 { } 作為界定符，而 CSS 選擇器、JS 對象字面量、JSON 同樣大量使用大括號，導致模板解析錯誤或輸出錯亂。

方案對比與推薦

❌ 方案一：外部引用隔離（不推薦）

將 CSS/JS 寫入獨立文件，頁面通過 <link>/<script src> 引入。

• 優點：徹底避免衝突
• 缺點：無法在樣式/腳本中使用模板變量（如動態圖片路徑、配置參數），靈活性極差

⚠️ 方案二：修改模板引擎界定符（謹慎）

// Smarty
$smarty->left_delimiter = '{{';
$smarty->right_delimiter = '}}';

// Dwoo
$dwoo->setDelimiters('{{', '}}');

• 優點：一勞永逸
• 缺點：存量項目需全量替換模板文件，風險大、成本高，不建議老項目採用

✅ 方案三：{literal} 標籤包裹（推薦·綠色無侵入）

在衝突區塊用 {literal}...{/literal} 包裹，引擎將內容原樣輸出，不做解析。

CSS 場景

<style type="text/css">
{literal}
    .container { margin: 2px; padding: 0; }
    .box:hover { background: #f00; }
{/literal}
</style>

JavaScript 場景

<script type="text/javascript">
function openDialog(id) {
    {literal}
    art.dialog.open(url, {
        id: 'select',
        title: '選擇',
        width: 760,
        height: 380,
        padding: '10px'
    });
    {/literal}
}
</script>

JSON 數據嵌入

<script>
const config = {literal}{"apiUrl": "/api/v1", "token": "abc123"}{/literal};
</script>

Dwoo 同樣支持

Dwoo 繼承了 Smarty 的 {literal} 語法，用法完全一致，無需額外配置。

最佳實踐建議

1. 新項目：直接配置自定義界定符（如 {{ }}），從源頭消除衝突
2. 存量項目：僅在衝突點精準包裹 {literal}，不影響現有邏輯
3. 複雜 JS/JSON：考慮將動態數據通過 data-* 屬性或單獨 API 接口傳遞，模板只輸出靜態骨架
4. 編輯器提示：配置 IDE 識別 {literal} 區塊內語法高亮，提升開發體驗

{literal} 是解決歷史項目模板衝突的「銀彈」——零配置、零重構、零風險，精準修復衝突點，是維護期項目的首選方案。