Express/Jade中的相對鏈接

我試圖讓我的Jade模板相對於當前URL編寫超鏈接（<a>）。Express/Jade中的相對鏈接

例如，我的觀點是從http://localhost/cats調用，它看起來像這樣：

extends layout 

block content 
    a(href='fluffy') Fluffy

當鏈接被點擊，就帶我去，而不是http://localhost/cats/fluffy

事情我已經試過：

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

就有關工作進行寫出的絕對路徑，像a(href='cats/fluffy')的唯一的事情。當然有更好的方法來做到這一點。

來源

2013-07-12 Travis

我無法複製它，所以你確定你不打開'/貓'？ Express在默認情況下並不關心尾部斜槓，並將'/ cats'和'/ cats /'視爲相同（因此它們都會觸發相同的路由）。 – robertklep

你在使用''標籤嗎？如果是，那麼價值是什麼？ – gustavohenke

@robertklep我確定。 @gustavohenke我不使用''標籤..也許我應該。實際上，我只是檢查了HTML輸出，並且它以'正確顯示。不幸的是，當我點擊它，它仍然會http：// localhost /蓬鬆，即使當前頁面是http：// localhost/cats – Travis

正如你已經注意到自己，當你打開/cats這是可以預料到的是，以fluffy相對鏈接會導致你/fluffy :)

一點背景：快遞的默認行爲是治療/cats和/cats/如同一樣，兩者都會觸發相同的路線。

你要麼當你建立鏈接（尤其是相對鏈接），以考慮到這一點，或者告訴快遞將它們視爲兩個獨立的路線：

app.enable('strict routing'); 

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

這將匹配/cats/，但不/cats。當然，當你離開路徑定義中的尾部斜線時，這種行爲將被顛倒。

來源

2013-07-12 20:04:54 robertklep

如果您使用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]指出，原來的文件名（與磁盤上的絕對路徑）

來源

2014-11-12 16:37:13

聰明！爲我工作得很好。不過，我一定要評論這一點，因爲這不是我期望的方法，從模板的角度來看，'relativeRoot'變量似乎無處不在。 – peteorpeter

對於那些希望_all_他們的url是相對的，即使depth = 0：var relativeRoot = depth === 0？ './'：new Array（depth + 1）.join（'../'）;' – peteorpeter

Express/Jade中的相對鏈接

回答

相關問題