npm-pug

[mowatermelon]

知识点名称

官网

https://pugjs.org/api/getting-started.html

官方仓库

https://github.com/pugjs/pug

官方npm地址

依赖包地址

https://www.npmjs.com/package/pug

在线运行地址

https://npm.runkit.com/pug

基础介绍

Pug is a high-performance template engine heavily influenced by Haml and implemented with JavaScript for Node.js and browsers.

Pug是一款健壮、灵活、功能丰富的HTML模板引擎,专门为 Node.js 平台开发。Pug是由Jade 改名而来。

是一种通过缩进（表示标签间的嵌套关系）的方式来编写代码的过程，在编译的过程中，不需要考虑标签是否闭合的问题。可以加快写代码速度，也为代码复用提供了便捷。

中文文档地址

https://www.pugjs.cn/api/getting-started.html

基础安装

npm install pug --save   # npm
yarn add pug             # Yarn

npm i pug-cli -g # npm 脚手架名称

基础使用

(function (log) {
const pug = require('pug');

// Compile the source code
const compiledFunction = pug.compile('template.pug');

// Render a set of data
console.log(compiledFunction({
  name: 'Timothy'
}));
// "<p>Timothy's Pug source code!</p>"

// Render another set of data
console.log(compiledFunction({
  name: 'Forbes'
}));
// "<p>Forbes's Pug source code!</p>"
})(console.log)

语法示例

mixin article(title)
  .article
    .article-wrapper
      h1= title
      if block
        block
      else
        p No content provided

+article('Hello world')

+article('Hello world')
  p This is my
  p Amazing article

div(class='div-class', (click)='play()')
div(class='div-class' '(click)'='play()')

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

- var btnType = 'info'
- var btnSize = 'lg'
button(type='button' class='btn btn-' + btnType + ' btn-' + btnSize)
|
|
button(type='button' class=`btn btn-${btnType} btn-${btnSize}`)

div(escaped="<code>")
div(unescaped!="<code>")

input(type='checkbox' checked)
|
|
input(type='checkbox' checked=true)
|
|
input(type='checkbox' checked=false)
|
|
input(type='checkbox' checked=true.toString())

- var classes = ['foo', 'bar', 'baz']
a(class=classes)
|
|
//- the class attribute may also be repeated to merge arrays
a.bang(class=classes class=['bing'])

a(style={color: 'red', background: 'green'})