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

【问题标题】：Express Set up conditional loading of stylesheets based on current page being loadedExpress 根据正在加载的当前页面设置样式表的条件加载
【发布时间】：2013-12-07 07:22:20
【问题描述】：

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

【问题讨论】：

标签： javascript html css express conditional-statements

【解决方案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'ed。

【讨论】：

这似乎是个好主意，但我对表达有点陌生。你知道我如何在我的app.js 中说要求或加载我的 css 文件夹吗？
我不明白你的意思:)
在我进行渲染时，Express 如何加载第一部分代码，即 css 文件？
哦，对了，这通常由express.static 处理。有关更多信息，请参阅here。
好的，所以我设置了我的东西并且它可以工作，但是如果我删除|| 'index' 部分，那么cssFile == undefined。为什么？

【解决方案2】：

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

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

【讨论】：

尽管这样可行，但我不想依赖最终的标题字符串，因为与页面标题相比，它是不同的并且可能会改变，而页面标题很可能不会改变。
这只是一个示例，您可以将其更改为您的变量