求助：Nunjucks嵌套块失效，controllerContent内容无法渲染

嘿，刚接触Nunjucks遇到嵌套块的问题太正常了，我来帮你把这个问题捋清楚。核心问题大概率是块的层级关系和模板继承/引入的逻辑没对应上——如果只是在子模板里定义了controllerContent块，但这个块不在正确的继承链里，Nunjucks就找不到该填充的位置。

下面我给你两种可行的解决方案，你可以根据自己的场景选择：

方案1：用宏（Macro）实现组件内容传递（推荐用于可复用组件） #

宏是Nunjucks里做组件化的最佳方式之一，它可以直接接收内容参数，避免块嵌套的继承问题。

1.1 定义Controller组件宏 #

修改components/controller.html.njk为宏结构：

<!-- components/controller.html.njk -->
{% macro controller(content) %}
<div class="controller">
  <h3>Controller 容器</h3>
  <!-- 直接渲染传入的内容，safe过滤器确保HTML被正确解析 -->
  {{ content | safe }}
</div>
{% endmacro %}

1.2 在布局中引入宏并预留块 #

修改layouts/layout.html.njk，导入宏并定义可覆盖的块：

<!-- layouts/layout.html.njk -->
<!-- 导入controller宏 -->
{% import "components/controller.html.njk" as components %}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Nunjucks测试页面</title>
</head>
<body>
  <!-- 定义controller块，默认渲染空内容的组件 -->
  {% block controller %}
    {{ components.controller('') }}
  {% endblock %}

  <!-- 主内容块 -->
  {% block main %}{% endblock %}
</body>
</html>

1.3 在子模板中填充内容 #

修改index.html.njk，继承布局并覆盖controller块：

<!-- index.html.njk -->
{% extends "layouts/layout.html.njk" %}

{% block controller %}
  <!-- 再次导入宏（或者在布局里全局导入），传入自定义内容 -->
  {% import "components/controller.html.njk" as components %}
  {{ components.controller('
    <p>这是我要显示在controller里的自定义内容！</p>
    <ul>
      <li>列表项1</li>
      <li>列表项2</li>
    </ul>
  ') }}
{% endblock %}

{% block main %}
  <p>这是页面的主内容</p>
{% endblock %}

方案2：用嵌套块+模板继承实现 #

如果你一定要用块的方式，需要确保controllerContent块在继承链中能被正确覆盖。关键是让子模板能直接控制组件的块内容：

2.1 定义带块的Controller组件 #

components/controller.html.njk保持块定义：

<!-- components/controller.html.njk -->
<div class="controller">
  <h3>Controller 容器</h3>
  {% block controllerContent %}{% endblock %}
</div>

2.2 在布局中预留Controller块 #

修改layouts/layout.html.njk，把controller组件放在可覆盖的块里：

<!-- layouts/layout.html.njk -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Nunjucks测试页面</title>
</head>
<body>
  <!-- 定义controller块，默认引入空内容的组件 -->
  {% block controller %}
    {% include "components/controller.html.njk" %}
  {% endblock %}

  {% block main %}{% endblock %}
</body>
</html>

2.3 在子模板中覆盖Controller块并填充内容 #

修改index.html.njk，覆盖controller块的同时重新定义controllerContent：

<!-- index.html.njk -->
{% extends "layouts/layout.html.njk" %}

{% block controller %}
  <!-- 重新引入组件，然后在它的上下文里定义controllerContent块 -->
  {% include "components/controller.html.njk" %}
  {% block controllerContent %}
    <p>这是通过嵌套块填充的controller内容！</p>
    <div class="custom-content">自定义内容区域</div>
  {% endblock %}
{% endblock %}

{% block main %}
  <p>页面主内容</p>
{% endblock %}

为什么你的代码没生效？ #

我猜你之前的写法可能是在布局里直接include了controller组件，然后在子模板里单独写了{% block controllerContent %}——但这种情况下，子模板的controllerContent块和include的组件里的块不在同一个上下文里，Nunjucks无法把内容关联起来，所以就不会显示。

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