logo标签列表

在Express中使用HTML而不是Jade

htmlnode.jsexpresspug
107

如何在使用 Node.JS 的 Express 时摆脱 Jade？我想只使用纯html。在其他文章中，我看到人们推荐使用已被弃用的 app.register()。

13个回答
82

你可以这样做：

  1. 安装ejs：

    2. npm install ejs

  2. 在 app.js 中将你的模板引擎设置为 ejs

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

  3. 现在在你的路由文件中，你可以分配模板变量

    4. // ./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
4
如何在HTML文件中打印变量“title”？ - Master Yoda
4
如果有人仍然想知道如何打印变量，就像@MasterYoda问的那样，您可以在HTML上像这样打印它：<%= title %>。 - Lucas Meine
62

Jade也接受HTML输入。
只需在行末添加一个点即可提交纯HTML代码。
如果这对你有帮助，请尝试：

doctype html              
html. // THAT DOT
    <body>     
        <div>Hello, yes this is dog</div>
    </body>

PS - 不需要关闭HTML标签 - Jade会自动处理。

7
Doctype 5已经被弃用，请使用“doctype html”作为第一行。 - snorkelzebra
点的文档：https://pugjs.org/language/plain-text.html#block-in-a-tag - Alexander Taubenkorb
19

从 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
我相信原帖作者仍然想要使用某种模板，只是用普通的HTML语法。sendfile不允许您进行任何模板处理，因为它只是从文件发送字节。此外，我建议不要像这样使用sendfile，因为这意味着每次请求到来时都会访问磁盘--这是一个巨大的瓶颈。对于高流量页面，您应该真正做到内存缓存。 - josh3736
1
@josh3736 如果你对 OP 的意图正确，那么问题应该得到改进。你说的每次请求都会访问磁盘是正确的，我会改进我的答案来警告这一事实。请考虑改进你的答案以警告以下内容：如果你实现了一个定制引擎，你必须同时实现缓存功能（如果需要），因为它不是由 express 处理的。 - laconbass
16

我认为，使用像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 = {};

我把我的叫做html引擎，你使用它的方式就是简单地说：

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

app.register() 没有被弃用，只是在 Express 3 中被重命名为 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 Version 45.0.2454.101 Ubuntu 14.04（64位）中无法运行测试。我想知道为什么。 - Lonnie Best
4
为了让渲染引擎接受 HTML 而非 Jade，您可以按照以下步骤进行操作：

  1. Install consolidate and swig to your directory.

     npm install consolidate
 npm install swig

  2. add following lines to your app.js file

    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. add your view templates as .html inside “views” folder. Restart you node server and start the app in the browser.

虽然这样可以无障碍地呈现HTML，但我建议您学习使用JADE。Jade是一个非常棒的模板引擎，学会它将有助于您实现更好的设计和可扩展性。

1
Jade 的唯一真正大的问题是缩进。如果你弄错了，代码就无法编译。此外，我想知道为什么选择 Jade，除了它唯一的作用是缩小代码之外... - zapper
4

首先，使用以下代码检查模板引擎的兼容版本：

express -h

然后你需要从列表中选择“不显示视图”，并使用它。
express --no-view myapp

现在您可以在公共文件夹中使用所有的HTML、CSS、JS和图像。
4
3
很奇怪没有人在文档中添加链接。我同意在Express中使用不同的视图语言是一件微不足道的事情。 - pixel 67
1
由于Jade支持HTML，如果您只想要具有.html扩展名，您可以这样做。
// app.js
app.engine('html', require('jade').renderFile);
app.set('view engine', 'html');

那么您只需要将视图文件从jade更改为html即可。

你不需要在HTML标记前加上“点”或句号吗？ - Gus Crawford
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接