Add pug cheatsheet
This commit is contained in:
parent
a366243daf
commit
1fe969cb35
81
jade.md
81
jade.md
|
@ -1,84 +1,5 @@
|
||||||
---
|
---
|
||||||
title: Jade
|
title: Jade
|
||||||
category: JavaScript libraries
|
category: JavaScript libraries
|
||||||
|
redirect_to: /pug
|
||||||
---
|
---
|
||||||
|
|
||||||
```
|
|
||||||
doctype html
|
|
||||||
// comment (html)
|
|
||||||
-// silent comment
|
|
||||||
|
|
||||||
html(lang='en')
|
|
||||||
- javascript()
|
|
||||||
h1.class#id(name='hi')
|
|
||||||
| Text. Hello there,
|
|
||||||
= name
|
|
||||||
|
|
||||||
if condition
|
|
||||||
p. hello
|
|
||||||
|
|
||||||
p.
|
|
||||||
multiline text
|
|
||||||
goes here
|
|
||||||
```
|
|
||||||
|
|
||||||
### Iteration
|
|
||||||
|
|
||||||
```jade
|
|
||||||
ul
|
|
||||||
each user in users
|
|
||||||
li= user
|
|
||||||
```
|
|
||||||
|
|
||||||
### Layouts
|
|
||||||
|
|
||||||
```jade
|
|
||||||
extends layout.jade
|
|
||||||
|
|
||||||
block title
|
|
||||||
| hello
|
|
||||||
|
|
||||||
block content
|
|
||||||
| hello
|
|
||||||
```
|
|
||||||
|
|
||||||
```jade
|
|
||||||
-// layout.jade
|
|
||||||
title
|
|
||||||
block title
|
|
||||||
body
|
|
||||||
block content
|
|
||||||
```
|
|
||||||
|
|
||||||
### Includes (partials)
|
|
||||||
|
|
||||||
```jade
|
|
||||||
include ./includes/head.jade
|
|
||||||
include:markdown article.md
|
|
||||||
```
|
|
||||||
|
|
||||||
### Mixins
|
|
||||||
|
|
||||||
```jade
|
|
||||||
mixin list
|
|
||||||
ul ..
|
|
||||||
|
|
||||||
+list
|
|
||||||
```
|
|
||||||
|
|
||||||
```jade
|
|
||||||
mixin pet(name)
|
|
||||||
span.pet= name
|
|
||||||
|
|
||||||
+pet('cat')
|
|
||||||
```
|
|
||||||
|
|
||||||
```jade
|
|
||||||
mixin article(title)
|
|
||||||
article
|
|
||||||
h2.title= title
|
|
||||||
block
|
|
||||||
|
|
||||||
+article('hello there')
|
|
||||||
p Content goes here
|
|
||||||
```
|
|
||||||
|
|
|
@ -0,0 +1,132 @@
|
||||||
|
---
|
||||||
|
title: Pug
|
||||||
|
category: JavaScript libraries
|
||||||
|
layout: 2017/sheet
|
||||||
|
prism_languages: [jade]
|
||||||
|
updated: 2017-08-30
|
||||||
|
weight: -3
|
||||||
|
---
|
||||||
|
|
||||||
|
## Pug
|
||||||
|
{: .-three-column}
|
||||||
|
|
||||||
|
### Basic document
|
||||||
|
|
||||||
|
```jade
|
||||||
|
doctype html
|
||||||
|
html(lang='en')
|
||||||
|
- javascript()
|
||||||
|
h1.class#id(name='hi')
|
||||||
|
| Text. Hello there,
|
||||||
|
= name
|
||||||
|
|
||||||
|
if showControls
|
||||||
|
button.red Edit this page
|
||||||
|
```
|
||||||
|
|
||||||
|
### Comments
|
||||||
|
|
||||||
|
```jade
|
||||||
|
// This comment will appear in the HTML
|
||||||
|
```
|
||||||
|
|
||||||
|
```jade
|
||||||
|
-// This is a silent comment
|
||||||
|
```
|
||||||
|
|
||||||
|
### 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
|
||||||
|
```
|
||||||
|
|
||||||
|
### 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"}
|
||||||
|
|
||||||
|
## Mixins
|
||||||
|
{: .-three-column}
|
||||||
|
|
||||||
|
### Mixins
|
||||||
|
|
||||||
|
```jade
|
||||||
|
mixin list
|
||||||
|
ul
|
||||||
|
···
|
||||||
|
```
|
||||||
|
|
||||||
|
```jade
|
||||||
|
+list
|
||||||
|
```
|
||||||
|
|
||||||
|
### Mixin with arguments
|
||||||
|
|
||||||
|
```jade
|
||||||
|
mixin pet(name)
|
||||||
|
span.pet= name
|
||||||
|
```
|
||||||
|
|
||||||
|
```jade
|
||||||
|
+pet('cat')
|
||||||
|
```
|
||||||
|
|
||||||
|
### Mixin with content
|
||||||
|
|
||||||
|
```jade
|
||||||
|
mixin article(title)
|
||||||
|
article
|
||||||
|
h2.title= title
|
||||||
|
block
|
||||||
|
```
|
||||||
|
{: data-line="4"}
|
||||||
|
|
||||||
|
```jade
|
||||||
|
+article('hello there')
|
||||||
|
p Content goes here
|
||||||
|
```
|
Loading…
Reference in New Issue