初步认识pug
一、初步认识pug
1.所谓的pug就是我们之前说的jade,也就是一种通过缩进的方式来编写代码的过程,在编译的过程中,我们不需要考虑标签是否闭合的问题。此外,用这种编译方式,加快了我们写代码的速度,也为代码复用提供了便捷。
2.在学习pug基础语法之前,首先要了解pug的命令行的使用,例如:
doctype html
html
head
title aaa
body
在文件里面写上述程序,然后以xxx.pug的格式保存,再再终端命令输入 pug xxx.pug,按下回车键,我们在回到之前的项目编译器,就会发现在编译器内出现了与xxx同名的xxx.html文件,点开之后会发现html 基础格式已经打印出来了。但是这里有一个问题,基础格式的排版并不像我们平时书写的格式,这里就需要我们在将pug格式转化为HTML的时候输入命令 pug -P xxx.pug;就可以得到我们想要的格式了。为了实时自动更新出现我们修改后的代码样式,我们还可以这样输入终端命令:pug -P -w xxx.pug;不想继续更新,快捷键为:ctrl+c.
3.路径设置
如果并不希望在当前目录下输入编译后的HTML文件,而是有自定义目录的需求,则需要设置-o参数
如下设置,index.html将输入到a目录下面,如果a目录不存在,则会新建a目录:
pug index.pug -o a
4.批量编译:
假设编译href下的所有pug文件,则可以这样写:pug href
5.结构语法:
标签
【树状】
在默认情况下,在每行文本的开头(或者紧跟白字符的部分)书写这个 HTML 标签的名称。使用缩进来表示标签间的嵌套关系,这样可以构建一个 HTML 代码的树状结构
ul
li Item A
li Item B
li Item C .
持续更新,欢迎大家指教!
初步认识pug的更多相关文章
- 移动端之Android开发的几种方式的初步体验
目前越来越多的移动端混合开发方式,下面列举的大多数我都略微的尝试过,就初步的认识写个简单的心得: 开发方式 开发环境 是否需要AndroidSDK 支持跨平台 开发语言&技能 MUI Win+ ...
- CSharpGL(29)初步封装Texture和Framebuffer
+BIT祝威+悄悄在此留下版了个权的信息说: CSharpGL(29)初步封装Texture和Framebuffer +BIT祝威+悄悄在此留下版了个权的信息说: Texture和Framebuffe ...
- Android自定义View初步
经过上一篇的介绍,大家对于自定义View一定有了一定的认识,接下来我们就以实现一个图片下显示文字的自定义View来练习一下.废话不多说,下面进入我们的正题,首先看一下我们的思路,1.我们需要通过在va ...
- 初步认识Node 之Node为何物
很多人即便是在使用了Node之后也不知道它到底是什么,阅读完本文你应该会有一个初步的.具体的概念了. Node的目标 提供一种简单的构建可伸缩网络程序的方法.那么,什么是可伸缩网络程序呢?可伸缩 ...
- [入门级] 基于 visual studio 2010 mvc4 的图书管理系统开发初步 (二)
[入门级] 基于 visual studio 2010 mvc4 的图书管理系统开发初步 (二) Date 周六 10 一月 2015 By 钟谢伟 Category website develop ...
- 基于C/S架构的3D对战网络游戏C++框架_05搭建系统开发环境与Boost智能指针、内存池初步了解
本系列博客主要是以对战游戏为背景介绍3D对战网络游戏常用的开发技术以及C++高级编程技巧,有了这些知识,就可以开发出中小型游戏项目或3D工业仿真项目. 笔者将分为以下三个部分向大家介绍(每日更新): ...
- Azure底层架构的初步分析
之所以要写这样的一篇博文的目的是对于大多数搞IT的人来说,一般都会对这个topic很感兴趣,因为底层架构直接关乎到一个公有云平台的performance,其实最主要的原因是我们的客户对此也非常感兴趣, ...
- CozyRSS开发记录14-RSS源管理初步完工
CozyRSS开发记录14-RSS源管理初步完工 1.添加源的响应 DialogHost.Show有几个版本的重载,加一个DialogClosingEventHandler参数.我们让添加源对话框的添 ...
- 初步了解CPU
了解CPU By JackKing_defier 首先说明一下,本文内容主要是简单说明CPU的大致原理,所需要的前提知识我会提出,但是由于篇幅我不会再详细讲解需要的其他基础知识.默认学过工科基础课. ...
随机推荐
- K-th Number 【POJ - 2104】【可持久化线段树】
题目链接 因为这道题没有删除修改之类的,所以很多人会用离散化之后的线段树来做,但是实际上(可能是我懒得去做离散化这个操作了),然后就是直接写可持久化线段树,区间的长度就是int的从最小到最大的长度,然 ...
- maven基础--下载安装配置命令生命周期
maven apache 公司开源项目,项目构建工具 好处: 项目小 坐标:公司名称+项目名称+版本信息 通过坐标去 仓库查找jar包 maven的两大核心: *赖管理:对jar包管理过程. 项目构建 ...
- linux下shell显示git当前分支
function git-branch-name { git symbolic-ref HEAD 2>/dev/null | cut -d"/" -f 3 } functio ...
- ac自动机(tree+kmp模板)
Keywords Search Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others ...
- Manacher(最长回文串)
http://acm.hdu.edu.cn/showproblem.php?pid=3068 最长回文 Problem Description 给出一个只由小写英文字符a,b,c...y,z组成的字符 ...
- seaborn教程1——风格选择
原文链接:https://segmentfault.com/a/1190000014915873 Seaborn学习大纲 seaborn的学习内容主要包含以下几个部分: 风格管理 绘图风格设置 颜色风 ...
- C. Trailing Loves (or L'oeufs?) (质因数分解)
C. Trailing Loves (or L'oeufs?) 题目传送门 题意: 求n!在b进制下末尾有多少个0? 思路: 类比与5!在10进制下末尾0的个数是看2和5的个数,那么 原题就是看b进行 ...
- hud2243 考研路茫茫——单词情结
考研路茫茫--单词情结 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Problem ...
- 金蝶云k3 cloud采购入库单校验日期不通过
新增采购入库单的时候提示单据日期必须大于等于货主组织在核算系统最后关账日期 解决办法:库存系统和存货核算系统的反关账
- 【记录】eclipse jar包看不了源码
第一步:下载JAD . jad官方地址的官方下载地址是: http://www.softpedia.com/get/Programming/Debuggers-Decompilers-Dissasem ...