Jade / Pug：将包含变量的html传递到模板中

Question

I'm working on an application based on keystone.js. I would like the end-users to be able to create content that changes based on variables. For example, if they would like to create an e-mail template, they could write:

Hi #{firstName},...

That would be passed into jade as plain html like so:

Hi #{firstName}...

The template should evaluate #{firstName} to the first name in question.

I've tried to implement this in a jade template as follows:

//Jade template
.div
  p #{firstName}
.div
   !=html

The line p #{firstName} prints the value for firstName, but !=html prints "Hi #{firstName},...".

Is there anything I'm doing wrong or is this just not supported with Jade?

Answer 1

this is expected behavior. ! is a escape character and expects only text not variables.

you should evaluate pug html in nodejs, pass this string as variable to pug template.

nodejs code

var pug = require('pug');
html = pug.render(html, {firstName:firstName});

pug code

.div
  p #{firstName}
.div
   !=html