用不同的数据编译 Jade 部分答案

【问题标题】：Compiling Jade partial with different data用不同的数据编译 Jade 部分
【发布时间】：2015-06-11 18:09:20
【问题描述】：

我正在使用 gulp 为静态网站编译 Jade。有一个单一的 gulp 任务将所有的翡翠文件编译成 HTML 文件。

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

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

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

对于每一页，prev 和 next 值都会发生变化。有没有办法用自定义的 prev 和 next 值从每个页面的玉中调用部分？

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

我是不是在接近这个错误，或者这对玉来说是可能的吗？我能看到的所有答案都与在 Jade 中使用 express 有关。我只是在创建一个静态网站，实际上只是 HTML。

【问题讨论】：

你是如何在你的翡翠模板中加入部分的？ include?

标签： node.js pug gulp template-engine

【解决方案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/');

类似的东西应该可以。部分视图应该可以访问与包含它的父视图相同的局部变量。

【讨论】：

所以在jade 中，您可以使用locals["prev"] 和locals["next"] 之类的方式访问这些本地人？
实际上在 Jade 中，您可以直接引用 locals 选项中指定的任何变量。 div#myDiv Prev value is #{prev}

【解决方案2】：

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

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

include partials/_var

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

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

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

【讨论】：

您可以在本地为父模板定义 prev 和 next 并且子模板可以访问它们就好了。