Home / PostsPost
Twig的核心概念及本站页面结构分析
嘟噜聪2015/02/13 14:02:31
3205人已阅
简介 模版引擎 twig 的模板就是普通的文本文件，也不需要特别的扩展名，.html .htm .twig 都可以。模板内的 变量 和 表达式 会在运行的时候被解析替换，标签（tags）会来控制模板的逻辑。下面我将对Twig进行一个简单的讲解，用法以后再写。
模版引擎 twig 的模板就是普通的文本文件，也不需要特别的扩展名，.html .htm .twig 都可以。
模板内的 变量 和 表达式 会在运行的时候被解析替换，标签（tags）会来控制模板的逻辑。下面我将对Twig进行一个简单的讲解，用法以后再写。
具体的官网文档请登录Twig官网进行查看：<a href="http://twig.sensiolabs.org/" target="_blank">Twig官网</a>
<strong>核心概念：</strong><span style="font-weight:normal;line-height:1.5;">用类的继承关系去管理页面之间的关系</span><span style="font-weight:normal;line-height:1.5;">用Twig去管理你网站的页面就是相当于用一个一个的类来对上一层进行继承和复写。</span>
<strong>核心概念：</strong><span style="font-weight:normal;line-height:1.5;">用类的继承关系去管理页面之间的关系</span><span style="font-weight:normal;line-height:1.5;">用Twig去管理你网站的页面就是相当于用一个一个的类来对上一层进行继承和复写。</span>
<span style="font-weight:normal;line-height:1.5;">以我网站为例，本站使用的基本都是上、中、下的结构固定的有上部和下部，变化的只有中间的内容。</span>
<span style="font-weight:normal;line-height:1.5;">这样的话我们的页面结构就出来了。</span>
<span style="font-weight:normal;line-height:1.5;"><img src="http://source.lattecake.com/images/2015/02/9e4c3f055851c79eb2ec12869ce075b8.png" alt="" /><br />
<span style="font-weight:normal;line-height:1.5;">OK我们先来看一下本站的layout代码：</span>
#default_layout.html.twig
<br />
<!DOCTYPE html> <html> <head>以上这个布局文件我们要以把它看成一个抽象类，类似这样的<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>LatteCake - {% block pageTitle %}个人博客{% endblock %}</title> <meta name="keywords" content="个人博客,个人技术博客,拿铁蛋糕,拿铁味的摩卡" /> <meta name="description" content="{% block pageDescription %}LatteCake个人博客,拿铁味的蛋糕,是一名码农,擅长各种技术.{% endblock %}" /> <link rel="shortcut icon" href="{{ asset('favicon.ico') }}" /> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"/> {% stylesheets '@DemoWebBundle/Resources/public/css/doc.min.css' '@DemoWebBundle/Resources/public/css/blog.css' filter='cssrewrite,yui_css' %} <link rel="stylesheet" media="all" type="text/css" href="{{ asset_url }}" /> {% endstylesheets %} {% set uploadsUrl = 'http://source.lattecake.com/images/' %} {% set storageUrl = 'http://storage.lattecake.com/' %} {% set baseUrl = url('main_index') %} {% block LC_stylesheets %} {% endblock %} <script type="text/javascript"> var baseInfo = { baseUrl: '{{ url('main_index') }}', userName: '', userUrl: '', userAvatar: '' }; </script></head> <body> <div id="navigation">
{{ render(controller('DemoWebBundle:Default:navigation')) }}</div>
{% block bannerContainer %} {% endblock %}
{% block content %} {% endblock %}
<div id="footer">
{% include 'DemoWebBundle:Public:footer.html.twig' %}</div> <a class="goto-top" href="javascript:;" title="返回顶部" style="position: fixed; display: none;"></a> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> {# {% javascripts
'@DemoWebBundle/Resources/public/js/main.js' filter='yui_css'%} <script type="text/javascript" src="{{ asset_url }}"></script> {% endjavascripts %} #} <script type="text/javascript">
$(function(){ $(window).bind("scroll", function(){ if($(this).scrollTop() > 500){ $('.goto-top').show('fast'); }else{ $('.goto-top').hide('fast'); } }); $('.goto-top').bind('click', function(){ $('html, body').animate({ scrollTop: 0 }, 'slow'); }); }); var urlPathname = window.location.pathname, params = urlPathname.split("/"); if( params ) { $.grep(params, function(n) { var active = $.trim(n); if ( active == 'post' ) active = 'learn'; if( active.length > 0 && active.split('.').length < 2 && $('#main_' + active).length != 0) { $('#main_navigation li').removeClass('active'); $('#main_' + active).addClass('active'); return ; } }); }</script> {% block LC_javascript %} {% endblock %} </body> </html>
<br />
<br />
abstract class Default_layout
{
public $uploadsUrl = '';
public $storageUrl = '';
public $baseUrl = '';
public function pageTitle(){}
public function pageDescription(){}
public function LC_stylesheets(){}
public function bannerContainer(){}
public function content(){}
public function LC_javascript(){}
}
以上的我布局页面分别定义了三个成员和标题、描述、banner、内容、以及style样式和javascript等方法，conteng就是我们中间要显示的内容，我们后面所有的子页面都可以继承这个布局类，当子模板不得写父方法时将会以默认的方式显示。
<br />
<br />
好的，那我们接下来我们看首页的index.html.twig页面的代码
<br />
{% extends "DemoWebBundle::default_layout.html.twig" %}
{% block LC_stylesheets %}
<link rel="stylesheet" href="{{ storageUrl }}static/css/font-awesome.min.css"/>
<link rel="stylesheet" href="{{ storageUrl }}static/SweetAlert/css/sweet-alert.css"/>
{% endblock %}
{% block bannerContainer %}
{#<div class="bs-docs-masthead">
<div class="container">
<span class="bs-docs-booticon bs-docs-booticon-lg bs-docs-booticon-outline">Lc</span>
<p class="lead">拿铁味的摩卡是最受欢迎的个人技术博客。</p>
</div>
</div>#}
<header id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class=""></li>
<li data-target="#myCarousel" data-slide-to="1" class=""></li>
<li data-target="#myCarousel" data-slide-to="2" class="active"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</header>
{% endblock %}
{% block content %}
<main class="" id="content" role="main">
<div class="container">
<!-- Marketing Icons Section -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">
欢迎来到我的LatteCake
</h1>
</div>
{% if homePost %}
{% for item in homePost %}
<div class="col-md-4">
<div class="panel panel-{{ item.getPostPanel }}">
<div class="panel-heading">
<h3 class="panel-title">{{ item.getPostTitle }}</h3>
</div>
<div class="panel-body">
<p>{{ item.getPostDesc }}</p>
<a href="{{ baseUrl }}{{ item.getPostUrl }}" class="btn btn-default">去看看</a>
</div>
</div>
</div>
{% endfor %}
{% endif %}
</div>
<!-- /.row -->
<!-- Portfolio Section -->
<div class="row" id="example-images">
<div class="col-lg-12">
<h2 class="page-header">若没有过往 我们该怎样成长</h2>
</div>
</div>
<!-- /.row -->
<!-- Features Section -->
<div class="row">
<div class="col-lg-12">
<h2 class="page-header">别让自己的心塞太满 要留出点空间让阳光照进来</h2>
</div>
<div class="col-md-6">
</div>
<div class="col-md-6">
<img class="img-responsive" src="http://ditie.qiniudn.com/erovo/images/demo/blog-2.jpg" alt="">
</div>
</div>
<!-- /.row -->
<hr>
<!-- Call to Action Section -->
<div class="well">
<div class="row">
<div class="col-md-8">
<p>明明知道放下一切就可以轻松上路,但是却坚持背负一身破铜烂铁把自己累的够呛;那沉甸甸的重担里装满了无可救药的偏执,被别人掌控的安全感,不受控制的哀怨,毫无希望的等待.</p>
</div>
<div class="col-md-4">
<a class="btn btn-lg btn-default btn-block" href="{{ url('main_mood') }}">碎言碎语</a>
</div>
</div>
</div>
<hr>
</div>
</main>
{% endblock %}
{% block LC_javascript %}
<script src="{{ storageUrl }}static/SweetAlert/js/sweet-alert.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('.carousel').carousel({
interval: 5000 //changes the speed
});
$('#example-images a').click(function()
{
swal({
title: "∑(ﾟДﾟ)",
text: "相册君还在努力...",
{#imageUrl: "{{ storageUrl }}static/SweetAlert/images/thumbs-up.jpg"#}
imageUrl: "{{ storageUrl }}/static/images/gif/20150212182346.gif",
timer: 2000,
confirmButtonText: "知道了..."
});
});
</script>
{% endblock %}
这个首页的模板我们继承了default_layout.html.twig这个模板，并且对default_layout的部分方法进行了复写。
如果把它看成类的话那应该是这个样纸：
<br />
class Index_html extends Default_layout
{
public function LC_stylesheets(){}
public function bannerContainer(){}
public function content(){}
public function LC_javascript(){}
}
没有复写的方法将还使用父类的方法，当然我们还可以再写一个index_list页面让index_list页面再继承index_html页面，用法与上次类似，如果对面向对象非常了解的话应该不难理解，回头自己可以写一个类似的小模板引擎。
<br />
这样的话我们就把首页的结构基本给梳理清楚了。
我们可以把以上那些页面理解成类与类的继承关系，那么每一块小的功能就可以把它认为是方法或属性，如果页面很多东西是共性的，那么我们就可以把这些属性或方法放到一个基类里面，让它们去继承这个基类，如果不同的呢，只要把这些不同的方法定义在这里边就行了然后再让子页面去继承它，这样的话咱们的页面结构将会变得非常清晰。每一个具体的内容都可以找到相应的方法去它进行生成，并且每个页面都非常便于维护，每个页面只负责去生成那些特有的内容，而不用去管那些菜单、标签什么的了。高级些的还能对每个模块设置不同的缓存时间，非常方便管理。
以上就是twig的一个最简单的使用了。
当然有时间的话可以看看项目的/app/cache 目录，这里是程序运行时生成的一些缓存文件，比如我们看这里
<img src="http://source.lattecake.com/images/2015/02/a2a886a38b5e096e3d5ba6fc9b0d724b.png" alt="" />
这是生产环境的缓存目录(这是开发环境，生产环境文件会非常多)，我们打开twig这个目录，里边有很多生成的文件，打开文件可以发现这就是一个一个的类相互继承着，而每个类里边的方法就是我们自己写的html代码，doDisplay就是输出的内容
<br />
$this->parent->display($context, array_merge($this->blocks, $blocks));这个就是调用父类的方法并把内容传过去。
<br />
OK大概就是这样了，看不懂也没办法，我语言组织能力真的不是很好，脑袋里东西很多，但就是讲不出来或者说讲不好。
关于Twig的详细用法可以参考官方文档，那里讲的也很详细，只不过是全英文的英文好的可以自己去阅读阅读，当然以后有时间我会慢慢写关于Twig的一些相关用法。
关于assetic、doctrine等以后我有时间慢慢写来。
过段时间我把Twig整进CodeIngiter框架里去了我再来写些文章，如果大家有兴趣可以在文章下方留言进行交流！(我也才学Symfony不久，还有很多方面不懂的，欢迎大家多指点指点)
<strong><span style="color:#E56600;font-size:18px;">原创~ </span></strong><strong><span style="color:#E56600;font-size:18px;">有</span></strong><strong><span style="color:#E56600;font-size:18px;">兴</span></strong><strong><span style="color:#E56600;font-size:18px;">趣的可以在下方留言，大家一起交流一起学习一起成长。</span></strong>
<br />
很赞哦！ (0)
