如何使用Swig多个部分?

时间:2014-03-30 13:14:20

标签: node.js express swig-template

Swig在我的视图中不渲染部分内容。如何以正确的方式通过block?什么文件应该扩展什么?

我有这样一种观点结构:

// files
header.html   // <- partial
header_logo.html   // <- partial
layout.html   // <- layout
index.html   // <- page

index.html 是Swig呈现的内容。它看起来像这样:

{% extends 'layout.html' %}
{% extends 'header.html' %}
{% extends 'header_logo.html' %}

{% block head %}
    {% parent %}
    <link href="/assets/css/index/index.css" rel="stylesheet">
{% endblock %}

{% block content %}

     {% block header_logo %}{% endblock %} // <- This one doesn't render

     .... html content code goes here ....
{% endblock %}

layout.html 如下所示:

<!DOCTYPE html>
<html lang="en">
  <head>
    {% block head %}
        <link href="/assets/css/index/layout.css" rel="stylesheet">
    {% endblock %}
  </head>
  <body>

    {% block header %}{% endblock %}

    {% block content %}{% endblock %}  

  </body>
</html>

header.html 看起来像这样:

{% extends 'layout.html' %}

{% block header %}
    ... html code goes here ...
{% endblock %}

header_logo.html 看起来像这样。而且这个没有渲染。

{% extends 'layout.html' %}

{% block header_logo %}
    ... html code goes here ...
{% endblock %}

2 个答案:

答案 0 :(得分:7)

每个文件只能扩展一个模板。你想做的就是这样......

  • index.html扩展header_logo.html
  • header_logo.html扩展header.html
  • header.html扩展layout.html

或者,您希望在header_logo模板中包含 index.html,而不是从中扩展。做这样的事情你可能会更好......

index.html

{% extends 'layout.html' %}

{% block header %}{% include 'header.html' %}{% end block %}
{% block content %}
    {% include 'header_logo.html' %}
...
{% endblock %}

答案 1 :(得分:0)

使用views文件夹(ExpressJS)下的文件夹

我在views文件夹下创建了一个partials文件夹。

然后从reports.swig模板中引用这样的局部视图。

{% extends 'layout.swig' %}

  {% block content %}

    {% for report in reports %}
      {% include './partials/displayReports.swig' %}
    {% endfor %}

{% endblock %}

感谢Paul的回答!