程式師世界 >> 編程語言 >> 網頁編程 >> PHP編程 >> 關於PHP編程 >> symfony2 twig模板引擎，symfony2twig模板

symfony2 twig模板引擎，symfony2twig模板

編輯：關於PHP編程

symfony2 twig模板引擎，symfony2twig模板

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 %}