SMARTY模板中CSS及JavaScript問題

SMARTY算是歷史久遠且強大的template engine(模板引擎),不過最常遇到的問題就是SMARTY引擎將{} 大括號區塊中視為它的解析語法。因此與CSS及JavaScript語法產生衝突,解決的方式有以下幾種:

1.使用{literal} {/literal}

在CSS或JavaScript語法區塊前後加上{literal} {/literal},Smarty 就不會進行解析,不過注意的是裡面就不能再增加任何變數囉。

[php]
{literal}

<style type="text/css"><!– body {
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}

–></style>{/literal}
[/php]

2.利用 {ldelim} {rdelim} 取代左右大括號

[php]
<style type="text/css"><!–
body {ldelim}
padding-bottom: 40px;
{rdelim}
.sidebar-nav {ldelim}
padding: 9px 0;
{rdelim}
–></style>
[/php]

3.重新定義delimiters

[php]
<?php
$smarty->left_delimiter = ‘<!–{‘;
$smarty->right_delimiter = ‘}–>’;
?>
[/php]

4.獨立成檔案

[html]
<link id="bs-css" href="css/base.css" rel="stylesheet">
<script src="js/base.js"></script>
[/html]

這樣一來就可以讓SMARTY與CSS/JavaScript和平共存!

作者: 林壽山

目前任職於軟體公司研究開發部門,擔任專業處長,專注於.NET C# 開發,並具備豐富的POS 收銀系統與金流整合開發經驗。我精通各類支付系統的設計與開發,包含第三方支付(如綠界、藍新、歐付寶、速買配、馬來西亞 ePay/HappyPay、台新 One 碼)、行動支付(悠遊卡、一卡通、支付寶、微信支付、街口支付)、以及信用卡支付(聯合信用卡)。 熟悉多種開發技術,擅長PHP 網頁開發(CodeIgniter、Laravel 框架)、Delphi 程式設計、資料庫設計、C# WinForm/WebForm 應用開發、ASP.NET MVC、API 串接設計,並具備LINE 串接開發的豐富經驗。 除了技術開發之外,我也熱衷於技術分享,曾擔任台中學校產業學院講師 5 年,培育新一代的軟體開發人才,致力於推動軟體技術的應用與創新。 我對技術充滿熱忱,始終保持學習與探索的心態,期望透過軟體開發為企業與社會創造更大的價值。