[Jade] Use Mixins in Pug
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的更多相关文章
- Jade之Mixins
Mixin mixin允许我们对某一个块的重复使用,类似于函数. 用法:首先声明mixin,然后使用(在mixin名字之前加+即可以使用)即可. 最简单的mixin jade: //- 声明 mixi ...
- Jade(Pug) 模板引擎使用文档
本篇内容 在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includ ...
- vue2.0中使用pug(jade)
第一部分:pug(jade)模板引擎 pug,原名jade,是流行的HTML模板引擎,它是HAML在JavaScript上的实现,最大的特色是使用缩进排列替代成对标签. 它简化了HTML的成对标签的写 ...
- jade(pug)学习和使用
由于版权问题,现已改名pug.但无须担心,几乎没什么区别.就算依然使用jade也不会有太大影响. 慢慢迁移过渡即可 # 官网 https://pugjs.org # github https:// ...
- 我最喜欢的模板jade(pug)学习和使用
由于版权问题,现已改名pug.但无须担心,几乎没什么区别.就算依然使用jade也不会有太大影响. 慢慢迁移过渡即可 # 官网 https://pugjs.org # github https://gi ...
- Jade 模板引擎使用
在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includes) 模 ...
- jade模板引擎学习笔记(WebsStorm9.0.3+ nodejs+express+jade)
jade环境搭建 jade标签写法 jade注释 jade添加类名.id.属性 jade添加脚本,css jade变量 jade多行文本显示 jade流程代码:for,each,while jade流 ...
- Jade模板引擎使用详解
在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includes) 模 ...
- Jade——变体的HTML
什么是jade? jade是一个模板引擎,是变体的HTML. 模板引擎就是一个库,用来解释素具渲染视图的框架,也可以叫做HTML的预处理语言. jade是Node.js的一个模板引擎,他的语法借鉴了H ...
随机推荐
- 2017国家集训队作业[agc006e]Rotate 3x3
2017国家集训队作业[agc006e]Rotate 3x3 题意: 给你一个\(3*N\)的网格,每次操作选择一个\(3*3\)的网格,旋转\(180^\circ\).问可不可以使每个位置\(( ...
- Python线程池任务
#!/usr/bin/env python # -*- coding:utf-8 -*- from concurrent.futures import ThreadPoolExecutor #线程池, ...
- [PWA] Deal with caches in PWA
The takeway is to know when we should cache the content? When we should clean the caches? 1. When sh ...
- bash的启动文件
文件名称 功能描写叙述 /etc/profile 登录时自己主动运行 ~/.bash_profile,~/.bash_login,~/.profile 登录时自己主动运行 ~/.bashrc shel ...
- Hadoop作业性能指标及參数调优实例 (二)Hadoop作业性能调优7个建议
作者:Shu, Alison Hadoop作业性能调优的两种场景: 一.用户观察到作业性能差,主动寻求帮助. (一)eBayEagle作业性能分析器 1. Hadoop作业性能异常指标 2. Hado ...
- 18.Node.js 事件循环
转自:http://www.runoob.com/nodejs/nodejs-tutorial.html Node.js 是单进程单线程应用程序,但是通过事件和回调支持并发,所以性能非常高. Node ...
- 1.21 Python基础知识 - python常用模块-2
一.xml 什么是 XML? XML 指可扩展标记语言(EXtensible Markup Language) XML 是一种标记语言,很类似 HTML XML 的设计宗旨是传输数据,而非显示数据 X ...
- 升级你的Linux日志系统
650) this.width=650;" onclick='window.open("http://blog.51cto.com/viewpic.php?refimg=" ...
- 根据点画线java
package com.yang; import java.awt.Color; import java.awt.Graphics; import java.util.ArrayList; impor ...
- Hadoop学习小结
还在学校的时候,就知道Hadoop的存在了. 2012年在公司实习的时候,买了<Hadoop权威指南第2版>,大致看了下. 今年,抽空也大致喵了几眼. 最大的感悟就是:光看不做,还是不行. ...