Moar Pug Templates

In a previous post I gave you enough info to get started with pug templates, but I thought pug deserved a little more attention than that.

With pug templates you can type anything as a tag and it won't check if its valid.

For example, this:

potato goose  

gets translated into this:

<potato>goose</potato>  

The upshot is that pug doesn't have to update when new tags are added to HTML. It also means that any complex markup you care to make (with the latest HTML) will work just fine.

So this:

html  
  head
    title moar pug
  body
    header
        h1 moar pug
    nav
        a(href='/potatoes') potatoes
        a(href='/bananas') bananas
        a(href='/kitty-cats') kitty-cats
    main
        section
            p Here is some stuff I've typed
        section
            table(id='fruit-animal-vehicle')
                tr
                    th Fruit
                    th Animal
                    th Vehicle
                tr
                    th(data-fruit='banana') banana
                    th monkey
                    th lamborghini
                tr
                    th(data-fruit='orange') orange
                    th orangutan
                    th ox cart
                tr
                    th(data-fruit='tomato') tomato
                    th house cat
                    th aircraft carrier
    footer don't eat yellow snow

turns into this:

<html>  
    <head>
        <title>moar pug</title>
    </head>
    <body>
        <header>
            <h1>moar pug</h1>
        </header>
        <nav>
            <a href="/potatoes">potatoes</a>
            <a href="/bananas">bananas</a>
            <a href="/kitty-cats">kitty-cats</a>
        </nav>
        <main>
        <section>
            <p>Here is some stuff I've typed</p>
        </section>
        <section>
            <table id="fruit-animal-vehicle">
                <tbody>
                    <tr>
                        <th>Fruit</th>
                        <th>Animal</th>
                        <th>Vehicle</th>
                    </tr>
                    <tr>
                        <th data-fruit="banana">banana</th>
                        <th>monkey</th>
                        <th>lamborghini</th>
                    </tr>
                    <tr>
                        <th data-fruit="orange">orange</th>
                        <th>orangutan</th>
                        <th>ox cart</th>
                    </tr>
                    <tr>
                        <th data-fruit="tomato">tomato</th>
                        <th>house cat</th>
                        <th>aircraft carrier</th>
                    </tr>
                </tbody>
            </table>
        </section>
        </main>
        <footer>don't eat yellow snow</footer>
    </body>
</html>  

As you may have already noticed, to give an element an attribute you use a comma separated list surrounded by parentheses.

This:

element(stuff='things', potatoes='french fries')  

Turns into this:

<element stuff="things" potatoes="french fries"></element>  

Be sure not to add spaces between the element name and the opening parenthesis. This causes an error.

//no good
element (stuff='things', potatoes='french fries')  

Of course, pug has more tricks up it's sleeve. It's a fully featured language and there's too much to mention in one post. (Full documentation at jade-lang.com/reference.) But I can give you some highlights.

I've already mentioned that you can give the express renderer an object, which you can then reference in your pug template:

app.get('/', function (req, res) {  
    res.render(
        'index',
        {bananas: false})
})

Cool thing is, you can actually do logic with data passed to your template:

html  
  head
    title moar pug
  body
    if bananas
        p fish brains!
    else
        p monkey muffins

Since bananas is false, we get "monkey muffins" here:

<html>  
  <head>
    <title>moar pug</title>
  </head>
  <body>
    <p>monkey muffins</p>
  </body>
</html>  

pug also lets you customize your text. For instance, if you hand the object

{potato: 'Yukon Gold'}

to the template

p my favorite potato is #{potato}  

You'll get

<p>my favorite potato is Yukon Gold</p>  

You can also iterate through a list of stuff. If you hand

{
    potatoes: [
        'Yukon Gold',
        'Russet',
        'Opperdoezer Ronde'
    ]
} 

to

table  
    tr
        th potatoes
    each potato in potatoes
        tr
            th=potato

You'll get

<table>  
    <tbody>
        <tr>
            <th>potatoes</th>
        </tr>
        <tr>
            <th>Yukon Gold</th>
        </tr>
        <tr>
            <th>Russet</th>
        </tr>
        <tr>
            <th>Opperdoezer Ronde</th>
        </tr>
    </tbody>
</table>  

There's plenty more to learn. If you want to easily play around with pug templates, there's an interactive demo at jade-lang.com. Just type some pug code in the left box and the rendered HTML is shown in the right box.

Looking for a software developer?