网页模版设计布局的使用

在主流的一些MVC框架中都提供有网站布局功能,如Symfony、CodeIgniter、CakePHP等,这些框架默认的模版方案已经启用了布局功能。使用布局能够有效地提高模版的开发速度,并且由于布局的限制,网站中的各页面能够保持高效的统一,方便后期维护。一个经典的网站布局如图所示

网页布局模板源码,网页设计模板素材

如图所示,这是一个经典的网站布局图,如果网站页面内容量大,栏目多,那么布局就会更加复杂。如果不使用布局功能,那么要保持整个网站想通的布局形式,就必须在每个模版中使用相同的代码,这无疑会极大地增加开发成本,降低开发效率。而一旦使用布局功能,那么只需要将header、side、footer区域的重复代码放到布局模版中,留下content区域的代码放到各自控制器动作模版中,那么就能够有效地提高开发效率。

ThinkPHP3.0之前的模版引擎没有布局的概念,但开发人员可以使用include包含文件达到网站布局的效果。新版的ThinkPHP引入了模版布局功能,要使用模版布局需要在配置项中打开Layout_on选项 (默认是关闭,即false)。为了方便演示,接下来将使用一个简单的模版文件,演示布局功能的使用,帮助读者加深布局的认识。

首先在项目Tpl根目录下创建一个Html文件,并命名为layout.html。该文件即为当前应用的布局文件,使用可视化工具(如dreamweaver)设计一个网站外观,将需要经常改动的代码使用{__CONTENT__}特定变量(没有定界符)代替,如简略图所示

网页布局模板源码,网页设计模板素材

如上图所示,因代码的篇幅太多,截图时收缩后效果,模版引擎会将{__CONTENT__}变量替换为相应的控制动作页面,整个解释流程将由layout.html开始,然后到各自的动作页面。这样一来,我们只需在控制器动作中嵌入少量的代码,即可使页面保持统一的布局与风格,如以下代码所示

网页布局模板源码,网页设计模板素材 在用户访问该页面时,上述代码将会代替{__CONTENT__}变量,效果如图所示

网页布局模板源码,网页设计模板素材

在布局文件中嵌入的变量或标签都是非全局的,而只针对当前页面生效。所以在布局代码中声明变量或语句,都应该在当前控制器动作中处理,否则就没有存在的意义。布局文件允许嵌套,如果网站页面更加复杂,还可以结合include等标签实现开发需求。

另外,如果不需要全局布局,也可以单独在当前页面中使用布局文件,只需要在当前页面头部加上<layout name="layout"/>标签即可,这种方式称为局部布局,事实上与include标签原理一样。