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

 

posted @ 2016-02-22 17:01  tianxintian22  阅读(1394)  评论(0)  编辑  收藏  举报