用不同的数据编译Jade部分

Question

我正在使用gulp编译静态网站的Jade。 有一个gulp任务可以将所有的jade文件编译成HTML文件。

我正在创建一个10步骤的过程，每个HTML页面带有“上一个”和“下一个”按钮

我想创建如下的局部

a(href="#{prev}") Back
a(href="#{next}") Continue

对于每一页，上一个和下一个值都会更改。 有没有一种方法可以使用自定义的prev和next值从每个页面的翡翠中调用局部？

我假设，就像您如何在把手模板中绑定数据并进行编译一样，我可以为每个页面使用不同的locals对象，并使用不同的数据呈现相同的部分。

我是在处理这个错误，还是玉器有可能？ 我看到的所有答案都与在Jade中使用express有关。 我只是在创建一个静态网站，而实际上只是HTML。

Answer 1

如果您通过include将更大的Jade模板包含在局部中，那么只需更改要渲染的更大模板的局部变量即可。

gulp.src('./templates/template-that-includes-a-partial.jade')
  .pipe(gulpJade({
    locals: {
      prev: 'some value',
      next: 'some other value'
    }
  })
  .dest('./build/templates/');

这样的事情应该起作用。 局部视图应该具有与包含局部视图的父视图相同的本地权限。

Answer 2

我发现您可以在父模板中使用-定义Jade变量，并使用此数据调用局部变量

- var prev = "a.html"
- var next = "b.html"

include partials/_var

然后在部分中使用插值以使用相应的值

a(href="#{prev}") Prev
a(href="#{next}") Next

这样，我可以在不同的父模板中调用同一部分，但为每个页面传递不同的值。