Express/Jade 中的相对链接

Question

我正在尝试让我的 Jade 模板编写一个相对于当前 URL 的超链接 (<a>)。

例如，我的视图是从http://localhost/cats 调用的，它看起来像这样：

extends layout

block content
  a(href='fluffy') Fluffy

点击链接后，我会转到http://localhost/fluffy，而不是http://localhost/cats/fluffy

我尝试过的事情：

• a(href='./fluffly')
• a(href='\\fluffy')
• a(href='/fluffy')

几乎唯一有效的方法就是写出绝对路径，例如a(href='cats/fluffy')。当然有更好的方法来做到这一点。

Answer 1

正如您已经注意到的那样，当您打开 /cats 时，可以预期到 fluffy 的相对链接会将您引导至 /fluffy :)

背景知识：Express 的默认行为是将/cats 和/cats/ 视为相同，并且都会触发相同的路由。

您要么在创建链接（尤其是相对链接）时考虑到这一点，要么告诉 Express 将它们视为两条独立的路线：

app.enable('strict routing');

app.get('/cats/', function(req, res) {
  ...
});

这将匹配/cats/，但不匹配/cats。当然，当你在路由定义中去掉尾部斜杠时，这种行为会被逆转。

Answer 2

如果您使用的是gulp-jade，请将gulp-data 添加到组合中并使用以下代码：

var jade = require('gulp-jade');
var data = require('gulp-data');

gulp.src('**/*.jade')
  .pipe(data(function (file) {
    var relativePath = file.history[0].replace(file.base, ''); //e.g. about/index.jade
    var depth = (relativePath.match(/\//g) || []).length; //e.g. 1
    var relativeRoot = new Array(depth + 1).join( '../' ); //e.g. ../
    return {
      relativeRoot: relativeRoot
    };
  }))
  .pipe(jade())

这将在您的jade 模板中为您提供一个relativeRoot，它本质上是：<nothing> 或../ 重复的次数与其相对于基本文件夹的嵌套目录数一样多。

然后，在您的模板中：

link(rel='stylesheet', href= relativeRoot + 'assets/main.css')

我不完全确定 file.history 的生成位置/方式，但在我的情况下，[0] 指向原始文件名（其磁盘上的绝对路径）