初步认识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的大致原理,所需要的前提知识我会提出,但是由于篇幅我不会再详细讲解需要的其他基础知识.默认学过工科基础课. ...
随机推荐
- 浮点数float累加误差解决方式总结
首先是float累加产生误差的原因,该部分转自:http://blog.csdn.net/zhrh0096/article/details/38589067 1. 浮点数IEEE 754表示方法 要 ...
- 数据库学习之mysql数据库
参考链接网站: http://c.biancheng.net/view/2361.html Mysql的版本以及版本号 MySQL Community Server(社区版):该版本完全免费,但是官方 ...
- 机器学习实战_基于Scikit-Learn和Tensorflow读书笔记
第一部分 机器学习基础 第二部分 神经网络和深度学习 第9章 运行Tensorflow 分布式系统:分布式系统的定义是这个系统建立在网络的操作系统,具有高度的内聚性和透明性,它与网络的区别在于高层软件 ...
- java8新特性-简介
一.主要内容 :其中最为核心的为lambda 表达式 与 Stream API lambda表达式 函数式接口 方法引用与构造器引用 Stream API 接口中的默认方法与静态方法 新时间日期API ...
- Java稀疏数组
一.概述 1.概念 2.处理方法 3.示例 原数组如下: 转换为稀疏数组如下: 二.代码 1.主方法 @Testpublic void SparseTest() { // 创建一个原始的二维数组 11 ...
- ES6——字符串
1.多了两个方法 1)startsWith 2)endsWith 2.模板字符串(`..`)—— 方便字符串连接 `反单引号 1)可以直接把表达式塞进去 &a ...
- Java笔试题-List l = new List()
前言: 最近遇到的一道很基础的题,有时候大家可能离开了编译器就不行了. import java.util.List; /** * * @author catchegg * create date: 2 ...
- lambda 分组后的count
var list = stuList.GroupBy(b => b.PersonalId).Select(g => (new { personalId = g.Key, count = g ...
- Codeforces Round #392 (Div. 2) - B
题目链接:http://codeforces.com/contest/758/problem/B 题意:给定n个点灯的情况,灯只有四种颜色RBGY,然后如果某个灯坏了则用'!'表示,现在要求将坏的灯( ...
- Vue:列表渲染 v-for on a <template>
类似于 v-if,你也可以利用带有 v-for 的 <template> 渲染多个元素.比如: <html> <head> <title>Vue v-f ...