[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.

时间: 2025-01-02 00:49:54

[Jade] Use Mixins in Pug的相关文章

Jade(Pug) 模板引擎使用文档

本篇内容 在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includes) 模板引用 (Extends) 在 Express 中调用 jade 模板引擎 var express = require('express'); var http = require('http'); var app = express(); app.set('view engine', '

我最喜欢的模板jade(pug)学习和使用

由于版权问题,现已改名pug.但无须担心,几乎没什么区别.就算依然使用jade也不会有太大影响. 慢慢迁移过渡即可 # 官网 https://pugjs.org # github https://github.com/pugjs/pug # 文档地址https://pugjs.org/language/inheritance.html # 入门指南https://pugjs.org/api/getting-started.html 安装pug # 全局安装cli npm install pug-

Jade 模板引擎使用

在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includes) 模板引用 (Extends) 在 Express 中调用 jade 模板引擎 var express = require('express'); var http = require('http'); var app = express(); app.set('view engine', 'jade'

三、Jade

index.jade //cmder jade index.jade -P 编译后的index.html 文件: 模板的继承layout.jade文件:doctype htmlhead meta(charset='utf-8')body block desc p extends from layout block content index.jade文件:extends layoutblock content h2 模板继承 模板的包含include head jade核心API//安装模块np

nodeJS实现一个在线填表应用

1.构建一个web服务器 以前玩php和jsp时用过Apache.汤姆猫服务器,nodejs则有不同,他是需要自己createServer. //server.jsvar http = require('http'); http.createServer(function(req,res){ res.writeHead(200,{'Content-Type':'text/plain'}); res.end('so easy!'); }).listen(1111,'127.0.0.1'); con

pug模板引擎(原jade)

前面的话 为什么要引入pug,pug有什么特别之处呢?有一些嵌套层次较深的页面,可能会出现巢状嵌套,如下图所示 在后期维护和修改时,一不小心少了一个尖括号,或者某个标签的开始和闭合没有对应上,就会导致DOM结构的混乱甚至是错误.所以,有人发明了HAML,它最大的特色就是使用缩进排列来代替成对标签.受HAML的启发,pug进行了javascript的实现. Pug原名不叫Pug,是大名鼎鼎的jade,后来由于商标的原因,改为Pug,哈巴狗.其实只是换个名字,语法都与jade一样.丑话说在前面,Pu

为什么你应该使用pug替代html

pug是一套外观优雅并且功能丰富的模板引擎,以前叫做jade.目前,越来越多的公司和开发者使用pug取代html作为模板语言.那么它有什么好处呢? 1.无需结束标签 在html中,几乎每个标签都需要写相应的结束标签,这既耗费时间和精力又使代码更加冗长,而且万一忘了写结束标签会导致不可预期又难以定位的错误.相比之下,pug没有结束标签,代码更加简洁高效. 2.强制缩进 强制缩进有人喜欢有人不喜欢,但是它带来的好处却是无可置疑的:它使得团队中所有人的风格都统一了起来,使得阅读别人的代码不再那么恐怖,

jade学习

jade安装? nodeJs中输入以下命令 sudu npm install jade -g jade -h jade工具 推荐:online official online html2jade jade语法 标签 以p标签为例 p 会转换为: <p></p> jade能自动识别自闭和标签: input 会转换为: <input/> 文本 标签中添加文本 p 欢迎加入wandoujia-fe 会转换为: <p>欢迎加入wandoujia-fe</p&g

jade模板引擎简明用法

①.特性 首个单词为标签,有一些不能识别的标签可作为code,如each for case if  else if unless zen coding风格添加标签,如 .nb#hello 生成 <div class="nb" id="hello"></div> 缩进必须统一使用tab或space,否则会报错 通过缩进来表示嵌套关系,这个很重要!如 p a   生成 <p><a></a></p>