项目结构

源文件夹结构如下：

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和。中使用不同的extend语句 second.jade，这不是一个真正的问题，而是很讨厌。

first.jade：

extends templates/layout.jade

second.jade：

extends ../templates/layout.jade

可能的解决方案（非常不合适）

问题一的一个解决方案可能是在head.jade中使用base tag，如下所示：

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

这很有效，但只能在我的机器上运行，并且只有当我将项目文件夹保留在当前位置时才有效。这对其他人不起作用，因为在他们的机器上找不到基本标签中使用的路径。

问题

有没有一些聪明的方法来解决问题一只用玉？问题二的奖金......

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

Answer 1

这就是我提出的：将基础标记与玉变量结合使用。

head.jade现在包含一个包含变量的块，用于设置基本路径的默认值为＆＃39;。＆＃39;：

block basetag
  -var base = '.'

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

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

对于子目录中的所有模板，基本变量可以设置为＆＃39; ../'像这样：

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

Answer 2

我的功能是通过将斜杠与当前路径分开来建立相对路径。

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

visit my repo

jade部分地址如何从两个目录和子目录中的模板相对链接？

项目结构

此方法的问题

可能的解决方案（非常不合适）

问题

2 个答案: