PHP使用Twig
在網(wǎng)站開(kāi)發(fā)過(guò)程中模版引擎是必不可少的，PHP中用的最多的當(dāng)屬Smarty了。目前公司系統(tǒng)也是用的Smarty，如果要新增一個(gè)頁(yè)面只需把網(wǎng)站的頭、尾和左側(cè)公共部分通過(guò)Smarty的include方式引入進(jìn)來(lái)，然后主體部分寫內(nèi)容即可，用起來(lái)也是相當(dāng)方便。這也是一種比較通用的做法。但維護(hù)一段時(shí)間后發(fā)現(xiàn)有些凌亂了：
- 公共部分內(nèi)容越加越多了，不需要用的js、css在一些頁(yè)面也被強(qiáng)制引進(jìn)來(lái)了
- 新頁(yè)面的css只能寫在網(wǎng)頁(yè)的body內(nèi)，看起來(lái)總讓人不爽。
- 左側(cè)、頭部、尾部若有特殊顯示，操作起來(lái)不方便，只能在公共地方去做判斷了。
當(dāng)然這些頁(yè)面問(wèn)題在設(shè)計(jì)的時(shí)候可以通過(guò)合理的拆分網(wǎng)頁(yè)來(lái)實(shí)現(xiàn)，當(dāng)然最重要的還在于開(kāi)發(fā)人員，在好的系統(tǒng)也經(jīng)不起開(kāi)發(fā)人員的折騰，一個(gè)項(xiàng)目經(jīng)過(guò)多次轉(zhuǎn)手后，接下來(lái)的維護(hù)人員那是相當(dāng)痛苦的。不扯遠(yuǎn)了， 現(xiàn)在要說(shuō)的是另一種模版開(kāi)發(fā)思路。
在PHP中CLASS用過(guò)很多次了，有一個(gè)很有用的特性那就是繼承，子類繼承父類后可以直接調(diào)用父類的方法，也可以對(duì)父類的方法進(jìn)行重寫，同樣PHP的模版引擎Twig也實(shí)現(xiàn)了這一點(diǎn)，模版的書寫方式可以更方便。
Twig是開(kāi)源框架Symfony2的默認(rèn)模版引擎，主頁(yè)是http://twig.sensiolabs.org/ 當(dāng)前版本為Stable: 1.12.1，其他模版引擎能做的它都能做，這里主要整理下使用Twig的BLOCK方式編寫模版頁(yè)面。
以一個(gè)常見(jiàn)的排版為例，有三個(gè)鏈接，分別是首頁(yè)、關(guān)于、聯(lián)系三個(gè)頁(yè)面，然后頭部共用，尾部共用，中間部分分成左右兩部分，左邊共用，右邊顯示具體內(nèi)容，貌似很多后臺(tái)都是這種布局。 先看看首頁(yè) twig_index.php ， 和Smarty差不多，初始化設(shè)置，然后設(shè)置變量并顯示。
<?php require './Twig-1.12.1/lib/Twig/Autoloader.php'; Twig_Autoloader::register();$loader = new Twig_Loader_Filesystem('./view/twig/templates'); $twig = new Twig_Environment($loader, array('cache' => './view/twig/templates_c','auto_reload' => true ));$twig->display('index.html', array('name' => 'Bobby'));其他頁(yè)面的PHP內(nèi)容除了模版名稱不一樣外，其他內(nèi)容完全一樣，所以后面的PHP頁(yè)面就不寫了。 那接下來(lái)的主要工作就是寫模版了，既然支持繼承，那應(yīng)該有一個(gè)父類，其他頁(yè)面來(lái)繼承這個(gè)類。base.html就是模版的父類，其內(nèi)容如下：
{# /view/twig/templates/base.html #} <!DOCTYPE html> <html> <head> <title>{% block title %}Home{% endblock %} - Twig</title> <style type="text/css"> {% block stylesheet %} #header, #main, #footer{width:600px; margin:0px auto; border:1px solid #333;} #main{border:0px;} #header { height:120px;margin-bottom:10px;} #footer{ height:80px;clear:both;margin-top:10px;} #header h1{margin-left:20px;} #header span{margin-left:20px;} #leftsider{width:125px; float:left; border:1px solid #333; height:200px; padding-top:10px;} #leftsider span{width:100%; height:30px; line-height:30px; clear:both; padding-left:15px; display:block;} #rightsider{width:460px; float:right; border:1px solid #333; height:250px;} .clear{clear:both;} {% endblock %} </style> </head> <body><div id="header"><h1>Twig Template Test</h1><span><a href="twig_index.php">Home</a></span><span><a href="twig_about.php">About</a></span><span><a href="twig_contact.php">Contact</a></span></div><div id="main"><div id="leftsider">{% block leftsider %}<span>系統(tǒng)模塊1</span><span>系統(tǒng)模塊2</span>{% endblock %}</div><div id="rightsider">{% block rightsider %}Hello {{name}}{% endblock %}</div></div><div class="clear"></div><div id="footer">{% block footer %}<h1>Twig Footer</h1>{% endblock %}</div> </body> </html>基本的頁(yè)面框架沒(méi)太多說(shuō)的，主要看看中間有5個(gè)block - {% block blockname%}{% endblock %} 每個(gè)BLOCK代表一個(gè)塊， 這里的塊可以理解成PHP父類中的一個(gè)方法。
基本的html框架搭好后，index.html該如何來(lái)寫呢？首先該繼承base頁(yè)面，然后再考慮是否要重寫base頁(yè)面的內(nèi)容，先只做繼承看看效果。
{# /view/twig/templates/index.html #} {% extends "base.html" %}
第一行為注釋部分，可以省去，第二行表示index.html繼承base.html， 未重寫的情況下將直接使用base.html中的內(nèi)容進(jìn)行顯示，也就是該頁(yè)面將看到如下效果：
效果比較簡(jiǎn)單，但是很神奇，index.html只是繼承了base.html，沒(méi)寫其他內(nèi)容呢？對(duì)，不用寫了，在未重寫父類方法時(shí)。子類是可以直接調(diào)用父類方法的。
那接著看看about， 假設(shè)about頁(yè)面和index頁(yè)面除了右邊區(qū)域不同外，其他部分完全相同，也就是只需要重寫rightsider這個(gè)BLOCK：
{# /view/twig/templates/about.html #} {% extends "base.html" %} {% block title %}About{% endblock %} {% block rightsider %} {% include 'about_content.html' %} {% endblock %}標(biāo)題的內(nèi)容改成了 About， rightsider的內(nèi)容從about_content.html文件中讀取，其他部分保留原有。也就是除了Hello Bobby的內(nèi)容不同外，其他部分與首頁(yè)都是相同的，是不是覺(jué)得很方便了？
再來(lái)看一下Contact頁(yè)面怎么寫？我么需要在leftsider里增加一個(gè)菜單，以及rightsider里顯示其他block的內(nèi)容。看看下面：
{# /view/twig/templates/contact.html #} {% extends "base.html" %} {% block title %}Contact{% endblock %} {% block leftsider %}{{ parent() }}<span>系統(tǒng)模塊3</span>{% endblock %} {% block rightsider %} {{ block('footer') }} {% endblock %}調(diào)用parent即可顯示基類的內(nèi)容，通過(guò)block(‘footer’)則可獲取footer中的Twig Footer內(nèi)容。所以圖片效果如下：
很神奇吧！這種排版方式值得一試，等待機(jī)會(huì)中…
使用block后子頁(yè)面不可以按照html的方式在任意地方加html， 也就是在block外寫任何內(nèi)容都會(huì)報(bào)錯(cuò)，所以需要base里去合理的設(shè)置block，block設(shè)置的越多就越靈活。具體的還得到實(shí)際項(xiàng)目中去嘗試。
Twig的具體語(yǔ)法可查看Twig模版語(yǔ)言入門，這種寫模版的方式確實(shí)很讓人喜歡，好像Smarty3也支持該功能了，有時(shí)間也看看。
看到Twig后聯(lián)想到了 lesscss, 動(dòng)態(tài)樣式語(yǔ)言，主頁(yè)http://www.lesscss.net 有興趣的朋友可以看看。
?
總結(jié)
- 上一篇： 中信银行动卡空间怎么看额度
- 下一篇： PHP 5.3以上版本新增的一些方法