PHP 模板引擎與 CSS/JSON 大括號衝突解決方案：Smarty/Dwoo 實戰

PHP 模板引擎與 CSS/JSON 大括號衝突解決方案：Smarty/Dwoo 實戰

Smarty、Dwoo 等 PHP 模板引擎默認使用 { } 作為界定符，與 CSS 樣式、JavaScript/JSON 對象字面量大量使用的大括號嚴重衝突。本文提供三種解決方案，推薦使用 {literal} 標籤包裹法。

方案一：外部引用法（避免同時出現）

將 CSS/JS 代碼放入外部文件，模板中用 <link>、<script src> 引入。
缺點：內聯樣式/腳本、動態模板變量注入場景無法避免，僅適合簡單項目。

方案二：修改模板引擎界定符

Smarty 示例：$smarty->left_delimiter = '<!--{'; $smarty->right_delimiter = '}-->';
缺點：存量項目修改成本極高，需全局替換所有模板文件，不現實。

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

{literal}...{/literal} 區塊內內容不被模板引擎解析，原樣輸出，完美解決衝突。

CSS 樣式包裹示例

<html>
<head>
    <title>{$title}</title>
    {literal}
    <style type="text/css">
        p { margin: 2px; }
    </style>
    {/literal}
</head>

JavaScript/JSON 包裹示例

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

技巧：在 JS 中加上 HTML 註釋 <!-- ... --> 可防止舊版瀏覽器顯示代碼，且不影響 {literal} 生效。

適用於 Dwoo 引擎

Dwoo 同樣支持 {literal} 標籤，用法完全一致。

相關問答

Q: PHP 框架與模板引擎是什麼關係？
A: 框架是大樓地基（結構、路由、DB、安全等），模板引擎是刷油漆的施工隊（專注視圖渲染）。框架通常集成或兼容模板引擎（如 ThinkPHP 內置、Laravel 用 Blade、Symfony 用 Twig）。

Q: PHP 動態生成 HTML 標籤 CSS 樣式不生效怎麼排查？
A: 不要盯著 PHP 代碼看。查看瀏覽器源代碼或開發者工具 Elements 面板的最終 DOM 結構，對比 CSS 選擇器，檢查類名、層級、優先級、盒模型等。AJAX 動態內容需在 Network/Elements 中檢查返回片段。