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的更多相关文章

  1. Jade之Mixins

    Mixin mixin允许我们对某一个块的重复使用,类似于函数. 用法:首先声明mixin,然后使用(在mixin名字之前加+即可以使用)即可. 最简单的mixin jade: //- 声明 mixi ...

  2. Jade(Pug) 模板引擎使用文档

    本篇内容 在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includ ...

  3. vue2.0中使用pug(jade)

    第一部分:pug(jade)模板引擎 pug,原名jade,是流行的HTML模板引擎,它是HAML在JavaScript上的实现,最大的特色是使用缩进排列替代成对标签. 它简化了HTML的成对标签的写 ...

  4. jade(pug)学习和使用

    由于版权问题,现已改名pug.但无须担心,几乎没什么区别.就算依然使用jade也不会有太大影响. 慢慢迁移过渡即可   # 官网 https://pugjs.org # github https:// ...

  5. 我最喜欢的模板jade(pug)学习和使用

    由于版权问题,现已改名pug.但无须担心,几乎没什么区别.就算依然使用jade也不会有太大影响. 慢慢迁移过渡即可 # 官网 https://pugjs.org # github https://gi ...

  6. Jade 模板引擎使用

    在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includes) 模 ...

  7. jade模板引擎学习笔记(WebsStorm9.0.3+ nodejs+express+jade)

    jade环境搭建 jade标签写法 jade注释 jade添加类名.id.属性 jade添加脚本,css jade变量 jade多行文本显示 jade流程代码:for,each,while jade流 ...

  8. Jade模板引擎使用详解

    在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includes) 模 ...

  9. Jade——变体的HTML

    什么是jade? jade是一个模板引擎,是变体的HTML. 模板引擎就是一个库,用来解释素具渲染视图的框架,也可以叫做HTML的预处理语言. jade是Node.js的一个模板引擎,他的语法借鉴了H ...

随机推荐

  1. 禁止input输入空格

    仅适用于PC端:$("input").attr("onKeypress","javascript:if(event.keyCode == 32)eve ...

  2. C# 读取指定文件夹中的全部文件,并按规则生成SQL语句!

    本实例的目的在于: 1 了解怎样遍历指定文件夹中的全部文件 2 控制台怎样输入和输出数据 代码: using System; using System.IO; namespace ToSql{ cla ...

  3. onvif开发之设备发现功能的实现--转

    忙了一个多月,onvif总算告一段落了.这几个星期忙着其他的项目,也没有好好整理一下onvif的东西.接下来得好好整理一下自己的项目思路和项目经验,同时将自己的一些心得写出来,希望对人有所帮助. 相信 ...

  4. C# Find() 与 FindAll()方法的使用

    Find()   :检索与指定匹配的第一个元素 FindAll()   : 检索与指定匹配的所有元素 如:List<string> strList=new List<string&g ...

  5. Vue Invalid handler for event "": got undefined

    原因:绑定的方法不是放在methods:{}里.比如我把绑定的函数写在了computed:{}里就会报这个错.

  6. vue中判断路由变化

    使用from.path和to.path判断路由跳转 在methods里面写函数: 当然,上边函数里边可以做很多事情.

  7. BZOJ4182: Shopping(点分治,树上背包)

    Description 马上就是小苗的生日了,为了给小苗准备礼物,小葱兴冲冲地来到了商店街.商店街有n个商店,并且它们之间的道路构成了一颗树的形状. 第i个商店只卖第i种物品,小苗对于这种物品的喜爱度 ...

  8. bzoj3786星系探索(splay维护dfs序)

    Description 物理学家小C的研究正遇到某个瓶颈. 他正在研究的是一个星系,这个星系中有n个星球,其中有一个主星球(方便起见我们默认其为1号星球),其余的所有星球均有且仅有一个依赖星球.主星球 ...

  9. C#如何调用非托管的C++Dll

    现在在Windows下的应用程序开发,VS.Net占据了绝大多数的份额.因此很多以前搞VC++开发的人都转向用更强大的VS.Net.在这种情况下,有很多开发人员就面临了如何在C#中使用C++开发好的类 ...

  10. 【例题 8-1 UVA 120 】Stacks of Flapjacks

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 从大到小安排. 显然想让第i大的数字归位 只要让他翻到最上面,然后再翻回来就ok了 即operate(pos[i]) -> o ...