Pug教程-从入门到入坟

概要

Pug是一款健壮、灵活、功能丰富的HTML模板引擎,专门为 Node.js 平台开发。Pug是由Jade 改名而来。

是一种通过缩进（表示标签间的嵌套关系）的方式来编写代码的过程，在编译的过程中，不需要考虑标签是否闭合的问题。可以加快写代码速度，也为代码复用提供了便捷。

安装

pug可以通过npm获得：

npm install pug -g
npm install pug-cli -g

命令行

将pug格式转化为HTML的时候输入命令pug -P xxx.pug

自动更新 pug -P -w xxx.pug

有自定义目录的需求，则需要设置-o参数

结构语法

属性

基本

a(href='baidu.com') 百度

转化为

<a href="baidu.com">百度</a>

多行

input(type='checkbox'name='agreement'checked
)

转化为

<input type="checkbox" name="agreement" checked="checked" />

括号引起来

div(class='div-class', (click)='play()')
div(class='div-class' '(click)'='play()')

转化为

<div class="div-class" (click)="play()"></div>
<div class="div-class" (click)="play()"></div>

分支条件

case

- var friends = 10
case friendswhen 0p 您没有朋友when 1p 您有一个朋友defaultp 您有 #{friends} 个朋友

转化为

<p>您有 10 个朋友</p>

代码

不输出代码

- for (var x = 0; x < 3; x++)li item-var list = ["Uno", "Dos", "Tres","Cuatro", "Cinco", "Seis"]
each item in listli= item

转化为

<li>item</li>
<li>item</li>
<li>item</li><li>Uno</li>
<li>Dos</li>
<li>Tres</li>
<li>Cuatro</li>
<li>Cinco</li>
<li>Seis</li>

转义输出

p= '这个代码被 <转义> 了！'

转化为

<p>这个代码被 &lt;转义&gt; 了！</p>

不转义输出

p!= '这段文字' + ' <strong>没有</strong> 被转义！'

转化为

<p>这段文字 <strong>没有</strong> 被转义！</p>

注释

单行注释: // 一些内容 或者 <!-- 一些内容-->
块注释:    //-给模板写的注释随便写多少字都没关系。
条件注释: <!--[if IE 8]>

条件

- var user = { description: 'foo bar baz' }
- var authorised = false
#userif user.descriptionh2.green 描述p.description= user.descriptionelse if authorisedh2.blue 描述p.description.用户没有添加描述。不写点什么吗……elseh2.red 描述p.description 用户没有描述

转化为

<div id="user"><h2 class="green">描述</h2><p class="description">foo bar baz</p>
</div>

包含

include includes/head.pug
include style.css

迭代

each 和 while

uleach val in [1, 2, 3, 4, 5]li= val- var n = 0;
ulwhile n < 4li= n++**

转化为

<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
</ul><ul><li>0</li><li>1</li><li>2</li><li>3</li>
</ul>

Mixin

//- 定义
mixin listulli fooli barli baz
//- 使用
+list
+listmixin article(title).article.article-wrapperh1= titleif blockblockelsep 没有提供任何内容。+article('Hello world')+article('Hello world')p 这是我p 随便写的文章

转化为

<ul><li>foo</li><li>bar</li><li>baz</li>
</ul>
<ul><li>foo</li><li>bar</li><li>baz</li>
</ul><div class="article"><div class="article-wrapper"><h1>Hello world</h1><p>没有提供任何内容。</p></div>
</div>
<div class="article"><div class="article-wrapper"><h1>Hello world</h1><p>这是我</p><p>随便写的文章</p></div>
</div>

参考文档：https://www.pugjs.cn/api/getting-started.html

Pug教程-从入门到入坟相关推荐

【教程汇总+持续更新】Unity游戏开发从入门到入坟
新的一年,本该在年前整理的年终总结被拖到了年后开工.去年大量时间投入在Catlike教程的翻译上,截止目前位置,教程的进度已经完全追平原作者. 去年还有一部分是断断续续的更新SLG实战教程,但遗憾的是 ...
从入门到入坟搭建FreeNAS服务器并配置NextCloud_NAS存储
从入门到入坟搭建FreeNAS服务器并配置NextCloud 2021-01-06 23:15:38 173点赞 963收藏 100评论创作立场声明:本文所有商品皆自费购入,第一次发表文章,若有不当 ...
canvas 从入门到入坟
文章目录 canvas 从入门到入坟 1. 概述 2. 使用场景 2.1 图表的绘制 2.2 canvas游戏 2.3 说明与作用 3. Canvas 入门 3.1 完成目标 3.2 初始化 3.3 ...
FHQ-Treap(非旋treap/平衡树)——从入门到入坟
作者:hsez_yyh 链接: FHQ-Treap--从入门到入坟_hsez_yyh的博客-CSDN博客来源:湖北省黄石二中信息竞赛组著作权归作者所有.商业转载请联系作者获得授权,非 ...
深聊MySQL，从入门到入坟之：MySQL竟然也有后悔药！！！
MySQL后悔药,防止看铁窗 1.引言 2.5种后悔药 2.1 limit 2.2 先测试后生产 2.3 删除前,先备份 2.4 删除前,先查询 2.5 修改时, begin+commit 3. 总结 ...
初阶指针---从入门到入坟
今天我们来见识一下c语言里让万千少年少女从入门到入坟的一道大门槛--指针目录 1.指针是什么? 2.指针和指针类型 3.野指针 4. 指针运算 5. 指针和数组 6. 二级指针 7. 指针数组 1. ...
【全栈接口测试进阶系列教程】入门到入职的jmeter接口测试工具实战，接口测试步骤，正则表达式jsonpath，断言，接口加密，beanshell，jdbc，jmeter+ant+jenkins
目录 [本文简介看之前请详细的看完介绍] 本文是全网首发的[全栈接口测试进阶系列教程]jmeter接口测试工具从入门到入职, 接口系列包含接口测试系列包含所有的接口测试工具入门到入职,如果你喜欢的话 ...
unity ui框架_[教程汇总+持续更新]Unity从入门到入坟——收藏这一篇就够了
----------------塔防(更新中),作者重写了基础篇(下方目录为:1.1(新) 基础)目前还在持续连载了5篇,因为不多我们更新完就能追到原作者的进度了------------------- ...
c语言深度剖析第三版pdf_入门到入坟，蕴含全网最强知识点3283页笔记、pdf教程，活到老，学到老...
又到了"金九银十"面试求职高峰期,在金三银四时也参与过不少面试,2020都说工作不好找,也是对开发人员的要求变高.前段时间自己有整理了一些Java后端开发面试常问的高频考点问题做成 ...
Spring Boot 2从入门到入坟 | 基础入门篇：「Spring Boot 2从入门到入坟」系列教程介绍
我李阿昀又回来了! 我可爱的读者们,我想死你们啦!我李阿昀又回来了!嘿嘿

Pug教程-从入门到入坟

概要

安装

命令行

结构语法

属性

分支条件

代码

注释

条件

包含

迭代

Mixin

Pug教程-从入门到入坟相关推荐

最新文章

热门文章