PHP使用Twig
在網站開發過程中模版引擎是必不可少的，PHP中用的最多的當屬Smarty了。目前公司系統也是用的Smarty，如果要新增一個頁面只需把網站的頭、尾和左側公共部分通過Smarty的include方式引入進來，然后主體部分寫內容即可，用起來也是相當方便。這也是一種比較通用的做法。但維護一段時間后發現有些凌亂了：
- 公共部分內容越加越多了，不需要用的js、css在一些頁面也被強制引進來了
- 新頁面的css只能寫在網頁的body內，看起來總讓人不爽。
- 左側、頭部、尾部若有特殊顯示，操作起來不方便，只能在公共地方去做判斷了。
當然這些頁面問題在設計的時候可以通過合理的拆分網頁來實現，當然最重要的還在于開發人員，在好的系統也經不起開發人員的折騰，一個項目經過多次轉手后，接下來的維護人員那是相當痛苦的。不扯遠了， 現在要說的是另一種模版開發思路。
在PHP中CLASS用過很多次了，有一個很有用的特性那就是繼承，子類繼承父類后可以直接調用父類的方法，也可以對父類的方法進行重寫，同樣PHP的模版引擎Twig也實現了這一點，模版的書寫方式可以更方便。
Twig是開源框架Symfony2的默認模版引擎，主頁是http://twig.sensiolabs.org/ 當前版本為Stable: 1.12.1，其他模版引擎能做的它都能做，這里主要整理下使用Twig的BLOCK方式編寫模版頁面。
以一個常見的排版為例，有三個鏈接，分別是首頁、關于、聯系三個頁面，然后頭部共用，尾部共用，中間部分分成左右兩部分，左邊共用，右邊顯示具體內容，貌似很多后臺都是這種布局。 先看看首頁 twig_index.php ， 和Smarty差不多，初始化設置，然后設置變量并顯示。
<?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'));其他頁面的PHP內容除了模版名稱不一樣外，其他內容完全一樣，所以后面的PHP頁面就不寫了。 那接下來的主要工作就是寫模版了，既然支持繼承，那應該有一個父類，其他頁面來繼承這個類。base.html就是模版的父類，其內容如下：
{# /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>系統模塊1</span><span>系統模塊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>基本的頁面框架沒太多說的，主要看看中間有5個block - {% block blockname%}{% endblock %} 每個BLOCK代表一個塊， 這里的塊可以理解成PHP父類中的一個方法。
基本的html框架搭好后，index.html該如何來寫呢？首先該繼承base頁面，然后再考慮是否要重寫base頁面的內容，先只做繼承看看效果。
{# /view/twig/templates/index.html #} {% extends "base.html" %}
第一行為注釋部分，可以省去，第二行表示index.html繼承base.html， 未重寫的情況下將直接使用base.html中的內容進行顯示，也就是該頁面將看到如下效果：
效果比較簡單，但是很神奇，index.html只是繼承了base.html，沒寫其他內容呢？對，不用寫了，在未重寫父類方法時。子類是可以直接調用父類方法的。
那接著看看about， 假設about頁面和index頁面除了右邊區域不同外，其他部分完全相同，也就是只需要重寫rightsider這個BLOCK：
{# /view/twig/templates/about.html #} {% extends "base.html" %} {% block title %}About{% endblock %} {% block rightsider %} {% include 'about_content.html' %} {% endblock %}標題的內容改成了 About， rightsider的內容從about_content.html文件中讀取，其他部分保留原有。也就是除了Hello Bobby的內容不同外，其他部分與首頁都是相同的，是不是覺得很方便了？
再來看一下Contact頁面怎么寫？我么需要在leftsider里增加一個菜單，以及rightsider里顯示其他block的內容?？纯聪旅?#xff1a;
{# /view/twig/templates/contact.html #} {% extends "base.html" %} {% block title %}Contact{% endblock %} {% block leftsider %}{{ parent() }}<span>系統模塊3</span>{% endblock %} {% block rightsider %} {{ block('footer') }} {% endblock %}調用parent即可顯示基類的內容，通過block(‘footer’)則可獲取footer中的Twig Footer內容。所以圖片效果如下：
很神奇吧！這種排版方式值得一試，等待機會中…
使用block后子頁面不可以按照html的方式在任意地方加html， 也就是在block外寫任何內容都會報錯，所以需要base里去合理的設置block，block設置的越多就越靈活。具體的還得到實際項目中去嘗試。
Twig的具體語法可查看Twig模版語言入門，這種寫模版的方式確實很讓人喜歡，好像Smarty3也支持該功能了，有時間也看看。
看到Twig后聯想到了 lesscss, 動態樣式語言，主頁http://www.lesscss.net 有興趣的朋友可以看看。
?
總結
- 上一篇： 中信银行动卡空间怎么看额度
- 下一篇： 股票账户的钱什么时候能转出来