[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 ...
随机推荐
- 【Codeforces Round #426 (Div. 2) A】The Useless Toy
[Link]:http://codeforces.com/contest/834/problem/A [Description] [Solution] 开个大小为4的常量字符数组; +n然后余4,-n ...
- HTML中行内元素与块级元素有哪些及区别
二.行内元素与块级元素有什么不同? 块级元素和行内元素的区别是,块级元素会占一行显示,而行内元素可以在一行并排显示. 通过样式控制,它们可以相互转换. 1.尺寸-块级元素和行内元素之间的一个重要的不同 ...
- [TypeScript] Restrict null and undefined via Non-Nullable-Types in TypeScript
This lesson introduces the --strictNullChecks compiler option and explains how non-nullable types di ...
- codeforces 204E. Little Elephant and Strings(广义后缀自动机,Parent树)
传送门在这里. 大意: 给一堆字符串,询问每个字符串有多少子串在所有字符串中出现K次以上. 解题思路: 这种子串问题一定要见后缀自动机Parent树Dfs序统计出现次数都是套路了吧. 这道题统计子串个 ...
- PYTHON学习第四天课后总结:
第三天学习课后总结: 今日重点: 流程控制 1,if 条件判断语句 2,while 循环 3,for 循环 一,if +条件判断语句: 1> if+条件判断表达式: 子代码1 子代码2 子代 ...
- Python 之Numpy应用
NumPy 数据类型 numpy 支持的数据类型比 Python 内置的类型要多很多,基本上可以和 C 语言的数据类型对应上,其中部分类型对应为 Python 内置的类型.下表列举了常用 NumPy ...
- Unity新版网络-NetworkManager
NetworkManager是一个组件,用来管理网络多人游戏的状态.它实际上是完全使用HLAPI实现,所以它所做的一切程序员可以使用其他方式实现.然而,NetworkManager封装好了很多有用的功 ...
- Java中的线程模型及实现方式
概念: 线程是一个程序内部的顺序控制流 线程和进程的比较: 每个进程都有独立的代码和数据空间(进程上下文),进程切换的开销大. 线程:轻量的进程,同一类线程共享代码和数据空间,每个线程有独立的运行栈和 ...
- 华为OJ:字符串反转
非常easy,逆向输出就好了. import java.util.Scanner; public class convertString { public static void main(Strin ...
- 【转载】使用logstash+elasticsearch+kibana快速搭建日志平台
原文链接:http://www.cnblogs.com/buzzlight/p/logstash_elasticsearch_kibana_log.html 日志的分析和监控在系统开发中占非常重要的地 ...