使用小胡子模板在 Express 中提供静态文件

Question

我正在尝试从 Express 提供一个包含静态胡子文件的文件夹，但似乎无法弄清楚如何让它工作。假设我只有一个数据对象，例如

{
  a: 'Hello :)'
  b: 'Goodbye :('
}

还有两个文件，

public/a.html

<div>{{a}}</div>

public/b.html

<div>{{b}}</div>

我如何才能快速设置为任意数量的静态 html 文件提供服务并仅用我的一个大对象替换模板化部分？谢谢！

Answer 1

静态文件通常只在发送给用户之前不以任何方式处理时才称为 static。

您要实现的是一个典型的模板系统。您可以按照 plugin:

中的说明进行操作

var mustacheExpress = require('mustache-express');

// Register '.html' extension with The Mustache Express
app.engine('html', mustacheExpress());

app.set('view engine', 'mustache');
app.set('views', __dirname + '/views'); // you can change '/views' to '/public',
    // but I recommend moving your templates to a directory
    // with no outside access for security reasons

app.get('/', function (req, res) {
    res.render('a');
});

也可以考虑使用 Handlebars, it's often more convenient to use than Mustache. You can find a list of differences in this question。

Answer 2

您不应将 html 文件包含在 public 目录中。 Public 目录应仅包含图像、javascript 和 css 文件。

虽然构建 node/express 应用程序的方法有很多，但您可以使用 Express Generator 找到一种好方法。

http://expressjs.com/en/starter/generator.html

如果您使用它，它会为您创建应用程序结构，清楚地说明您应该如何保存静态文件。

Answer 3

您可以像在 express 中使用 pug 一样使用 mustachejs，方法是将 mustache 设置为 view engine 并定义其工作方式，如下代码所示：

//required files
const fs = require("fs")
const mustache = require("mustache")

// To set functioning of mustachejs view engine
app.engine('html', function (filePath, options, callback) { 
    fs.readFile(filePath, function (err, content) {
        if(err)
            return callback(err)        
        var rendered = mustache.to_html(content.toString(),options);
        return callback(null, rendered)
    });
  });

// Setting mustachejs as view engine
app.set('views',path.join(__dirname,'views'));
app.set('view engine','html');

//rendering example for response
app.get('/',(req,res)=>{        
    res.render('index',{data:'Sample Data'});
});

Answer 4

我稍微修改了 zlumer 的答案，下面的代码对我来说工作正常。

const express = require('express');
const app = express();
const mustacheExpress = require('mustache-express');

app.engine('html', mustacheExpress());

app.set('view engine', 'html');
app.set('views', __dirname + '/views');

app.get('/', function(req, res) {
  const data = {
    hello: 'world',
    foo: 'bar'
  };

  res.render('test', data);
});

app.listen(3000, () => {
  console.log('Server running at http://localhost:3000/');
});

请检查https://github.com/HemingwayLee/sample-mustache-express 并随意克隆和修改它。

使用小胡子模板在 Express 中提供静态文件

Serving static files in Express with mustache templating

javascript

middleware

node.js

mustache

express