Pug Flashcards
What are templating engines and how do they work?
In short: At run time, Pug (and other template engines like EJS or Handlebars) replace variables in our file with actual values, and then send the resulting HTML string to the client.
What is PUG?
Pug is a Templating Engine. Pug is a simple whitespace sensitive syntax for writing HTML.
Pug allows you to write inline JavaScript code in your templates. There are three types of code: Unbuffered, Buffered, and Unescaped Buffered.
What’s the structure of the PUG file?
We need to open with tag, just like in HTML
then set up following structure:
html(lang=”en”)
head
meta(charset=”UTF-8”)
meta(name=”viewport”, content=”width=device-width, initial-scale=1.0”)
title Natours
link(rel=”stylesheet”, href=”./css/style.css”)
link(rel=”shortcut icon”, href=”./img/favicon.ico”, type=”image/png”)
body
How do you add attributes and classes to elements in PUG?
In pug we wrap the attributes of an element in parenthesis. Like:
link(rel=”stylesheet”, href=”./css/style.css”)
The classes, are created similarly to emmet’s
button.nav__el.nav__el-cto
How do you pass data, to pug templates from express?
In the route handler, we need to pass an object with data (these variables are called locals in the pug file) as a second argument of the .render() function.
app.get(‘/’, (req, res) => {
res.status(200).render(‘base’, {
tour: ‘The Forest Hiker’,
user: ‘Jonas’
});
});
In order to USE this data,
1) we might use = syntax.
h1= tour
2) or Interpolation (which is similar to ES6 template strings)
#{localVar}
Interpolation does not work inside of attributes and classes in pug. In order to inject locals to attribute or class, we can:
i) Simply write the attribute in JavaScript
like:
- var url = ‘pug-test.html’;
a(href=’/’ + url) Link
ii) If your JavaScript runtime supports ES2015 template strings (including Node.js/io.js 1.0.0 and later), you can also use its syntax to simplify your attributes:
button(type=’button’ class=btn btn-${btnType} btn-${btnSize})
What are the types of comments in pug and how do we apply them?
1) We can add comments that will be rendered as HTML comments (visible on the Source file in the browser)
We just need to use comment javascript syntax:
//h1 The Park Camper
2) If we want to write comments that are exclusive to pug file, and do not overflow anywhere else, then we need to add a dash.
//-h1 The Park Camper
What is the difference between buffered code and unbuffered code?
Buffered code starts with =. It evaluates the JavaScript expression and outputs the result. For security, buffered code is first HTML escaped.
Unbuffered code is the code that will run, but will not add anything to the output.
Unbuffered code starts with -. It does not directly add anything to the output.
Pug also supports block unbuffered code:
-
var list = ["Uno", "Dos", "Tres",
"Cuatro", "Cinco", "Seis"]
each item in list
li= item
What is the shorthand syntax that allows to write in one line, elements that would be in two lines, with the indentations like list elements
ul.footer\_\_nav
li
a
The shorthand syntax for doing for putting li and a in one line, is to use a colon, like:
ul. footer__nav
li: a(href=’#’) About us
li: a(href=”#”) Download apps
li: a(href=”#”) Become a guide
li: a(href=”#”) Careers
li: a(href=”#”) Contact
How do you include other pug files into your pug templates?
In order to include a pug template in another template, we need to use include keyword. Like:
// Header
include header
// Footer include footer
We need to have those files created in separate files then, also the indentation needs to be correct.
What are extends and blocks and how do you use them?
Extends allow you to use same base layout for every single page, that we want to render.
In a template, a block is simply a “block” of Pug that a child template may replace.
Pug blocks can provide default content, if appropriate. Providing default content is purely optional, though.
To extend this layout, create a new file and use the extends directive with a path to the parent template. hen, define one or more blocks to override the parent block content.
What are append, prepend and replace (default) keywords when it comes to extending a template?
Suppose you have default scripts in a head block that you wish to use on every page.
html
head
block head
script(src='/vendor/jquery.js')
script(src='/vendor/caustic.js')
body
block content
Now, consider a page of your JavaScript game. You want some game related scripts as well as these defaults. You can simply append the block:
//- page.pug extends layout.pug
block append head
script(src=’/vendor/three.js’)
script(src=’/game.js’)
(when using block append, block prepend) word “block” is optional
How do you iterate locals in pug?
Pug’s first-class iteration syntax makes it easier to iterate over arrays and objects in a template.
- It supports loops with each (for is an alias for “each”) and while keywords.
- Pug also lets you iterate over the keys in an object
- One can also add an else block that will be executed if the array or object does not contain values to iterate over.
ul
for val in [1, 2, 3, 4, 5]
li= val
How do you manage whitespace and interpolation?
By default, however, Pug removes all spaces before and after tags. When compiling to HTML:
1. Pug removes indentation, and all whitespace between elements.
So, the closing tag of an HTML element will touch the opening tag of the next.
2. Pug preserves whitespace within elements, including:
- all whitespace in the middle of a line of text.
- leading whitespace beyond the block indentation.
- trailing whitespace.
- line breaks within a plain text block, or between consecutive piped lines.
If you need to add space, you have a few options:
- You could add one or more empty piped lines — a pipe with either spaces or nothing after it. This will insert whitespace in the rendered HTML.
| Don't | button#self-destruct touch | | me!
- If your inline tags don’t require many attributes, you may find it easiest to use tag interpolation, or literal HTML, within a plain text block.
p.
Using regular tags can help keep your lines short,
but interpolated tags may be easier to #[em visualize]
whether the tags and text are whitespace-separated.
What are mixins and how can we implement them?
Mixins are reusable pieces of code that we can pass arguments into. Mixins are compiled to functions, and can take arguments.
- You should define your mixins at the top of your pug file. You declare them with keyword mixin, and declare them similarly to a function in javascript.
mixin overviewBox(label, text, icon)
.overview-box\_\_detail
svg.overview-box\_\_icon
use(xlink:href=`/img/icons.svg#${icon}`)
span.overview-box\_\_label= label
span.overview-box\_\_text= text
(attaching arguments to elements works just as in any other pug file).
- In order to use a mixin, we can invoke it with “+” sign. like:
+overviewBox(‘Next date’, tour.startDates[0].toLocaleString(‘default’, { month: ‘long’, year: “numeric” }), ‘icon-calendar’)
How do pug conditionals work?
Pug has conditionals built in but they are really simple (for instance, they can’t check for equality). The better solution is to use javascript for that (unbuffered code):
- if (guide.role === ‘lead-guide’)
span. overview-box__label Lead guide - if (guide.role === ‘guide’)
span. overview-box__label Tour guide
