135 lines
1.4 KiB
Markdown
135 lines
1.4 KiB
Markdown
---
|
|
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
|
|
···
|
|
```
|
|
{: data-line="1"}
|
|
|
|
```jade
|
|
+list
|
|
```
|
|
|
|
### Mixin with arguments
|
|
|
|
```jade
|
|
mixin pet(name)
|
|
span.pet= name
|
|
```
|
|
{: data-line="1"}
|
|
|
|
```jade
|
|
+pet('cat')
|
|
```
|
|
|
|
### Mixin with content
|
|
|
|
```jade
|
|
mixin article(title)
|
|
article
|
|
h2.title= title
|
|
block
|
|
```
|
|
{: data-line="1,4"}
|
|
|
|
```jade
|
|
+article('hello there')
|
|
p Content goes here
|
|
```
|