Symfony2 Twig 模板引擎核心語法與資源管理實戰

Symfony2 Twig 模板引擎核心語法與資源管理實戰

Twig 是 Symfony 標準模板引擎，語法簡潔、安全、支持繼承。本文總結核心語法、模板繼承、Asset 管理最佳實踐。

三大基礎語法

模板繼承

{# base.html.twig #}
<html>
<head>
    {% block global_css %}{% endblock %}
    {% block global_js %}{% endblock %}
    {% block my_css %}{% endblock %}
    {% block my_js %}{% endblock %}
</head>
<body>
    {% block body %}{% endblock %}
</body>
</html>

{# index.html.twig #}
{% extends "AppWebBundle::layout.html.twig" %}
{% block my_js %}
    {% javascripts '@AppWebBundle/Resources/public/js/index/*' %}
        <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
{% endblock %}
{% block my_css %}
    {% stylesheets '@AppWebBundle/Resources/public/css/index/*' %}
        <link rel="stylesheet" href="{{ asset_url }}">
    {% endstylesheets %}
{% endblock %}
{% block body %}...{% endblock %}

Asset 管理三層策略

1. 單文件引用：{{ asset('js/app.js') }}
2. Assetic 註冊目錄：
   {% javascripts '@Bundle/Resources/public/js/*' %} 自動輸出目錄下所有文件
   需在 config.yml 啟用：assetic: bundles: [AppWebBundle]
3. 頁面級區塊覆蓋：父模板定義 global_css、global_js 區塊，子模板通過 my_css、my_js 追加頁面專用資源，{{ parent() }} 保留父區塊內容。

資源發布命令

# Windows
php app/console assets:install web

# Linux/Mac（軟連接，開發友好）
php app/console assets:install web --symlink --relative

Twig 的繼承機制與 Assetic 結合，實現了資源的模塊化管理與按需加載，是大型項目前端架構的基石。