symfony2 twig模板引擎
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 %}
(4)使用symfony2自动实现coffeescrip脚本的编译
在app/config/config.yml配置:
#windows
assetic:
filters:
coffee:
bin: "D:\\Program Files\\nodejs\\node_modules\\coffee-script\\bin\\coffee"
node: "D:\\Program Files\\nodejs\\node.exe"
/index/x.coffee
for i in [0..5] console.log "Hello #{i}"
index.html.twig
{% block my_js %} {% javascripts '@AppWebBundle/Resources/public/js/index/*.coffee' filter="coffee" %} <script type="text/javascript" src="{{ asset_url }}"></script> {% endjavascripts %} {% endblock %}
(5)文件压缩和优化 uglifyjs2
在app/config/config.yml配置:
assetic:
node: "D:\\Program Files\\nodejs\\node.exe"
filters:
uglifyjs2:
bin: "C:\\Users\\XITAI-2015\\AppData\\Roaming\\npm\\node_modules\\uglify-js\\bin\\uglifyjs"
index.html.twig
{% block my_js %} {% javascripts '@AppWebBundle/Resources/public/js/index/*.coffee' filter="coffee,uglifyjs2" %} <script type="text/javascript" src="{{ asset_url }}"></script> {% endjavascripts %} {% endblock %}
如果上述代码filter="coffee,uglifyjs2" 写成 filter="coffee,?uglifyjs2",则在开发环境下经过coffee编译后,不进行压缩,只在生产环境下被压缩
(6)js/css文件版本控制
在app/config/config.yml配置:
framework: templating: engines: ['twig'] assets_version: 5 assets_version_format: %%s?version=%%s
在生产模式下可以看到:
<script type="text/javascript" src="/js/50581d6.js?version=5"></script> <link rel="stylesheet" href="/css/3115068.css?version=5">
自动生成编译好文件(几个文件会合并在一起)
#Dumps all assets to the filesystem
>php app/console assetic:dump --env=prod --no-debug