Question

我正在使用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

包括/ header.jade

.header 
  ul
    li(class= slug)

我尝试过包含#{slug}的语法变体，并且总是在includes/header.jade文件中得到“slug未定义”的错误 - 是否可以这样做？

编辑：所以Dave Weldon在下面的评论中给出的答案是该变量在master.jade中包含但是我的构建命令编译为所有玉文件包括自己的包含，此时变量当然没有定义。

Answer 1

您可以使用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)

包括/ 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>

翡翠模板，可变范围包括

1 个答案: