Twig块执行顺序问题：如何实现模块化CSS按需加载？

你遇到的其实是Twig模板渲染顺序的经典坑——当你把{% block css %}放在HTML头部时，Twig会优先渲染这个块里的writeCss()，而你在模板下方或子模板里调用的{{ addCss() }}是在这之后才执行的，自然拿不到之前存储的CSS路径。下面给你几个实用的解决方案：

方案1：利用模板继承的渲染顺序（最推荐） #

Twig的模板继承机制是先处理所有子模板的内容，再替换父模板中的块，刚好能解决这个顺序问题：

1. 父模板（比如base.html.twig）：

<!DOCTYPE html>
<html>
<head>
    {% block css %}
        {{ writeCss() }}
    {% endblock %}
</head>
<body>
    {% block content %}{% endblock %}
</body>
</html>

2. 子模板（比如page.html.twig）：

{% extends 'base.html.twig' %}

{% block content %}
    {# 在这里调用addCss，子模板的内容会先于父模板头部块处理 #}
    {{ addCss('css/global.css') }}
    {{ addCss('css/page-specific.css') }}
    
    {# 页面内容 #}
    <h1>我的页面</h1>
    <p>这是页面内容</p>
{% endblock %}

这样Twig会先执行子模板里所有addCss调用，把CSS路径存进存储容器，之后再渲染父模板头部的css块，writeCss()就能输出所有收集到的CSS了。

方案2：用前置块收集CSS（无继承场景） #

如果你的模板没用到继承，或者需要在同一个模板里处理，可以在头部css块之前加一个专门的收集块：

{# 先执行这个块，提前收集所有CSS路径 #}
{% block css_collect %}
    {{ addCss('css/reset.css') }}
    {{ addCss('css/main.css') }}
{% endblock %}

<!DOCTYPE html>
<html>
<head>
    {% block css %}
        {{ writeCss() }}
    {% endblock %}
</head>
<body>
    {# 页面内容 #}
</body>
</html>

Twig是从上到下顺序渲染的，css_collect块在css块之前执行，所以addCss会先把路径存好，writeCss()就能正常输出。

方案3：自定义扩展结合Twig事件（进阶玩法） #

如果上面的方法都不适合你，可以修改你的Twig扩展，利用Twig的finish事件延迟输出：

1. 在addCss函数里，把CSS路径存在一个全局可访问的数组（比如Twig全局变量或服务容器的存储）。
2. 给writeCss函数注册一个回调，在Twig的TemplateEvent::FINISH事件触发时，输出所有收集到的CSS标签。
   这样不管writeCss()在模板里的位置如何，最终都会在整个模板渲染完成后输出CSS，不过需要注意配合块控制输出位置在头部。

关键原理补充 #

为什么之前测试会失败？因为Twig是顺序执行模板代码的——如果你的模板里先写了头部的css块（执行writeCss()），之后才调用addCss()，那writeCss()执行时，addCss还没把路径存进去，自然输出为空。而模板继承的机制刚好反转了这个顺序，这就是解决问题的核心。

内容的提问来源于stack exchange，提问作者ekans