如何根据变量渲染块？哈巴狗 (翡翠)

Question

第一次使用哈巴狗。

情况是所有页面都使用相同的页眉和页脚。

主要-layout.pug:

<header>
   h1 Some text
   h2 Second text
</header>
    
<footer>
   h3 Third text
</footer>

但是在一个页面上，我需要更改一半的页眉，其余的保持不变：

<header>
   h1 Some text
     div
      span Span text
</header>

<footer>
   h3 Third text
</footer>

我该怎么做？

最后一页有一个名字map.pug 并且只有主页面继承。

map.pug:

extends ../layouts/main-layout

Answer 1

将它分成几个文件，例如带有版本后缀。一个 parent 文件 (header.pug) 指向几个孩子并由传递的变量决定或在没有给出任何内容时采用默认值 (header-v1.pug)。

|-- 部分
|-- |-- footer.pug
|-- |-- 页脚-v1.pug
|-- |-- 页脚-v2.pug
|-- |-- header.pug
|-- |-- header-v1.pug
|-- |-- header-v2.pug
|-- |-- header-v3.pug
|-- default.pug
|-- main-layout.哈巴狗 |-- map.pug

main-layout.哈巴狗

//- doctype, meta, etc ...

include partials/header

block content

include partials/footer-v1

header.pug

if headerVersion === "v2"
    include header-v2
else if headerVersion === "v3"
    include header-v3
else
    include header-v1

header-v1.pug

header
   h1 Some text
   h2 Second text

header-v2.pug

header
   h1 Some text
     div
      span Span text

渲染调用可以传递headerVersion变量：

return res.render('default.pug', {
    // nothing specifed: v1 is taken as default
});

return res.render('map.pug', {
    headerVersion: 'v2'
});

如何根据变量渲染块？哈巴狗 (翡翠)

How render a block depending on a variable? PUG (JADE)

pug