首页 > 代码库 > [Jade] Use Mixins in Pug

[Jade] Use Mixins in Pug

Mixin works as a function.

extends layoutinclude mixins/storeFormblock 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=http://www.mamicode.com/choice name="tags")                    label(for=choice) #{choice}        input(type="submit" value="http://www.mamicode.com/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