我最喜欢的模板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-cli -g

# 本地安装
npm install pug --save-dev

为了符合大众教材，依然使用jade也无伤大雅

# 创建文件夹和文件
mkdir jade-test && touch index.js index.jade# 安装依赖
npm init -y && cnpm install jade --save# 安装全局jade
cnpm install jade -g

index.jade

.headerh1 #{title}p
.bodyp #{body}
.footerdiv #{By}a(href="http://www.baidu.com/#{author.twitter}") #{author.name}uleach tag, index in tagsli #{tag}

index.js

var jade = require('jade')
var fs = require('fs')var data = {title : "my title",author: {twitter: "@Lee",name: "Azat"},tags: ['express', 'node', 'javascript']
}data.body = process.argv[2]// jade.compile
fs.readFile('index.jade', 'utf-8', function (error, source) {var template = jade.compile(source);var html = template(data)console.log(html);
})// jade.renderFile
jade.renderFile('index.jade', data, function (error, html) {console.log(html)
})

运行jade： node index.js 'email body'

block 和 extends 、append（后） / prepend（前）

# API官方文档https://pugjs.org/language/inheritance.html

layout.pug

doctype html
html(lang='en')headtitle= appTitlebodyblock contentfooterblock footer| © 2009-2017 CyLeeBlog.com 版权所有 ICP证：粤S-172RM

index.pug

extends ./includes/layout.pug
block contenth1 #{title}p Welcome to #{title}
block append footer script| window.alert('123')

extends ./includes/layout.pug
block contenth1= titleform(method="post")| 用户名：input(name="name")br| 密码： input(nane="pwd")

运行效果图如下：可以看到不仅继承了 layout，在 content 块中添加了个性内容，还成功的往 footer 块中添加了脚本，进一步灵活和个性化：

除了学到 block 和 extends、append / prepend 的配合使用。还知道了。只要你不是变量，或者说你想以字符串开始。标签的后面必须是“｜”来声明。才能正常使用字符串或者 Javascript 脚本。而如果是字符串和变量嵌套，则变量需要使用#{变量}的形式书写。非常简单.

使用cli快速编译为html

（注：需要先安装全局pug-cli)

layout.pug

doctype html
html(lang='en')headtitle= titlebodyh1= titlep Welcome to #{title}
        ullia(href="/") home lia(href="/login") login lia(href="/reg") reg block content footerblock footer| © 2009-2017 CyLeeBlog.com 版权所有 ICP证：粤S-172RM

命令行输入：

# 查看帮助
pug --help# 编译为html
pug .\layout.pug -p layout.html# 编译并且赋值
pug .\layout.pug -O "{title: 'fuck you'}" .\layout.html# 监听并且实时改变html
pug .\layout.pug -w layout.html

if 条件判断

https://pugjs.org/language/conditionals.html

layout.pug

doctype html
html(lang='en')headtitle= titlebodyh1= titlep Welcome to #{title}
        ullia(href="/") home if userlia(href="/login") publishlia(href="/reg") logoutelse lia(href="/login") login lia(href="/reg") reg articleif successdiv= successif errordiv= errorblock content footerblock footer| © 2009-2017 CyLeeBlog.com 版权所有 ICP证：粤S-172RM

我最喜欢的模板jade（pug）学习和使用相关推荐

前端模板引擎 —— 带你学习Jade / Pug 模板引擎
模板引擎是什么模板引擎是将静态部分糅合的一种实现机制或者技术. 目前使用较广的模板引擎有以下几种:Jade / Pug.EJS.Handlebars. 本文详述Jade / Pug模板引擎在项目开发 ...
超时尚的UI电子商务PSD分层模板，临摹学习必备
用户体验或更准确地说,电子商务用户体验(UX)是所有UI的重要方面,在处理电子商务应用程序时是必需的.当前,电子商务业务变得越来越有竞争力,各种各样的选择使客户忠诚度成为无可挑剔的现象. UX主要是指 ...
MongoDB+模板引擎项目学习 ---学生档案管理
MongoDB+模板引擎项目学习 -学生档案管理 1 案例介绍目标:模板引擎应用,强化node.js项目制作流程知识点:http请求响应.数据库.模板引擎.静态资源访问项目效果展示 2 制 ...
教大家S40/java所有玩机技巧,喜欢请转载加QQ657752021学习更多技术
教大家S40/java所有玩机技巧,喜欢请转载加QQ657752021学习更多技术 2012年01月11日加QQ657752021 学习更多网络技术希望大家支持橙音 [b]自己打造高品质音乐:[ ...
jxls读取模板导出Excel学习笔记
jxls读取模板导出Excel学习笔记 jxls是一个简单的.轻量级的excel导出库,使用特定的标记在excel模板文件中来定义输出格式和布局.除此以外,java中成熟的excel导出工具有po ...
Jade/Pug模板引擎
1.概述: Jade是一款基于haml的HTML的模板引擎,采用JavaScript实现,可以方便的在Node.js.Yeoman等框架中使用,已改名为pug. 2.全局安装: npm install ...
nodejs jade mysql_学习篇：NodeJS中的模板引擎：jade
NodeJS 模板引擎作用:生成页面在node常用的模板引擎一般是 1.jade --破坏式的.侵入式.强依赖(对原有的html体系不友好,走自己的一套体系) 2.ejs --温和的.非侵入式的.弱 ...
标准模板库(STL)学习指南之List链表
本文转载自天极网,原文地址:http://www.yesky.com/255/1910755.shtml.转载请注明什么是STL呢?STL就是Standard Template Library,标准 ...
标准模板库(STL)学习指南之List容器
原文地址:http://dozb.bokee.com/1872684.html [文章导读] STL的目的是标准化组件,这样就不用重新开发,可以使用现成的组件 [正文] 什么是STL呢?STL就是St ...

我最喜欢的模板jade（pug）学习和使用

我最喜欢的模板jade（pug）学习和使用相关推荐

最新文章

热门文章