在 Pug 模板中使用变量

我厂使用 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