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())

这会在relativeRoot模板中为您jade提供基本上：<nothing>或../重复次数与其目录数量相同的次数相对于基础文件夹嵌套。

然后，在您的模板中：

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

我不完全确定file.history在哪里/如何生成，但在我的情况下[0]指向原始文件名（在磁盘上有绝对路径）

Express / Jade中的相对链接

2 个答案: