[Jade] Use Mixins in Pug

Posted 2020-09-23 Answer1215

Mixin works as a function.

extends layout

include mixins/storeForm

block content
    .inner
        h2 #{title}
        +storeForm({name: ‘NODE‘})

Here, we use include keyword to inlcude a mixin file.

include mixins/storeForm

 

Exec a mixin function we can use ‘+‘:

+storeForm({name: ‘NODE‘})

 

Define a mixin:

mixin storeForm(store = {})
    form(action="/add" method="POST" class="card")
        label(for="name") Name
        input(type="text" name="name")
        label(for="description") Description
        textarea(name="description")
        - const choices = [‘Wifi‘, ‘Open Late‘, ‘Fmaily Friendly‘, ‘Vegatarian‘, ‘Licensed‘];
        ul.tags
            each choice in choices
                .tag.tag__choice
                    input(type="checkbox" id=choice value=choice name="tags")
                    label(for=choice) #{choice}
        input(type="submit" value="Save" class="button")

Here we use some js code:

- const choices = [‘Wifi‘, ‘Open Late‘, ‘Fmaily Friendly‘, ‘Vegatarian‘, ‘Licensed‘];

to hard code some categories.