如何将 JSON 包集成到 Jade 模板中？

Question

我可能遗漏了一些明显的东西，但我是这个工作流程的新手。我有一个 Express 应用程序设置，我使用 Jade 作为模板引擎。我正在尝试使用一个名为“gulp-bundle-assets”的工具，它将我的所有脚本捆绑在一起，并在名称中使用哈希输出它们（我假设避免缓存问题）。它还包括一个 JSON 文件，该文件应该用于将脚本集成到您的应用程序中。它看起来像这样：

{
  "main": {
    "styles": "<link href='main-8e6d79da08.css' media='screen' rel='stylesheet' type='text/css'/>",
    "scripts": "<script src='main-5f17cd21a6.js' type='text/javascript'></script>"
  },
  "vendor": {
    "scripts": "<script src='vendor-d66b96f539.js' type='text/javascript'></script>",
    "styles": "<link href='vendor-23d5c9c6d1.css' media='screen' rel='stylesheet' type='text/css'/>"
  }
}

如何在我的 Jade 模板中包含这些数据？我看到了一个用于编译 Jade 模板的实用程序，它可以进行变量插值，这是处理它的最佳方法，还是 Jade 中有原生的东西？

Answer 1

当您在 NodeJS Express 服务器中使用 JADE 时，您可能需要将数据发送到您的视图。我想这是你需要的。由于您的数据是 JSON 格式，您需要使用 JSON 方法将您的 JADE 模板视图转换为清晰的格式。

尝试下一个示例代码：

var express = require('express');
var bodyParser = require('body-parser');
var path = require('path');

let port = process.env.PORT || 3030;

var app = express();

app.set('views', path.join(__dirname, 'templates'));
app.set('view engine', 'jade');

app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.static(path.join(__dirname, 'public')));

app.get('/', function(req, res){
    let jsonFile = require('./public/jsondata.json');
    let jsonData = JSON.stringify(jsonFile);
    let json = JSON.parse(jsonData);
    let mStyles = json.main.styles; //You get your main styles
    res.render('index', { mainStyles: mStyles });
}).listen(port, function(){
    console.log('Listening on' + port);
});

您的 JADE 模板位于 templates 文件夹中，内容如下：

html(lang="en")
    head
        meta(charset="utf-8")
        #{mainStyles}
        title Hello World

您将 mainStyles 变量传递给 JADE 模板文件。

不要忘记自定义您的 JSON 文件位置。