如何在带有 nunjucks 的 Express 框架中使用 HTML - 没有玉

Posted

技术标签:

【中文标题】如何在带有 nunjucks 的 Express 框架中使用 HTML - 没有玉【英文标题】:How to use HTML in Express framework with nunjucks- no jade 【发布时间】:2013-11-23 14:39:52 【问题描述】:

我一直在使用 sendFile 方法在 Express 项目中呈现 html。 我想在我的项目中使用部分。并且,不转玉。

有没有办法在 Express 3.x 中使用带有部分的传统 HTML。 我试过ejs,但不完全理解。

【问题讨论】:

EJS 不明白怎么办? 为什么我需要它?它能做什么。我想写带有 Html 结尾的文件 Express 本身不支持太多的 HTML 生成(除了手动构建 HTML 或提供静态 HTML 文件),它依赖于外部模板引擎,如 Jade 或 EJS(或其他几十个)来执行更复杂的动态操作(如部分渲染)。 好的,谢谢你的解释。我更像是一个 python/flask 人。我对jinga2很熟悉。我可以使用带有部分的jinga2模板吗? Node/Express 有类似 Jinja2 的模板引擎,如 nunjucks 和 jinja-js(更多 here)。我不知道他们是否支持部分。 【参考方案1】:

一个更“类似 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' ,
    ]
  );
);

views/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>

views/item.html

<li> item.name </li>

【讨论】:

伙计,我非常感谢你......我所有的 python 项目,现在可以转换为表达......非常感谢! 我在试图弄清楚为什么我自己的测试不起作用时偶然发现了这篇文章。当您的 app.js 声明 express 和 nunjucks 时,您如何实现这一点,但是您在单独的 js 文件中完成渲染,例如路由.js @jonnyknowsbest “这取决于”。如果您在单独的文件中使用相同的 Express 实例,它应该会自动工作。但是,如果您在这些文件中实例化一个新的 Express 应用程序实例,您还需要针对该应用程序实例配置 nunjucks。 我不敢相信这个问题有多受欢迎。 最好走这条路线以获得最佳性能?我发现预编译会创建一个巨大的 js 模板文件,但不知道如何使用它,也不知道它是否正确。

以上是关于如何在带有 nunjucks 的 Express 框架中使用 HTML - 没有玉的主要内容,如果未能解决你的问题,请参考以下文章

nunjucks模板设计一个页面

nunjucks如何使用?

您如何按包含标签的帖子数量对博客帖子标签列表进行排序(在 Eleventy 中使用 Nunjucks)?

解决无法找到模块“express-art-template”的声明

如何在本地使用带有 express 的 graphql 和带有 mongoose 的 mongodb 来检索文档?

Nunjucks简介&基本使用教程