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. 窗体是不出现在Alt+Tab中(窗体不出现在任务管理器中的应用程序列中)

    窗体是不出现在Alt+Tab中和不出现在任务管理器中的应用程序中 重写 CreateParams即可: public class MyForm : Form{ protected override C ...

  2. 【2017 Multi-University Training Contest - Team 5】Rikka with Competition

    [Link]: [Description] [Solution] 把所有人的能力从大到小排; 能力最大的肯定可能拿冠军; 然后一个一个地往后扫描; 一旦出现a[i-1]-a[i]>k; 则说明从 ...

  3. Java中的继承和接口

    本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! 这是个老话题,继承和接口是实现多态的两种方式,如果对象很多,其中一对一对的有共同点,建议用继承,如果 ...

  4. WPF通用管理框架 项目客户端基础结构介绍

    介绍 首先, 粗糙的展示一下目前的结构设计理念, 因为这几天一直在忙于工作, 所以跟进有些缓慢, 整体的设计是支持多种服务模式.目前只针对MSSQL做数据库接口, ORM选型则用的是微软的EF(PS: ...

  5. 【hoj】2160 bin packing 二分、贪心

    这个题是在二分的题单上的,可是依据二分法写出来的会在oj上超时.依据题目以下给出的提示能够发现能通过贪心法每次都找最能满足的情况去填充每个包,这样就能保证使用的包的数量是最少的 二分法解法: #inc ...

  6. react+react-router+mobx+element打造管理后台系统---react-amdin-element

    react-admin-element,一款基于react的后台管理系统. 那么我们和其他的后台管理系统有什么区别呢? demo地址:点我进入demo演示 github地址:点我进入github 1. ...

  7. CISP/CISA 每日一题 七

    CISA 每日一题(答) 确保只有恰当授权的出站交易才能被处理,控制目的: 1.出站交易是基于授权而被启动: 2.出站交易包含了唯一的预先授权的交易类型: 3.出站交易只能被发送到合法的商业伙伴那里. ...

  8. php訪问mysql数据库

    PHP訪问Mysql数据库 PHP能够通过mysql接口和mysqli接口訪问mysql数据库. 须要加入mysql和mysqli接口才干訪问mysql数据库. windows下配置amp: a.安装 ...

  9. [Javascript AST] 4. Continue: Report ESLint error

    const disallowedMethods = ["log", "info", "warn", "error", & ...

  10. Xcode7 的两个小坑

    Xcode7 还在 beta.时不时崩一下什么的倒也是预料之中的事.没料到的是之前用着好好的,今天升完 El Capitan 之后,模拟器竟然不见了,设备倒是在 schema 栏右边里能看到.只是注明 ...