ThinkPHP literal 標籤：防止模板引擎誤解析 JS/變數語法完整指南

問題場景

ThinkPHP 模板引擎以 {$var}、<if> 等標籤解析輸出。若頁面包含 Vue/React 模板語法、原生 JS 物件字面量、或需原樣輸出 {$Think.config.xxx}，會被誤判導致錯誤或資料洩露。

<literal> 標籤用法

將需「原樣輸出」的區塊包裹：

<literal>
  <if condition="$name eq 1"> value1
  <elseif condition="$name eq 2"/> value2
  <else /> value3
  </if>
</literal>

上述 <if> 將作為純文字輸出，不被解析。

常見應用場景

1. 前端框架模板語法共存

<div id="app">
  <literal>
    {{ message }} @{{ vueVar }} {{ angularExpr }}
  </literal>
</div>

2. JS 物件/JSON 輸出

<script>
  <literal>
    var config = {$Think.config.CUSTOM.{$key}};
    var data = {"user": "{$user.name}", "roles": [{$roles}]};
  </literal>
</script>

3. PHP 區塊內輸出模板語法

<php><literal>echo '{$Think.config.CUSTOM.' . $key . '}';</literal></php>

進階技巧

• 整段 JS 檔案：<literal><script src="app.js"></script></literal> 確保內部不被掃描。
• 巢狀標籤：literal 內不可再包含 literal，若需輸出 </literal> 字串請拆分字串連接。
• 效能：literal 區塊會跳過編譯，大幅減少模板解析時間，適合大段靜態 JS/CSS。

替代方案對比

結語

<literal> 是 ThinkPHP 模板引擎提供的「逃生艙」，善用它能完美共存前端模板語法、原始 JS 物件與 PHP 動態輸出，避免無謂的語法衝突與安全風險。