Add pug cheatsheet
This commit is contained in:
parent
a366243daf
commit
1fe969cb35
81
jade.md
81
jade.md
|
@ -1,84 +1,5 @@
|
|||
---
|
||||
title: Jade
|
||||
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