Files F3709391

standard.pug
guoyunhe (Yunhe Guo)
Actions

File Metadata

Author
guoyunhe
Created
Apr 15 2017, 10:44 AM

standard.pug
View Options

doctype html
html(lang="en")
head
title= pageTitle
script(type='text/javascript').
if (foo) bar(1 + 5)
body
h1: span Pug - node template engine & markup language
#container.col
if youAreUsingPug
p You are amazing
else
p Get on it!
p.
Pug is a terse and simple templating language with a
strong focus on performance and powerful features.
//- Attributes
//- https://pugjs.org/language/attributes.html
a(href='google.com') Google
|
|
a(class='button' href='google.com') Google
|
|
a(class='button', href='google.com') Google
- var authenticated = true
body(class=authenticated ? 'authed' : 'anon')
input(
type='checkbox'
name='agreement'
checked
)
input(data-json=`
{
"very-long": "piece of ",
"data": true
}
`)
div(class='div-class', (click)='play()')
div(class='div-class' (click)='play()' hidden) hello #{ username }
- var url = 'pug-test.html';
a(href='/' + url) Link
|
|
- url = 'https://example.com/'
a(href=url) Another link
//- Class Literal
a.button
.button
//- ID Literal
a#main_link
#main-link
//- &attributes
div#foo(data-bar="foo")&attributes({
foo: 'bar',
'data-foo': 'bar'
})
- var attributes = {};
- attributes.class = 'baz';
div#foo(data-bar="foo")&attributes(attributes)
//- Case
- var friends = 10
case friends
when 0
p you have no friends
when 1
p you have a friend
default
p you have #{friends} friends
- var friends = 1
case friends
when 0: p you have no friends
when 1: p you have a friend
default: p you have #{friends} friends
//- Code
//- https://pugjs.org/language/code.html
- for (var x = 0; x < 3; x++)
li item
- var list = ["Uno", "Dos", "Tres", "Cuatro", "Cinco", "Seis"]
each item in list
li= item
p= 'This code is' + ' <escaped>!'
p!= 'This code is' + ' <strong>not</strong> escaped!'
//- Comments
//- https://pugjs.org/language/comments.html
// just some paragraphs
p foo
p bar
//- will not output within markup
p foo
p bar
//- TODO Block Comments
body
//-
Comments for your template writers.
Use as much text as you want.
//
Comments for your HTML readers.
Use as much text as you want.
//- Conditionals
//- https://pugjs.org/language/conditionals.html
- var user = { description: 'foo bar baz' }
- var authorised = false
#user
if user.description
h2.green Description
p.description= user.description
else if authorised
h2.blue Description
p.description.
User has no description,
why not add one...
else
h2.red Description
p.description User has no description
unless user.isAnonymous
p You're logged in as #{user.name} now