一、初步认识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的更多相关文章

  1. 移动端之Android开发的几种方式的初步体验

    目前越来越多的移动端混合开发方式,下面列举的大多数我都略微的尝试过,就初步的认识写个简单的心得: 开发方式 开发环境 是否需要AndroidSDK 支持跨平台 开发语言&技能 MUI Win+ ...

  2. CSharpGL(29)初步封装Texture和Framebuffer

    +BIT祝威+悄悄在此留下版了个权的信息说: CSharpGL(29)初步封装Texture和Framebuffer +BIT祝威+悄悄在此留下版了个权的信息说: Texture和Framebuffe ...

  3. Android自定义View初步

    经过上一篇的介绍,大家对于自定义View一定有了一定的认识,接下来我们就以实现一个图片下显示文字的自定义View来练习一下.废话不多说,下面进入我们的正题,首先看一下我们的思路,1.我们需要通过在va ...

  4. 初步认识Node 之Node为何物

    很多人即便是在使用了Node之后也不知道它到底是什么,阅读完本文你应该会有一个初步的.具体的概念了.    Node的目标 提供一种简单的构建可伸缩网络程序的方法.那么,什么是可伸缩网络程序呢?可伸缩 ...

  5. [入门级] 基于 visual studio 2010 mvc4 的图书管理系统开发初步 (二)

    [入门级] 基于 visual studio 2010 mvc4 的图书管理系统开发初步 (二) Date  周六 10 一月 2015 By 钟谢伟 Category website develop ...

  6. 基于C/S架构的3D对战网络游戏C++框架 _05搭建系统开发环境与Boost智能指针、内存池初步了解

    本系列博客主要是以对战游戏为背景介绍3D对战网络游戏常用的开发技术以及C++高级编程技巧,有了这些知识,就可以开发出中小型游戏项目或3D工业仿真项目. 笔者将分为以下三个部分向大家介绍(每日更新): ...

  7. Azure底层架构的初步分析

    之所以要写这样的一篇博文的目的是对于大多数搞IT的人来说,一般都会对这个topic很感兴趣,因为底层架构直接关乎到一个公有云平台的performance,其实最主要的原因是我们的客户对此也非常感兴趣, ...

  8. CozyRSS开发记录14-RSS源管理初步完工

    CozyRSS开发记录14-RSS源管理初步完工 1.添加源的响应 DialogHost.Show有几个版本的重载,加一个DialogClosingEventHandler参数.我们让添加源对话框的添 ...

  9. 初步了解CPU

    了解CPU By JackKing_defier 首先说明一下,本文内容主要是简单说明CPU的大致原理,所需要的前提知识我会提出,但是由于篇幅我不会再详细讲解需要的其他基础知识.默认学过工科基础课. ...

随机推荐

  1. 【题解】4879. 【NOIP2016提高A组集训第11场11.9】少女觉

    Description 在幽暗的地灵殿中,居住着一位少女,名为古明地觉.据说,从来没有人敢踏入过那座地灵殿,因为人们恐惧于觉一族拥有的能力——读心.掌控人心者,可控天下. 咳咳.人的记忆可以被描述为一 ...

  2. hihoCoder 1014 : Trie树(字典树)

    传送门 Description 小Hi和小Ho是一对好朋友,出生在信息化社会的他们对编程产生了莫大的兴趣,他们约定好互相帮助,在编程的学习道路上一同前进. 这一天,他们遇到了一本词典,于是小Hi就向小 ...

  3. maven基础--下载安装配置命令生命周期

    maven apache 公司开源项目,项目构建工具 好处: 项目小 坐标:公司名称+项目名称+版本信息 通过坐标去 仓库查找jar包 maven的两大核心: *赖管理:对jar包管理过程. 项目构建 ...

  4. 09 (H5*) JS第7天 原型

    目录 1:创建对象的3中方式 2:工厂模式创建实例对象 3:  实例对象和构造函数的关系 4:构造函数创建对象带来的问题--原型 5:原型中创建方法 6:构造函数.原型对象.实例对象的关系 7:原型对 ...

  5. 《JAVA设计模式》之工厂方法模式 (Factory)

    在阎宏博士的<JAVA与模式>一书中开头是这样描述工厂方法模式的: 工厂方法模式是类的创建模式,又叫做虚拟构造子(Virtual Constructor)模式或者多态性工厂(Polymor ...

  6. spring cloud gateway获取response body

    网关发起请求后,微服务返回的response的值要经过网关才发给客户端.本文主要讲解在spring cloud gateway 的过滤器中获取微服务的返回值,因为很多情况我们需要对这个返回进行处理.网 ...

  7. nodejs启动

    npm install cnpm install npm run dev cnpm install 与 npm install :  https://blog.csdn.net/meng_suiga/ ...

  8. JS的两种函数声明方式的区别

    ---恢复内容开始--- js中常见的两种函数声明方式如下: // 函数表达式 var f = function() { console.log(1); } // 直接声明 function f () ...

  9. Codeforces - 1191B - Tokitsukaze and Mahjong - 模拟

    https://codeforces.com/contest/1191/problem/B 小心坎张听的情况. #include<bits/stdc++.h> using namespac ...

  10. harbar仓库的接口测试

    一.接口测试命令 api接口文档:https://github.com/goharbor/harbor/blob/release-1.7.0/docs/swagger.yaml 1)查看所属项目的信息 ...