NodeJs：根据路由参数加载不同的 CSS

Question

我环顾四周，但我什至不确定我想要的是否可行。

app.js

...
var routes = require('./routes/index');
...
app.use('/', routes);
...

index.js

/* GET home page. */
router.get('/', function(req, res, next) {
    res.render('index', { 
        title: 'Test',
        headersheet: 'header',
        mainsheet: 'devTest',
        navbar: 'nav_bar',
        mainscript: 'devTest',
    });
});

那么，我的layout.jade

doctype html
html
    head
        title= title
        link(rel='stylesheet', href='/stylesheets/global.css')
        link(rel='stylesheet', href='/stylesheets/#{headersheet}.css')
        link(rel='stylesheet', href='/stylesheets/#{mainsheet}.css')
        link(rel='stylesheet', href='/stylesheets/#{navbar}.css')
    body
        block content
        script(src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js')
        script(src='javascripts/#{mainscript}.js')

index.jade

extends layout

block content   
    include nav_bar.jade

    #page_header_fr

基本上我想要的是 #{mainsheet}.css 变成 devTest.css

但是当页面加载时，我在控制台中看到的是一条消息，告诉我无法找到资源 undefined.css。现在，我从中了解到参数（headersheet、mainsheet、navbar 等）没有正确传输。但是，页面标题显示得很好。

甚至可以这样做吗？

Answer 1

试试这个（将“”添加到您的主表、导航栏和主脚本）：

index.js

router.get('/', function(req, res, next) {
    res.render('index', { 
        title: 'Test',
        headersheet: 'header',
        "mainsheet": 'devTest',
        "navbar": 'nav_bar',
        "mainscript": 'devTest',
    });
});

应该可以。

NodeJs：根据路由参数加载不同的 CSS

NodeJs: Load different CSS depending on routes parameters

node.js

pug