我厂使用 Pug 作为 HTML 的预编译工具,写久了发现回不去了……Pug 写起来很高效,看久了习惯了阅读效率也很高,读了读文档,发现还有很丰富的可编程特性。于是我决定抛弃 Handlebars,以后都用 Pug 写模板了。
这次我厂官网改版,我就用 Pug 替换了 Handlebars,于是 build 脚本一下少了几十行,非常爽。其实我早就想这样做,不过卡在一个点:使用变量。
在 Pug 里可以这样使用变量:
- var name = 'meathill'
h1 hello #{ name }
以上代码将输出 <h1>hello meathill</h1>
。这种用法比较简单,不过在 extends
模板的时候,把变量放到哪里就不知道了,官方文档也语焉不详,我反复试了很多次无果,最终还是靠搜索找到了答案,原来要这样:
// Layout.pug
html
block vars
p 注意,这个 block 是重点,它出现在前面,用来注入变量
head
title #{ title } | My site
body
block content
// page.pug
extends Layout
block vars
- var title = 'A blog'
block content
h1 Blog title
p blog content
欢迎吐槽,共同进步