【问题标题】:HTML in Express and node.js?Express 和 node.js 中的 HTML?
【发布时间】:2013-07-25 20:01:22
【问题描述】:

我不知道这是否是一个真正的菜鸟问题,但我已经看过很多关于在 node.js 和 Express 中使用 Express 的文档。但我看到的是,他们总是使用另一种名为“Jade”的语言来呈现 HTML 文件。为什么?我想知道它是否需要使用 Jade,或者我可以在 Express 中使用 HTML 呈现模板。

【问题讨论】:

标签: html node.js express pug


【解决方案1】:

不,没有必要将 Jade 与 Express 一起使用。它只是一个流行的选项,因为 Jadedefault for generated applications 并且由与 Express 相同的开发人员维护。

他们还倾向于保持彼此的最新状态,例如将template inheritance in jade 添加为express dropped support for layouts

但是,还有许多其他视图引擎为 Express 提供内置支持。而且,consolidate project 可以是中介/glue 所以你有even more options

  • atpl
  • 灰尘
  • 生态
  • ejs
  • 哈姆尔
  • 哈姆咖啡
  • 车把
  • 霍根
  • 爵士乐
  • jqtpl
  • 只是
  • 小胡子
  • QEJS
  • 痛饮
  • 模板化
  • 太妃糖
  • 下划线
  • 海象
  • 胡须

注意:我相信我误解了您的问题,并且起初回答的范围太广。但是,把我写的其余部分留在下面,以防它仍然有用。

没有必要在 Express 中使用视图引擎,但会有所帮助。

Express 可以简单地.send() 一个值作为响应:

res.send(new Buffer('whoop'));
res.send({ some: 'json' });
res.send('some html');

但是,像 Jade 这样的视图引擎可以帮助从视图/模板生成更复杂的数据驱动内容。它们还可以帮助您按意图组织项目 (separation of concerns),因为视图通常保存在自己的文件中。

不过,如果您想使用res.render(),则需要一个视图引擎。此方法取决于'view engine' application setting 或您已配置app.engine()

app.set('view engine', 'jade'); // or ejs, swig, etc.

# ...

res.render('a-view'); // looks for `a-view.jade` based on `'view engine'`
app.engine('jade', require('consolidate').jade);

# ...

res.render('a-view.jade'); // matches the extension to the `.engine()`

【讨论】:

    【解决方案2】:

    如果您决定使用 Jade,有多种插入数据的方法,包括将原始 HTML 放置在您的翡翠文件中的元素中。如果您使用 !{ locals.someHtmlString } 手动绕过清理程序,您还可以插入 HTML 片段

    您可以在此处查看以下 Jade 代码的演示(尽管没有传入 locals 变量):http://cssdeck.com/labs/qkkrzfes

    //app.js
    app.get('/', function(req, res){
      locals.someData = {foo:'Bar'};
      locals.someHTML = '<span>hello</span>'
      res.render('someTemplate');
    
    //someTemplate.jade
    !!!
    html
      head
      body
        p.someClass This is plain text that goes in the paragraph
        p#someId You can insert data into the text: #{locals.someData.foo}
        p <a href='/'>You can just slap HTML in willy nilly</a>
        p HTML is escaped by default: #{locals.someHTML}
        p Escape HTML with \!{}: !{locals.someHTML}
        pre
          code=JSON.stringify(locals.someData, null, 2)
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2020-01-16
      • 1970-01-01
      • 2015-01-30
      • 2016-02-21
      • 1970-01-01
      • 2015-11-29
      • 2014-03-20
      • 2021-04-15
      相关资源
      最近更新 更多