Jade模板，包含文件中的变量作用域

Question

Jade模板，包含文件中的变量作用域

9

我正在使用Jade（不用Express，只用于静态HTML模板）- 我理解它可以创建部分视图，这意味着作用域不是问题，但事实并非如此，我找不到任何参考资料。

master.jade

!!! 5
html
  block vars
  - var slug= 'home'
  head
    block pagetitle
      title Static HTML
    link(rel='stylesheet', href='css/styles.css')
  body(class= slug)
    .wrapper
      include includes/header

includes/header.jade

.header 
  ul
    li(class= slug)

我尝试过包括#{slug}在内的不同语法变体，但总是在includes/header.jade文件中出现“slug未定义”的错误 - 是否有可能实现这一点？

编辑：根据下面评论中Dave Weldon给出的答案，当包含在master.jade中时，该变量是可用的，但我的构建命令编译了所有jade文件，包括它们自己的includes，此时变量当然未定义。

- A Macdonald

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- David Weldon · Accepted Answer

你可以通过像这样的mixin来实现这个功能：

master.jade

include includes/header

!!!
html
  block vars
  - var slug= 'home'
  head
    block pagetitle
      title Static HTML
    link(rel='stylesheet', href='css/styles.css')
  body(class= slug)
    .wrapper
      mixin header(slug)

includes/header.jade

mixin header(klass)
  .header
    ul
      li(class= klass)

编译后：

<!DOCTYPE html>
<html>
  <head>
    <title>Static HTML</title>
    <link rel="stylesheet" href="css/styles.css">
  </head>
  <body class="home">
    <div class="wrapper">
      <div class="header">
        <ul>
          <li class="home"></li>
        </ul>
      </div>
    </div>
  </body>
</html>