初步认识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的大致原理,所需要的前提知识我会提出,但是由于篇幅我不会再详细讲解需要的其他基础知识.默认学过工科基础课. ...
随机推荐
- memcpy复制字符串的注意事项/memcpy不能用来拷贝类类型
strcpy复制src到dst,最后将dst的下一个位置置为'\0',所以dst是以'\0'结尾的字符串 ] = "abcde"; cout << c1 << ...
- “希希敬敬对”Alpha版本发布说明
Alpha版本的所有功能如下: 1.完成根据贴吧关键字检索的功能,通过用户输入的关键词或URL地址链接到对应的贴吧页面,并爬取到该贴吧前10页的相关数据.2.对爬取到的数据进行分析和整合,实现获取该贴 ...
- Lock和synchronized使用
该文章主要讲解如何快速应用Lock和synchronized 读者可以自行学习Lock和synchronized系统级比较:可参考并发实战等,自己决定什么场景下使有哪种锁 Lock使用案例: publ ...
- JS原型链详解
最近面试被问到了就决定好好深入理解原型链 对象 要清楚原型链,首先要弄清楚对象: 普通对象 最普通的对象:有__proto__属性(指向其原型链),没有prototype属性. 原型对象(person ...
- k8s nginx ingress配置TLS
在没有配置任何nginx下,k8s的nginx默认只支持TLS1.2,不支持TLS1.0和TLS1.1 默认的 nginx-config(部分可能叫 nginx-configuration)的配置如下 ...
- 如何处理HTML5新标签的浏览器兼容性问题?
① IE8/IE7/IE6支持通过document.createElement方法产生的标签,可以利用这一特性让这些浏览器支持HTML5新标签 ② 也可以使用成熟的框架 ex:html5shim &l ...
- 纯手动拉WebPanel页面保存出现错误提示 "error:字符文本中的字符太多"
环境为.Net 没有使用WorkWithPlus 纯手拉WebFrom页面 问题出现情况如下:在拉页面的过程中拖了3个Value类型的变量到Table中 页面如下 但是在我保存的时候 发现提示如下错 ...
- query_module - 向内核查询和模块有关的各个位
总览 #include <linux/module.h> int query_module(const char *name, int which,void *buf, size_t bu ...
- smbmnt - 装载 SMB 文件系统的协助工具
总览 smbmnt mount-point [ -s share ] [ -r ] [ -u uid ] [ -g gid ] [ -f mask ] [ -d mask ] 描述 smbmnt 用于 ...
- day04 列表增删改查、元祖以及range
01 课前小甜点 千万不要随意做决定 只要你做了决定,你要坚持下去. 02 昨日内容回顾 int <---> bool : 非0 True 0 False True 1 False 0 i ...