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. C/C++(共用体与枚举)

    共用(Union)与枚举(Enum) 共同体 c语言中,不同的成员使用共同的存储区域的数据结构类型称为共用体.(共用,联合体),共用体在定义,说明,适用形式上与结构体相似.两者本质上的不同在于使用内存 ...

  2. 【Codecraft-18 and Codeforces Round #458 (Div. 1 + Div. 2, combined) A】 Perfect Squares

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] N*1000暴力就好 [代码] #include <bits/stdc++.h> using namespace std ...

  3. c++操作当前窗体句柄

    句柄 这一概念是MFC里的一个类.MFC有专门的函数来获取窗体句柄. HWND hwnd; hwnd=CreateWindow("my own windowshandle",&qu ...

  4. JavaScript的子集和超集

    1.JavaScript子集 JavaScript子集的定义大部分都是出于安全考虑,仅仅有使用这门语言的一个安全的子集编写脚本,才干让代码运行得更安全.更稳定.比方怎样更安全地运行一段由不可信第三方提 ...

  5. Maven用法

    Maven 的使用教程   1.什么是 Maven? Maven项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的软件项目管理工具.   2.下载 Maven? ①.官网下载 ...

  6. Appium_python3使用汇总

    1. 对webview页面元素的处理self.driver.switch_to.context("WEBVIEW_com.aaa.bbb")source = self.driver ...

  7. 业余学习react 学习记录

    http://www.ruanyifeng.com/blog/2015/03/react (阮一峰 react 学习) 1.搭建环境:npm 使用 React npm install -g cnpm ...

  8. Fragment 实现的 分类 效果

    Fragment   实现的 分类 效果 布局文件的信息: <LinearLayout xmlns:android="http://schemas.android.com/apk/re ...

  9. tomcat的一些简单配置

    一.管理tomcatusernamepassword conf文件夹下,tomcat-users.xml <span style="font-size:24px;">& ...

  10. Elasticsearch和MongoDB

    Elasticsearch和MongoDB分片及高可用对比 本文旨在对比Elasticsearch和MongoDB高可用和分片的实现机制. Elasticsearch ES天生就是分布式的,那她又是如 ...