Jade模板迁移到Pug模板修改.md

Jade模板迁移到Pug模板修改

部分引用:https://pugjs.org/language/attributes.html

  • 修改模板引擎,修改所有文件后缀

    app.set(‘view engine’, ‘pug’);

属性修改

以前的Pug/Jade支持如下的表达式来获取数据

1
a(href="/#{url}") Link

新版本将不再支持上面表达式来获取数据,而是采用以下形式.

1
2
- var url = 'pug-test.html';
a(href='/' + url) Link

如果你的版本支持ES2015(包括 Node.js/io.js 1.0.0 或者更高版本),还可以采取下面的形式

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

&attributes

1
2
3
4
- var attributes = {};
- attributes.class = 'baz';
div#foo(data-bar="foo")&attributes(attributes)
/*out: <div class="baz" id="foo" data-bar="foo"></div>*/

注意 : Attributes applied using &attributes are not automatically escaped. You must be sure to sanitize any user inputs to avoid cross-site scripting (XSS). This is done for you if you are passing in attributes from a mixin call.