标签:
1、基本语法
Says something:{{ }}
Does something:{% %}
Comment something:{# #}
{% extends "AppWebBundle::layout.html.twig" %}继承模板
2、核心概念:
用类的继承关系去管理页面之间的关系
如果要访问某个bundle里的资源文件,需要将文件拷贝到/web 目录下,或者linux/mac 软连接映射到/web目录下
windows: >php app/console assets:install web
linux: >php app/console assets:install web --symlink --relative
3、js css文件管理
(1)直接使用某个CSS/JS文件:{{asset(‘xxx.js‘)}}
(2)注册/定义资源:{% javascripts %} {% stylesheets %}
# 会将‘AppWebBundle/Resources/public/js/’目录下所有的js文件依次输出
{% block my_js %} {% javascripts ‘@AppWebBundle/Resources/public/js/*‘ %} <script type="text/javascript" src="{{ asset_url }}"></script> {% endjavascripts %} {% endblock %}
并在app/config/config.yml配置:
assetic:
bundles: [ AppWebBundle ]
(3)页面间共享CSS/JS文件的通用策略
#layout.html.twig
...
<head> <!--start globalcss --> {% block global_css %} {% stylesheets ‘@AppWebBundle/Resources/public/css/bootstrap.min.css‘ ‘@AppWebBundle/Resources/public/css/bootstrap-theme.min.css‘ ‘@AppWebBundle/Resources/public/css/main.css‘ %} <link rel="stylesheet" href="{{ asset_url }}"> {% endstylesheets %} {% endblock %} <!--end globalcss --> <!--start globaljs --> {% block global_js %} {% javascripts ‘@AppWebBundle/Resources/public/js/vendor/modernizr-2.8.3-respond-1.4.2.min.js‘ %} <script type="text/javascript" src="{{ asset_url }}"></script> {% endjavascripts %} {% endblock %} <!--end globaljs --> {% block my_js %} {% endblock %} {% block my_css %} {% endblock %} </head>
#index.html.twig
{% extends "AppWebBundle::layout.html.twig" %} {% block maincontent %} {% block my_js %} {% javascripts ‘@AppWebBundle/Resources/public/js/index/*‘ %} <script type="text/javascript" src="{{ asset_url }}"></script> {% endjavascripts %} {% endblock %} {% block my_css %} {% stylesheets ‘@AppWebBundle/Resources/public/css/index/*‘ %} <link rel="stylesheet" href="{{ asset_url }}"> {% endstylesheets %} {% endblock %} {% block footer %} {{ parent() }} //会沿用父页面的footer,不被重写 {% endblock %} {% endblock %}
标签:
原文地址:http://www.cnblogs.com/tianxintian22/p/5200555.html