玉如何从目录和子目录中的模板中找到相对链接？答案

【问题标题】：How can a jade partial address relative links from templates within both directories and subdirectories?玉如何从目录和子目录中的模板中找到相对链接？
【发布时间】：2015-02-19 18:25:27
【问题描述】：

我正在使用jade 和gulp 来生成静态html 原型，但是在子目录中的jade 模板中指向css 文件等资产的相对链接存在问题。

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

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

项目结构

源码文件夹结构如下：

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

first.jade 和 second.jade 都是extend layout.jade。

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

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

gulp 生成这个结构（这是我希望项目的结构，所以这不应该改变）：

build
|
|--first.html
|
|--subdirectory
|  `--second.html
|
`--css
   `--styles.css

这种方法的问题

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

<link rel="stylesheet" href="css/styles.css">

但它应该是这样才能工作：

<link rel="stylesheet" href="../css/styles.css">
我必须在 first.jade 和 second.jade，这不是一个真正的问题，而是很烦人。

first.jade：

extends templates/layout.jade

second.jade：

extends ../templates/layout.jade

可能的解决方案（完全不适合）

解决问题的一种方法是在 head.jade 中使用 base tag，如下所示：

base(href='/Users/myusername/build/')

这可以完美运行，但仅在我的机器上，并且仅当我将项目文件夹保留在当前位置时。这对其他人不起作用，因为在他们的机器上找不到基本标记中使用的路径。

问题

有没有什么巧妙的方法来解决问题一，只用翡翠？问题二的奖金......

在我看来，手头的问题应该是一个非常普遍的问题，所以我可能在文档或其他内容中忽略了它。

【问题讨论】：

标签： templates pug relative-path subdirectory

【解决方案1】：

这就是我想出的：使用base标签和jade变量结合。

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

block basetag
  -var base = '.'

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

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

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

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

【讨论】：

【解决方案2】：

我得到了将斜线与当前路径分开来创建相对路径的功能。

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

visit my repo

【讨论】：