Nunjucks嵌套块

Question

我刚刚开始使用Nunjucks，在使用嵌套块时遇到了困难。我有一个带有一些代码的控制器块，其中应该嵌套内容。但是，当我在模板文件中指定内容时，它不会出现在来自Nunjucks的HTML输出中。以下是文件(简化)：

组件/components er.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，并在dist中将它们作为html输出。

为了解决您的问题，您实际上在这里有不同的解决方案：

1. 拥有全局可用的控制器内容(扩展layout.njk的每个页面都有)

layouts/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)具有此代码，而其他页面则不使用此代码

layouts/layout.njk:

{% block base %}
{% endblock %}

index.njk

{% extends layouts/layout.njk %}

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

components/controller.njk:

<ACTUAL CONTROLLER CONTENT HERE>

实际上，还有更多可能的变体(这都取决于项目的具体情况)，但您需要了解继承是如何工作的。一旦你习惯了，那就容易多了。我在开始的时候也做过调整。

希望这能有所帮助。