Pug – robust, elegant, feature rich template engine for Node.js

pug原名jade,因版权问题更名为pug,即哈巴狗。与hexo默认模块ejs一样，pug也是一个模板引擎，可用于快速的网站开发，固然也可以用于静态博客网站的设计。本站点现时所用主题manupassant也使用了pug。

本文针对Hexo中使用pug的情况为例，说明其根基语法。

安置

# common install npm install pug # install for hexo blog npm install hexo-renderer-pug --save

语法

pug差别于html，前者不需要标签的开和闭，如html的<p>Demo</p>，在pug使用p Demo即可。

缩进

pug对空格敏感，有点类似python对制表符tab敏感。pug使用空格作为缩进符，固然用soft tab也可行。同一级标签需保证左对齐。

div p Hello, world! p Hello, pug.

衬着功效如下：

<div> <p>Hellow, world!</p> <p>Hello, pug.</p> </div>

注释

pug使用//-或//对代码进行注释，前者注释内容不呈此刻衬着后的html文件中，后者反之。

//- html中不包罗此行 // html中会包罗此行

属性

pug将标签属性存放于括号()内，多个属性之间以逗号或空格分隔断绝分手。别的，对付标签的id和class，pug使用#紧跟标签id,使用.紧跟标签class，可以同时设置多个class。

h1#title Test title img#name.class1.class2(src=http://www.mamicode.com/"/test.png" alt=http://www.mamicode.com/"test")

↓

<h1 id=http://www.mamicode.com/"title">Test title</h1> <img id=http://www.mamicode.com/"name" class=http://www.mamicode.com/"class1 class2" src=http://www.mamicode.com/"/test.png" alt=http://www.mamicode.com/"test">

  包罗

为了便利代码复用，pug供给了include包罗成果，以下代码会将_partial目录下的head.pug文件内容包罗到当前挪用的位置。有点C/C++中内联函数的意思。

doctype html html(lang=http://www.mamicode.com/‘en‘) include _partial/head.pug

担任

下面是一个简单的base模板，通过block界说了页面头部head和内容body。块block有点类似C/C++的抽象函数，需要在担任者中完成界说，填充具体内容。

//- base.pug html head block title body block content

以下文件使用extends担任以上模板，通过block笼罩或替换原有块block。固然，担任者也可以在原有根本上继续扩展。

//- index.pug extends base.pug block title title "Test title" block content h1 Hello world! block article

界说变量

pug中通过- var name = value的形式界说变量

- var intData = 100 - var boolData = false - var stringData = ‘Test‘ p.int=http://www.mamicode.com/ intData p.bool=http://www.mamicode.com/ boolData p.stringData= stringData

需注意的是，在引用变量时，需要在引用位置加上=号，否则会默认将变量名当成普通字符串使用。

如果想要将变量与其它字符串常量或是变量连接在一起，就不能用等号了，而是应该用#{}，该标记会对大括号内的变量进行求值和转义，最终得到衬着输出的内容。

- var girl = ‘Lily‘ - var boy = ‘Jack‘ p #{girl} is so beautiful! p And #{boy} is handsome.

条件布局

pug的条件语句与其它语言类似，均是如下这般：

- var A = {value: ‘Test‘} - var B = true if A.value p=http://www.mamicode.com/ A.value else if B p=http://www.mamicode.com/ B else p nothing

迭代

pug中使用each和while实现循环迭代，each可以返回当前地址项的索引值，默认从0开始计数。

//- each ol each item in [‘Sun‘, ‘Mon‘, ‘Tus‘, ‘Wen‘, ‘Thu‘, ‘Fri‘, ‘Sat‘] li=http://www.mamicode.com/ item //- get index of each - var week = [‘Sun‘, ‘Mon‘, ‘Tus‘, ‘Wen‘, ‘Thu‘, ‘Fri‘, ‘Sat‘] ol each item, index in week li= index + ‘:‘ + item

↓