Nunjucks嵌套块

Question

我刚开始使用Nunjucks并且无法使嵌套块工作。我有一个带有一些代码的控制器块，其中的内容应该是嵌套的。但是当我在模板文件中指定内容时，它并不会出现在Nunjucks的HTML输出中。以下是文件（简化）：

部件/ controller.html.njk：

<div id="controller">
    {% block controllerContent %}
    {% endblock %}
</div>

布局/ layout.html.njk：

{% include "components/controller.html.njk" %}

index.html.njk：

{% extends "layouts/layout.html.njk" %}

{% block controllerContent %}
  CONTROLLER CONTENT HERE
{% endblock %}

如何让controllerContent中指定的内容显示在控制器内？

Answer 1

为什么使用hml.njk扩展程序？其中一个应该工作。我倾向于使用.njk进行dev阶段，gulp将它们输出为html in dist。

要解决您的问题 - 您实际上在这里有不同的解决方案：

1. 让控制器内容全局可用（每个扩展layout.njk的页面都有）

<强>布局/ layout.njk：

<div id="controller">
  {% include "components/controller.njk" %}
</div>

index.njk （或任何其他相关网页）

{% extends layouts/layout.njk %}

components / controller.njk：（如果你只把它包含在内，它甚至不必被定义为块 - 它可以是纯HTML）

<ACTUAL CONTROLLER CONTENT HERE>

1. 其他情况是，如果您只想让主页（index.html）拥有此代码，而其他页面则不会

<强>布局/ layout.njk：

{% block base %}
{% endblock %}

index.njk

{% extends layouts/layout.njk %}

{% block base %}
  <div id="controller">
    {% include "components/controller.njk" %}
  </div>
{% endblock % }

<强>部件/ controller.njk：

<ACTUAL CONTROLLER CONTENT HERE>

实际上有更多可能的变化（这完全取决于项目的具体情况），但您需要了解继承的工作原理。一旦你习惯它，它会容易得多。我一开始也有调整阶段。

希望这会有所帮助。