4.3_pug - MartijnKeesmaat/dating-app GitHub Wiki

Code

Pug allows you to write inline JavaScript code in your templates. There are three types of code: Unbuffered, Buffered, and Unescaped Buffered.

Unbuffered code

Unbuffered code starts with -. It does not directly add anything to the output.

- for (var x = 0; x < 3; x++)
li item

<li>item</li>
<li>item</li`
<li>item</li>

var list = ["Uno", "Dos", "Tres", "Cuatro", "Cinco", "Seis"]
each item in list
li= item

Buffered Code

Buffered code starts with =. It evaluates the JavaScript expression and outputs the result. For security, buffered code is first HTML escaped.

p
  = 'This code is <escaped>!'

p= 'This code is' + ' <escaped>!'

Unescaped buffered code starts with !=. It evaluates the JavaScript expression and outputs the result. Unescaped buffered code does not perform any escaping, so is unsafe for user

Just don't use this

Conditionals

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

Filters

Filters let you use other languages in Pug templates. They take a block of plain text as an input. All JSTransformer modules can be used as Pug filters. Popular filters include :babel, :uglify-js, :scss, and :markdown-it.

:markdown-it(linkify langPrefix='highlight-')
  # Markdown

  Markdown document with http://links.com and

  ```js
  var codeBlocks;
  ```

Filters are rendered at compile time. This makes them fast, but it also means that they cannot support dynamic content or options.

Includes

Includes allow you to insert the contents of one Pug file into another.

If no file extension is given, .pug is automatically appended to the file name.

include ../partials/nav

Blocks

Pug supports template inheritance. Template inheritance works via the block and extends keywords.

In a template, a block is simply a “block” of Pug that a child template may replace. This process is recursive.

To extend this layout, create a new file and use the extends directive with a path to the parent template. (If no file extension is given, .pug is automatically appended to the file name.) Then, define one or more blocks to override the parent block content.

//- layout.pug
html
  head
    title My Site - #{title}
    block scripts
      script(src='/jquery.js')
  body
    block content
    block foot
      #footer
        p some footer content

Append

Consider a page of your JavaScript game. You want some game related scripts as well as these defaults. You can simply append the block:

block append head
  script(src='/vendor/three.js')
  script(src='/game.js')

When using block append or block prepend, the word “block” is optional:

//- page.pug
extends layout

append head
  script(src='/vendor/three.js')
  script(src='/game.js')

Interpolation

Use #{ } to render JS in content

- var title = "On Dogs: Man's Best Friend";
- var author = "enlore";
- var theGreat = "<span>escape!</span>";

h1= title
p Written with love by #{author}
p This will be safe: #{theGreat}

p This is #{msg.toUpperCase()}

Iteration

each

ul
  each val in [1, 2, 3, 4, 5]
    li= val

Get the index aswell

ul
  each val, index in ['zero', 'one', 'two']
    li= index + ': ' + val

Iterate over keys

ul
  each val, index in {1:'one',2:'two',3:'three'}
    li= index + ': ' + val

One can also add an else block that will be executed if the array or object does not contain values to iterate over. The following is equivalent to the example above:

- var values = [];
ul
  each val in values
    li= val
  else
    li There are no values

You can also use for as an alias of each.

While

- var n = 0;
ul
  while n < 4
    li= n++

Mixins

//- Declaration
mixin list
  ul
    li foo
    li bar
    li baz
//- Use
+list
+list

Mixins are compiled to functions and can take argument

    mixin pet(name)
      li.pet= name
    ul
      +pet('cat')
      +pet('dog')
      +pet('pig')

    <ul>
      <li>foo</li>
      <li>bar</li>
      <li>baz</li>
    </ul>
    <ul>
      <li>foo</li>
      <li>bar</li>
      <li>baz</li>
    </ul>

    <ul>
      <li class="pet">cat</li>
      <li class="pet">dog</li>
      <li class="pet">pig</li>
    </ul>
⚠️ **GitHub.com Fallback** ⚠️