9

我正在使用 Jade(没有 Express,仅用于静态 HTML 模板) - 我理解它能够创建部分,这意味着范围不是问题,但这似乎不是这种情况,我找不到对此用途的参考-案子。

玉大师

!!! 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

包括/header.jade

.header 
  ul
    li(class= slug)

我已经尝试过语法变体,包括#{slug}并且总是在文件中得到错误“slug is not defined” includes/header.jade——可以这样做吗?

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

4

1 回答 1

16

您可以使用这样的mixin来完成此操作:

玉大师

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)

包括/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>
于 2013-02-23T00:52:25.183 回答