如何在使用nunjucks而非jade的Express框架中使用HTML

26
我一直在使用sendFile方法在Express项目中呈现HTML。 我想在我的项目中使用partials,而不是切换到jade。
有没有办法在Express 3.x中使用传统的HTML和partials? 我尝试过ejs,但还不完全理解它。

你对EJS有什么不理解的地方吗? - robertklep
好的,谢谢你的解释。我更喜欢 Python/Flask。我熟悉 Jinga2。我能用 Jinga2 模板和部分模板吗? - Merlin
有类似 Jinja2 的模板引擎可用于 Node/Express,比如 nunjucksjinja-js(更多信息在此处)。不过我不知道它们是否支持 partials。 - robertklep
尝试一下这些示例代码。我本身没有使用nunjucks的经验。 - robertklep
抱歉,我的意思是如何在Express中使用Nunjucks替换Jade。我需要更改Express堆栈中的哪些配置才能使用Nunjucks?有什么帮助吗? - Merlin
显示剩余4条评论
1个回答

60
一个更“类似HTML”的模板引擎是nunjucks(其语法与您熟悉的Jinja2相似)。
这是一个简单的设置。假设Express和Nunjucks都已安装,否则:
npm install express
npm install nunjucks

- app.js

var nunjucks  = require('nunjucks');
var express   = require('express');
var app       = express();

app.listen(3012);

nunjucks.configure('views', {
  autoescape: true,
  express   : app
});

app.get('/', function(req, res) {
  res.render('index.html', {
    title : 'My First Nunjucks Page',
    items : [
      { name : 'item #1' },
      { name : 'item #2' },
      { name : 'item #3' },
      { name : 'item #4' },
    ]
  });
});

视图/index.html

<!doctype html>
<html>
  <head>
    <title>welcome to {{ title }}</title>
  </head>
  <body>
    <ul>
      {% for item in items %}
        {% include "item.html" %}
      {% endfor %}
    </ul>
  </body>
</html>

视图/项目.html

<li>{{ item.name }}</li>

2
哇,我真的感激不尽……现在我的所有Python项目都可以转换为Express了……非常感谢你! - Merlin
这是实现最大性能的最佳方法吗?我发现预编译会创建一个巨大的JS模板文件,但不知道如何使用它或者是否是正确的方法。 - theptrk
@theptrk 你所说的“这条路线”是什么意思?一般使用nunjucks吗?可能还有更简洁的模板引擎(也具有较少的功能)。据我所知,nunjucks会将编译后的模板缓存到内存中,这有助于提高性能。 - robertklep
@robertklep 我想我可能会以不同的方式使用nunjucks。假设我有一个登录页面和一个注册页面,它们由不同的路由提供。它们都扩展了一个带有通用导航栏的HTML结构。我认为将完整的登录和注册页面编译成完整的HTML会更有效率,这样服务器就不必每次用户访问“/login”或“/signup”时都要编译页面。最好让nunjucks缓存这些内容。 - theptrk
参见: https://idyllic.co/blog/setup-simple-website-using-nodejs-express-nunjucks-gulp-nodemon/ - Guildenstern70
显示剩余3条评论

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接