1. 程式人生 > >[Jade] Use Mixins in Pug

[Jade] Use Mixins in Pug

content card save checkbox extends works script pre out

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.

[Jade] Use Mixins in Pug