3
Pug cheatsheet
source link: https://devhints.io/pug
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Basic document
doctype html
html(lang='en')
h1.class#id(name='hi')
| This is some text, hello there,
= name
- javascript()
Elements
div
| Just a div
.search
| A div, with class 'search'
h1 A heading with text
h1= page.title
div.class
div.class1.class2
h1.header
Attributes
input(type='text' name='q' autofocus)
- var authenticated = true
body(class=authenticated ? 'authed' : 'anon')
See: Attributes
Comments
// This comment will appear in the HTML
//- This is a silent comment
//-
Nesting inside a comment creates
a comment block
See: Comments
Iteration
ul
each user in users
li= user
Layouts
//- page.pug
extends layout.pug
block title
| hello
block content
| hello
//- layout.pug
title
block title
body
block content
Includes (partials)
Multiline text
p.
This is text that doesn't need to
be prefixed by pipes.
script.
// It's great for raw
// JavaScript and stuff
alert('hello')
Conditionals
if authenticated
a(href='/logout') Sign out
else
a(href='/login') Sign in
See: Conditionals
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK