[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 ...
随机推荐
- deep-in-es6(三)
模板字符串:反撇号(`)包起来的内容. eg: var str = `assassin`; console.log(str); 模板占位符:${};可达到数据的渲染,在占位符中可以是表达式,运算符,函 ...
- buffer--cache 详解
- 【Codecraft-18 and Codeforces Round #458 (Div. 1 + Div. 2, combined) A】 Perfect Squares
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] N*1000暴力就好 [代码] #include <bits/stdc++.h> using namespace std ...
- Logstash之Logstash inputs(file和redis插件)、Logstash outputs(elasticsearch 和redis插件)和Filter plugins
前期博客 Logstash安装和设置(图文详解)(多节点的ELK集群安装在一个节点就好) Filebeat啊,根据input来监控数据,根据output来使用数据!!! 请移步, Filebeat之 ...
- SpringCloud核心教程 | 第三篇:服务注册与发现 Eureka篇
Spring Cloud简介 Spring Cloud是一个基于Spring Boot实现的云应用开发工具,它为基于JVM的云应用开发中涉及的配置管理.服务发现.断路器.智能路由.微代理.控制总线.全 ...
- 今天发现里一个非常好用的Listbox自绘类,带不同文字字体和图片,觉得很有必要记下来
代码简写 MyListBox.h class CUseListBox : public CListBox { typedef struct _ListBox_Data { CString strApp ...
- Eclipse中Git插件使用技巧:[5]还原文件
如果修改了某个文件并未提交至本地库(add index),那么怎么还原呢?Git插件中并不像Svn插件直接提供有还原方式.其实无论是否提交至本地库或者远程库,还原操作的本质都是将文件的当前版本还原至之 ...
- thinkphp 整合 swiftmailer 实现邮件发送
thinkphp swiftmailer(phpmailer) 文件夹结构 图 1 swiftmailer-phpmailer 将swiftmailer整合到thinkphp中.如上图 1 我下载的版 ...
- win7打不开chm格式文件
近期在开发的过程中,发现重装的系统Wind7 打不开java帮助文档.搜索了半天才找到. 在这里分享一下. 一.假设不能打开,可这样恢复文件关联: 1.開始执行,输入:regsvr32 ...
- 1.2 Use Cases中 Messaging官网剖析(博主推荐)
不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ 下面是一些关于Apache kafka 流行的使用场景.这些领域的概述,可查看博客文 ...