如何在Twig中多次引入模板并生成不同随机值？

当然有办法让Twig每次引入模板都重新渲染，生成不同的随机值！问题出在Twig的缓存机制上——当模板片段没有依赖动态上下文时，Twig会缓存它的渲染结果，导致random()函数只执行一次。下面是几种可行的Twig方案，以及备选的JS方案：

方法1：给include传递唯一上下文参数 #

通过给每次include传递一个不同的参数，让Twig认为每次渲染的上下文不同，从而跳过缓存重新计算。

主模板修改为：

<div class="include-1"> {% include 'include.twig' with {'unique_key': 1} %} </div>
<div class="include-2"> {% include 'include.twig' with {'unique_key': 2} %} </div>
<div class="include-3"> {% include 'include.twig' with {'unique_key': 3} %} </div>

include.twig不需要修改，哪怕你不用这个unique_key参数——只要上下文有差异，Twig就会重新渲染模板，random(10)就会再次执行。

如果是在循环中引入模板，还可以用loop.index作为唯一参数，更灵活：

{% for i in 1..3 %}
  <div class="include-{{ i }}"> {% include 'include.twig' with {'unique_key': loop.index} %} </div>
{% endfor %}

方法2：在主模板生成随机值并传递 #

另一种更直观的方式是在主模板中每次调用random()，然后把生成的值传递给include模板，这样完全避开include模板的缓存问题。

主模板修改为：

{% set rand_val = random(10) %}
<div class="include-1"> {% include 'include.twig' with {'rand_val': rand_val} %} </div>

{% set rand_val = random(10) %}
<div class="include-2"> {% include 'include.twig' with {'rand_val': rand_val} %} </div>

{% set rand_val = random(10) %}
<div class="include-3"> {% include 'include.twig' with {'rand_val': rand_val} %} </div>

然后修改include.twig使用传递过来的值：

<span> {{ rand_val }} </span>

这种方法的好处是随机值的生成逻辑完全在主模板控制，include模板只负责展示，避免了缓存干扰。

备选方案：使用JavaScript #

如果因为某些原因无法修改Twig模板（比如include模板不能改动），可以用JS在页面加载后动态替换span内容：

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 选中所有目标span元素
  const spans = document.querySelectorAll('[class^="include-"] span');
  spans.forEach(span => {
    // 生成0-10的随机整数
    span.textContent = Math.floor(Math.random() * 11);
  });
});

为什么原来的方法会失效？ #

Twig的缓存策略会对没有外部依赖的模板片段进行缓存——你的include.twig里只有random(10)，没有引用任何外部变量或上下文，所以Twig会把它渲染成一个固定值，之后每次include都直接复用这个缓存结果。通过传递不同的上下文参数，或者把随机值生成移到主模板，就能打破这个缓存。

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