在Express中使用HTML代替Jade


103

在将Express与Node.JS一起使用时,如何摆脱Jade?我只想使用纯HTML。在其他文章中,我看到人们推荐了app.register(),该版本现已在最新版本中弃用。

Answers:


78

您可以这样进行:

  1. 安装ejs:

    npm install ejs
  2. 将app.js中的模板引擎设置为ejs

    // app.js
    app.engine('html', require('ejs').renderFile);
    app.set('view engine', 'html');
  3. 现在,您可以在路由文件中分配模板变量

    // ./routes/index.js
    exports.index = function(req, res){
    res.render('index', { title: 'ejs' });};
  4. 然后,您可以在/ views目录中创建html视图。


2
我刚刚开始使用node.js。解决方案对我来说还不清楚。我有一个小型的html网站。我需要使用nodemailer通过我的网站发送电子邮件的node.js。我已经安装了所有必需的东西。但是,必须知道app.js文件中应该包含哪些内容才能使我的网站使用express运行
user2457956 '16

4
如何title在html文件中打印变量?
尤达大师

3
如果有人仍想知道如何打印变量(如@MasterYoda所问),则可以在html上打印如下:<%= title%>
Lucas Meine


18

从Express 3开始,您可以简单地使用 response.sendFile

app.get('/', function (req, res) {
  res.sendfile(__dirname + '/index.html');
});)

来自官方的Express API参考

res.sendfile(path, [options], [fn]])

在给定路径下传输文件。

根据文件名的扩展名自动默认Content-Type响应头字段。fn(err)传输完成或发生错误时,将调用回调。

警告

res.sendFile通过http缓存头提供客户端缓存,但不在服务器端缓存文件内容。上面的代码将在每次请求时写入磁盘


2
我相信OP仍希望仅使用常规HTML语法使用某种模板。 sendfile不允许您做任何模板处理,因为它只是从文件发送字节。此外,我建议不要使用sendfile这种方式,因为这意味着您每次遇到请求时都将访问磁盘,这是一个巨大的瓶颈。对于高流量页面,您应该真正进行内存缓存。
josh3736 2013年

1
@ josh3736如果您对OP的意图是正确的,则该问题应该得到改善。您对每个请求都打磁盘是正确的,我会改善答案以警告这一事实。请考虑对您的引擎进行改进,以警告以下内容:如果您实现自定义引擎,则还必须实现捕获功能(如果需要),它不会由express处理。
laconbass

17

在我看来,仅使用ejs之类的功能来读取html文件就有点费力了。我刚刚为HTML文件编写了自己的模板引擎,该引擎非常简单。该文件如下所示:

var fs = require('fs');
module.exports = function(path, options, fn){
    var cacheLocation = path + ':html';
    if(typeof module.exports.cache[cacheLocation] === "string"){
        return fn(null, module.exports.cache[cacheLocation]);
    }
    fs.readFile(path, 'utf8', function(err, data){
        if(err) { return fn(err); }
        return fn(null, module.exports.cache[cacheLocation] = data);
    });
}
module.exports.cache = {};

我将其称为htmlEngine,而您使用它的方式就是说:

app.engine('html', require('./htmlEngine'));
app.set('view engine', 'html');

11

app.register()尚未贬值,app.engine()因为Express 3 更改了处理模板引擎的方式,所以它刚刚重命名为。

Express 2.x模板引擎兼容性要求以下模块导出:

exports.compile = function(templateString, options) {
    return a Function;
};

Express 3.x模板引擎应导出以下内容:

exports.__express = function(filename, options, callback) {
  callback(err, string);
};

如果模板引擎未公开此方法,则说明您还算幸运,该app.engine()方法允许您将任何函数映射到扩展。假设您有一个markdown库并想要呈现.md文件,但是该库不支持Express,则您的app.engine()调用可能类似于以下内容:

var markdown = require('some-markdown-library');
var fs = require('fs');

app.engine('md', function(path, options, fn){
  fs.readFile(path, 'utf8', function(err, str){
    if (err) return fn(err);
    str = markdown.parse(str).toString();
    fn(null, str);
  });
});

如果您正在寻找一个可以使用“纯” HTML的模板引擎,我建议您使用doT,因为它非常快

当然,请记住,Express 3视图模型将视图留给您(或模板引擎)进行缓存。在生产环境中,您可能希望将视图缓存在内存中,这样就不必对每个请求都进行磁盘I / O了。


请看一下我的回答,您的回答完美地解释了如何注册模板引擎,但是有一种更简单的方法来传输纯HTML文件。
laconbass

@ josh3736:您的“极快”超链接在Firefox 41中有效,但在Chromium版本45.0.2454.101 Ubuntu 14.04(64位)中无法运行测试。我想知道为什么。
Lonnie Best


4

要使渲染引擎接受html而不是jade,可以按照以下步骤操作:

  1. 安装巩固痛饮到您的目录。

     npm install consolidate
     npm install swig
  2. 将以下行添加到您的app.js文件中

    var cons = require('consolidate');
    
    // view engine setup
    app.engine('html', cons.swig)
    app.set('views', path.join(__dirname, 'views'));
    app.set('view engine', html');
  3. 在“ views”文件夹中将视图模板添加为.html。重新启动节点服务器,然后在浏览器中启动该应用程序。

尽管这样可以毫无问题地呈现html,但我还是建议您通过学习使用JADE。Jade是一个了不起的模板引擎,学习它可以帮助您实现更好的设计和可伸缩性。


1
Jade唯一真正大的问题是缩进。如果弄错了,代码将无法编译。另外,我想知道为什么Jade除了它唯一要做的就是收缩代码以外的事实……
zapper 2016年

4

首先使用以下行检查模板引擎的兼容版本

express -h

那么您必须从列表中不使用任何视图。选择无视图

express --no-view myapp

现在您可以在公用文件夹中使用所有的html,css,js和图像。



1

考虑到您已经定义了路线或确实知道该怎么做。

app.get('*', function(req, res){
    res.sendfile('path/to/your/html/file.html');
});

注意:由于*接受所有内容,因此必须将此路由放置在所有其他路由之后。


1

由于Jade支持HTML,因此,如果您只想拥有.html ext,则可以执行此操作

// app.js
app.engine('html', require('jade').renderFile);
app.set('view engine', 'html');

那么您只需将视图中的文件从翡翠更改为html。


您是否不必在html标记之前放置“点”或句点?
Gus Crawford


-10

如果要在nodeJS中使用纯HTML,而不使用jade ..或其他任何东西:

var html = '<div>'
    + 'hello'
  + '</div>';

性格方面,我做得很好。

优点是控制时简单。您可以使用一些技巧,例如'<p>' + (name || '') + '</p>'三元等。

如果要在浏览器中缩进代码,则可以执行以下操作:

+ 'ok \
  my friend \
  sldkfjlsdkjf';

并随意使用\ t或\ n。但是我更喜欢没有,而且速度更快。


我希望能够在Express中使用HTML文件(与普通的Node.JS相比)
Sanchit Gupta

ooooohh对不起(我是法语:p),因此您可以使用该fs模块。fs.readFile(htmlfile, 'utf8', function (err, file) {
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.