Question

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

我正在制作一个10步骤的流程，每个流程都是带有“上一个”和“下一个”按钮的单页HTML

我想创建一个像下面这样的部分

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

对于每个页面，prev和next值都会更改。有没有办法从每个页面的玉内调用自定义上一个和下一个值的部分？

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

我接近这个错误还是这个玉有可能吗？我能看到的所有答案都与使用快递和Jade有关。我只创建一个静态网站，仅仅是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变量，并使用此数据调用partial

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

include partials/_var

然后在partial中使用插值来使用相应的值

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

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

用不同的数据

2 个答案: