Question

编辑：我修改了我的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;时，我不完全确定出了什么问题。任何帮助将不胜感激！

Answer 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编辑。

Answer 2

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

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

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

2 个答案: