Templates jade如何部分寻址目录和子目录中模板的相对链接？

我使用with生成一个静态html原型，但与位于子目录中的jade模板中的css文件等资产的相对链接存在问题

由于这是一个原型，团队成员应该能够快速查看

• 这些文件只需使用浏览器即可使用，无需进一步配置
• 没有使用服务器
• 这些文件应该可以在不同的机器上查看

项目结构 源文件夹结构如下所示：

src
|
|--first.jade
|
|--subdirectory
|  `--second.jade
|
|--templates
|  |--layout.jade
|  `--head.jade
|
`--css
   `--styles.css

extends ../templates/layout.jade
block basetag
  -var base = '../'

第一块是翡翠，第二块是翡翠

layout.jade部分head.jade，其中包含指向styles.css的相对链接：

head
  link(rel='stylesheet', href='css/styles.css')

gulp生成此结构（这是我希望项目的结构，因此不应更改）：

这种方法的问题

css的相对链接不适用于second.html 在子目录中。呈现的html中的链接是

但要想发挥作用，必须做到这一点：

我必须在first.jade和 第二，翡翠，这不是一个真正的问题，但相当烦人

第一，翡翠：

扩展模板/布局。jade

第二，杰德：

扩展../templates/layout.jade

可能的解决方案（非常不合适） 解决第一个问题的一个办法是在脑袋里放一块玉石，如下所示：

src
|
|--first.jade
|
|--subdirectory
|  `--second.jade
|
|--templates
|  |--layout.jade
|  `--head.jade
|
`--css
   `--styles.css

extends ../templates/layout.jade
block basetag
  -var base = '../'

base（href='/Users/myusername/build/）

这非常有效，但只有在我的机器上，并且只有在我将项目文件夹保留在当前位置的情况下。这对其他任何人都不起作用，因为在他们的计算机上找不到基本标记中使用的路径

问题: 有什么聪明的方法可以解决问题一，仅仅使用玉石？问题二的奖金

---

在我看来，手头的问题应该是一个非常常见的问题，因此我可能在文档或其他文件中忽略了它。

这就是我想到的：将base标记与jade变量结合使用

jade现在包含一个块，其中包含一个变量，用于设置默认值为“.”的基本路径：

block basetag
  -var base = '.'

head
  base(href='#{base}')
  link(rel='stylesheet', href='css/styles.css')

默认情况下，这适用于根目录中的所有模板

对于子目录中的所有模板，基本变量可以设置为“../”，如下所示：

src
|
|--first.jade
|
|--subdirectory
|  `--second.jade
|
|--templates
|  |--layout.jade
|  `--head.jade
|
`--css
   `--styles.css

extends ../templates/layout.jade
block basetag
  -var base = '../'

---

我得到了一个函数，通过将斜线和当前路径分开来生成相对路径

  -
    // Count depth directory hierarchy
    var depth = (relativePath.match(/\//g) || []).length;
    var relativeRoot = new Array(depth + 1).join( '../' );