html 模板 pug

原文链接: html 模板 pug

上一篇: js setTimeout setInterval

下一篇: js socketio 简单使用

Pug原名不叫Pug，原来是大名鼎鼎的jade，后来由于商标的原因，改为Pug，哈巴狗。以下是官方解释：

it has been revealed to us that "Jade" is a registered trademark, and as a result a rename is needed. After some discussion among the maintainers, "Pug" has been chosen as the new name for this project.

其实只是换个名字，语法都与jade一样。

1. Pug安装编译的二三事

开始安装之后

npm install -g pug

运行一下代码

pug index.pug

结果显示：

bash: pug: command not found

找了网上很多内容和教程，大部分都是关于jade的，去Github看了一下官方的讨论区，才知道

You need to install pug-cli. The CLI was separated from the core library as part of this release.

所以,成功解决问题

npm install -g pug-cli

详情请看： pug: command not found

二. 代码编辑器优化

sublime，可以在package control->install package中安装 pug
webStrom，如果出现 Invalid indentation,you can use tabs or spaces but not both 错误，可以参考这篇文章[Jade报错：Invalid indentation,you can use tabs or spaces but not both问题
]( http://blog.csdn.net/greenqin... PS:学生可以凭借edu邮箱免费使用正版

三. 基础语法知识

一段简单的代码

doctype html
htmlheadtitle hello pug bodyh1 pug pug

使用命令：

pug -P -w index.pug

编译后的结果为：

<!DOCTYPE html>
<html><head><title>hello pug </title></head><body><h1>pug pug</h1></body>
</html>

1.类名和ID名

a.button
a(class="button")

编译后：

<a class="button"></a>
<a class="button"></a>

ID类似

2.属性

属性可以使用 () 包裹起来,属性值之间用逗号隔开
比如

a(href="google.com",title="google")

3.文本内容

a(href="google.com",title="google") Hello World

多行文本内容

p.asdfasdfaasdfasdadsfasdasdfasdfa

或者

p| dfas| dfas| dfas

文本含有标签

p| dfas <strong>hey</strong>| dfas| dfas

或者

p| dfas <strong>hey</strong>strong hey man| dfas| dfas

4.注释

单行注释

// just some paragraphs
<!-- just some paragraphs-->

非缓冲注释

//- will not output within markup

不会被编译到HTML

块注释

第一种
body//As much text as you wantcan go here.
第二种
<body><!--As much text as you wantcan go here.-->
</body>

IE注释

<!--[if IE 8]><html class='ie8'><[endif]-->
<!--[if IE 9]><html class='ie9'><[endif]-->
<!--[if IE ]><html class='ie8'><[endif]-->

5.变量

-var Pug="hello world"title #{Pug}

转义

-var htmlData='<strong>sdf</strong>'
p#{htmlData}
p!=htmlData

非转义

-var htmlData='<strong>sdf</strong>'
p !{htmlData}
p=htmlData

编译前的代码

p \#{htmlData}
p \!{htmlData}

没有的变量赋值

p=data;

是空值而不是undefined

6.流程代码

-var array=[1,2,3,4]
-for (var k in imooc)p=array[k]
-each k in arrayp:#{k}
-while

-var array=[1,2]if array.length>2p trueelsep false

unless 为false，才执行，用法与if类似

-var array=[1,2]unless    !istruep hello

switch的功能

        -var name='java'case namewhen 'java': p Hi,javacase namewhen 'pug': p Hi,pugdefaultp Hi

7.mixins

1.重复的代码块

mixin sayHip hello everyone
+sayHi

编译后

<p>hello everyone</p>

2.传入参数

mixin pet(name)li.pet= name
ul+pet('cat')

3.blocks

mixin article(title).articleh1= titleif block //是否有包含内容blockelsep No content provided
+article('Hello world')
+article('Hello world')p This is my

编译后：

<!--如果节点里面没有内容，就加上-->
<div class="article"><h1>Hello world</h1><p>No content provided</p>
</div>
<div class="article"><h1>Hello world</h1><p>This is my</p><p>Amazing article</p>
</div>

4.Attributes

mixin link(href, name)//- attributes == {class: "btn"}a(class!=attributes.class, href=href)= name+link('/foo', 'foo')(class="btn")

attributes已经转义，所以应该使用！=避免二次转义
编译后:

<a href="/foo" class="btn">foo</a>

5.不确定参数

mixin list(id, ...items)ul(id=id)each item in itemsli= item+list('my-list', 1, 2, 3, 4)

参数中要加入 ... ，编译后：

<ul id="my-list"><li>1</li><li>2</li><li>3</li><li>4</li>
</ul>

四.参考资料

jade-lang
Github·Pub
Scott 《带你学习Jade模板引擎》

html 模板 pug相关推荐

前端npm 安装包，精选大全集合
如果您曾在 Node 或 JavaScript 前端开发中投入过时间和精力,那么您就知道 npm 中有数以十万计的模块可供您选择开发者不停的寻求帮助/抱怨: "对模块的选择困难正在蚕食我们 ...
Koa项目搭建过程详细记录
2019独角兽企业重金招聘Python工程师标准>>> Java中的Spring MVC加MyBatis基本上已成为Java Web的标配.Node JS上对应的有Koa.Expre ...
Vue.js 组件复用和扩展之道
作者简介: 李中凯八年多工作经验前端负责人, 擅长JavaScript/Vue. 掘金文章专栏:https://juejin.im/user/57c7cb8a0a2b58006b1b8666/po ...
从html到pug模板,将变量从html-webpack-plugin传递到pug模板
是否可以将变量传递给我之前在'html-webpack-plugin'中定义的'pug-html-loader'加载的.pug模板? webpack.config.babel.js ... { tes ...
pug模板引擎(原jade)
前面的话为什么要引入pug,pug有什么特别之处呢?有一些嵌套层次较深的页面,可能会出现巢状嵌套,如下图所示在后期维护和修改时,一不小心少了一个尖括号,或者某个标签的开始和闭合没有对应上,就会导致 ...
pug模板引擎——jade
随着前端项目工程化的发展,代码结构越来越复杂,代码却越来越简单,为了将更多的精力集中在业务功能上面,对页面的快速构建需求日益剧增,同js.css一样,html也出现了各种各样的工具,即模板引擎,本文不 ...
Jade/Pug模板引擎
1.概述: Jade是一款基于haml的HTML的模板引擎,采用JavaScript实现,可以方便的在Node.js.Yeoman等框架中使用,已改名为pug. 2.全局安装: npm install ...
向Hexo博客添加微博秀（pug模板）
目的本文是一个详细的教程,告诉大家如何在Hexo博客中嵌入微博秀或者微博直播组件. 为什么要向博客中添加微博秀/微博直播组件? 微博秀是什么新浪微博秀,可以放置在你的博客.网站,或是其它支持htm ...
前端模板引擎 —— 带你学习Jade / Pug 模板引擎
模板引擎是什么模板引擎是将静态部分糅合的一种实现机制或者技术. 目前使用较广的模板引擎有以下几种:Jade / Pug.EJS.Handlebars. 本文详述Jade / Pug模板引擎在项目开发 ...