Pug 注入变量

koa2 渲染 pug 模板时,我们希望把适当的变量放入模板中


注入到 content

1
2
3
4
5
6
7
- var title = "On Dogs: Man's Best Friend";
- var author = "enlore";
- var theGreat = "<span>escape!</span>";

h1= title
p Written with love by #{author}
p This will be safe: #{theGreat}

通过 h1= 的方式,可以直接把变量塞入标签

或者通过 #{author} 的方式与标签里的其它内容共处

注入标签

1
2
3
4
5
6
7
p.
This is a very long and boring paragraph that spans multiple lines.
Suddenly there is a #[strong strongly worded phrase] that cannot be
#[em ignored].
p.
And here's an example of an interpolated tag with an attribute:
#[q(lang="es") ¡Hola Mundo!]

#[q(lang="es") ¡Hola Mundo!]的方式会把 a(lang=“es”) 渲染为一个标签,并将 iHola Mundo! 塞入其中

注入到标签属性

1
2
3
4
5
6
- var url = 'pug-test.html';
a(href='/' + url) Link
|
|
- url = 'https://example.com/'
a(href=url) Another link

可以对属性值进行字符串拼接

1
2
3
4
5
6
- var btnType = 'info'
- var btnSize = 'lg'
button(type='button' class='btn btn-' + btnType + ' btn-' + btnSize)
|
|
button(type='button' class=`btn btn-${btnType} btn-${btnSize}`)

也可以使用 模板字符串 的方式注入

原文作者: dgb8901,yinxing

原文链接: https://www.itwork.club/2018/12/21/Pug-Interpolation/

版权声明: 转载请注明出处

为您推荐

体验小程序「简易记账」

关注公众号「特想学英语」

初识 html-webpack-plugin