Express根据正在加载的当前页面设置样式表的条件加载

时间:2013-12-07 07:22:21

标签: javascript html css express conditional-statements

编辑:我修改了我的app.js部分,以便我可以传入文件并执行类似我对标题所做的操作,但由于某种原因它无效。

我目前有header.ejs页面在每个页面上加载索引样​​式表。

<head>
    <title><%= title %></title>
    <link rel='stylesheet' href='public/css/style.css'>
    <link rel='stylesheet' href='public/bower_components/bootstrap/dist/css/bootstrap.min.css'>
    <link rel='stylesheet' href='public/css/index.css'>
</head>

我希望做的是为我的所有样式表设置一个条件加载系统。使用在该页面上调用res.render()时传递的参数。可以设置类似于我在下面试过的东西吗?

<link rel="stylesheet" href="<%= cssFile1 %>">

app.js

app.get('/', function(req, res, index-styles, index-script) {
    var pageTitle = getPageTitle('Home');
    res.render('index', {
        title: pageTitle,
        cssFile1: index-styles,
        script1: index-script
    });    
});

/routes/index.js

exports.index = function(req, res, index-styles, index-script) {
    res.render('index', {
        title: 'Home',
        cssFile1: index-styles,
        scriptFile1: index-script
    });
};

我设法用页面的标题来设置它,但我是Express的新手,当我做&lt;%= cssFile1%&gt;时,我不完全确定出了什么问题。任何帮助将不胜感激!

2 个答案:

答案 0 :(得分:1)

如果您有不同页面的单独CSS文件,我会使用一个设置,其中每个页面特定的CSS文件将存储在页面特定的文件(或目录)中:

public/css/index.css  // the 'default' file
public/css/home.css   // for the 'home' page
public/css/login.css  // for the 'login' page
...

然后,在render调用中,我将传递应加载的CSS文件的名称:

res.render('index', { cssFile : 'login' });

在您的EJS模板中,如果未传递cssFile属性,请使用默认值:

<% var cssFile = cssFile || 'index'; %>
<link rel="stylesheet" href="public/css/<%= cssFile %>.css">

特定于每个页面的任何其他CSS文件都可以从特定于页面的CSS文件中@import编辑。

答案 1 :(得分:0)

你可以使用javascript输出你的条件css

if(document.title.indexOf("YOUR TITLE STRING HERE") >= 0){ 
INSERT YOUR CSS LINK
}