如何在 Swig 中使用多個部分？

Question

在我看來，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 %}

Answer 1

每個文件只能擴展一個模板。 你想要做的是這樣的......

index.html擴展了header_logo.html
header_logo.html擴展了header.html
header.html擴展了layout.html

或者，您似乎希望在index.html模板中包含header_logo ，而不是從中擴展。 你最好做這樣的事情......

索引.html

{% extends 'layout.html' %}

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

Answer 2

使用視圖文件夾下的文件夾（ExpressJS）

我在views文件夾下創建了一個partials文件夾。

然后從reports.swig 模板中引用這樣的部分視圖。

{% extends 'layout.swig' %}

  {% block content %}

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

{% endblock %}

感謝保羅的回答！

如何在 Swig 中使用多個部分？

問題描述

2 個解決方案

解決方案1
8 已采納 2014-03-30 14:15:43

解決方案2
0 2016-12-25 21:59:55

使用視圖文件夾下的文件夾（ExpressJS）

如何在 Swig 中使用多個部分？

問題描述

2 個解決方案

解決方案1 8 已采納 2014-03-30 14:15:43

解決方案2 0 2016-12-25 21:59:55

使用視圖文件夾下的文件夾（ExpressJS）

解決方案1
8 已采納 2014-03-30 14:15:43

解決方案2
0 2016-12-25 21:59:55