express - Jade 如何使用从路由传递的变量执行条件 css

Question

我正在尝试将变量“天气”传递给我的 Jade 模板，并根据是否下雨、晴天等情况，背景会发生变化。

这是我的路线 index.js 文件

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' , ip: req.ip, weather: 'rain'});
});

module.exports = router;

这是我的 index.jade 文件中的部分，带有我试图通过的条件

//styles
    style.
      .intro {
      if weather == 'rain'
        background: url(../images/rain.jpg) no-repeat bottom center scroll;
      }

这是我刚刚更改了没有条件的背景并且它有效的地方

//styles
    style.
      .intro {
      background: url(../images/rain.jpg) no-repeat bottom center scroll;
      }

我有最新版本的翡翠，我确保缩进，所以我不太确定我的语法哪里错了

Answer 1

不幸的是，您描述的方法无法做到这一点。正如这个 SO answer中style所解释的，Pug 不会解释内容，而只是以纯文本格式保持原样。这意味着任何条件逻辑都需要发生在页面的实际正文中。

您可以通过创建两个（或多个）名为.rainyand的类来轻松解决此问题，并在该部分.clear中静态定义它们。style然后，在正文中，您可以.intro根据 的值向元素动态添加类weather。