203 lines
2.4 KiB
Markdown
203 lines
2.4 KiB
Markdown
---
|
|
title: Pug
|
|
category: JavaScript libraries
|
|
layout: 2017/sheet
|
|
prism_languages: [jade]
|
|
updated: 2017-10-30
|
|
weight: -3
|
|
tags: [Featurable]
|
|
---
|
|
|
|
## Pug
|
|
{: .-three-column}
|
|
|
|
### Basic document
|
|
{: .-prime}
|
|
|
|
```jade
|
|
doctype html
|
|
html(lang='en')
|
|
h1.class#id(name='hi')
|
|
| This is some text, hello there,
|
|
= name
|
|
|
|
- javascript()
|
|
```
|
|
|
|
### Elements
|
|
|
|
```jade
|
|
div
|
|
| Just a div
|
|
```
|
|
|
|
```jade
|
|
.search
|
|
| A div, with class 'search'
|
|
```
|
|
|
|
```jade
|
|
h1 A heading with text
|
|
```
|
|
|
|
```jade
|
|
h1= page.title
|
|
```
|
|
|
|
```jade
|
|
div.class
|
|
div.class1.class2
|
|
h1.header
|
|
```
|
|
|
|
### Attributes
|
|
|
|
```jade
|
|
input(type='text' name='q' autofocus)
|
|
```
|
|
|
|
```jade
|
|
- var authenticated = true
|
|
body(class=authenticated ? 'authed' : 'anon')
|
|
```
|
|
|
|
See: [Attributes](https://pugjs.org/language/attributes.html)
|
|
|
|
### Comments
|
|
|
|
```jade
|
|
// This comment will appear in the HTML
|
|
```
|
|
|
|
```jade
|
|
//- This is a silent comment
|
|
```
|
|
|
|
```jade
|
|
//-
|
|
Nesting inside a comment creates
|
|
a comment block
|
|
```
|
|
|
|
See: [Comments](https://pugjs.org/language/attributes.html)
|
|
|
|
### Iteration
|
|
|
|
```jade
|
|
ul
|
|
each user in users
|
|
li= user
|
|
```
|
|
|
|
### Layouts
|
|
|
|
```jade
|
|
//- page.pug
|
|
extends layout.pug
|
|
|
|
block title
|
|
| hello
|
|
|
|
block content
|
|
| hello
|
|
```
|
|
|
|
```jade
|
|
//- layout.pug
|
|
title
|
|
block title
|
|
body
|
|
block content
|
|
```
|
|
|
|
### Includes (partials)
|
|
|
|
```jade
|
|
include ./includes/head.pug
|
|
```
|
|
|
|
```jade
|
|
include:markdown article.md
|
|
```
|
|
|
|
See: [Includes](https://pugjs.org/language/includes.html)
|
|
|
|
### Multiline text
|
|
|
|
```jade
|
|
p.
|
|
This is text that doesn't need to
|
|
be prefixed by pipes.
|
|
```
|
|
{: data-line="1"}
|
|
|
|
```jade
|
|
script.
|
|
// It's great for raw
|
|
// JavaScript and stuff
|
|
alert('hello')
|
|
```
|
|
{: data-line="1"}
|
|
|
|
### Conditionals
|
|
|
|
```jade
|
|
if authenticated
|
|
a(href='/logout') Sign out
|
|
else
|
|
a(href='/login') Sign in
|
|
```
|
|
{: data-line="1,3"}
|
|
|
|
See: [Conditionals](https://pugjs.org/language/conditionals.html)
|
|
|
|
## Mixins
|
|
{: .-three-column}
|
|
|
|
### Mixins
|
|
|
|
```jade
|
|
mixin list
|
|
ul
|
|
···
|
|
```
|
|
{: data-line="1"}
|
|
|
|
```jade
|
|
+list
|
|
```
|
|
|
|
Mixins allow you to create reusable code blocks.
|
|
See: [Mixins](https://pugjs.org/language/mixins.html)
|
|
|
|
### Mixin attributes
|
|
|
|
```jade
|
|
mixin pet(name)
|
|
span.pet= name
|
|
```
|
|
{: data-line="1"}
|
|
|
|
```jade
|
|
+pet('cat')
|
|
```
|
|
|
|
See: [Mixin attributes](https://pugjs.org/language/mixins.html#mixin-attributes)
|
|
|
|
### Mixin blocks
|
|
|
|
```jade
|
|
mixin article(title)
|
|
article
|
|
h2.title= title
|
|
block
|
|
```
|
|
{: data-line="1,4"}
|
|
|
|
```jade
|
|
+article('hello there')
|
|
p Content goes here
|
|
```
|
|
|
|
See: [Mixin blocks](https://pugjs.org/language/mixins.html#mixin-blocks)
|