初步认识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的大致原理,所需要的前提知识我会提出,但是由于篇幅我不会再详细讲解需要的其他基础知识.默认学过工科基础课. ...
随机推荐
- servlet--response、request
请求响应流程图 response 1 response概述 response是Servlet.service方法的一个参数,类型为javax.servlet.http.HttpServle ...
- Python 学习笔记17 文本 - 读写
在我们的编程过程中,我们经常需要对文件进行读写操作. 在Python中,对文本的读写非常的方便,只需要简单的几行代码就可以实现. 我们首先新建一个文本文件"Text.txt", 里 ...
- git常用命令总结 git常用命令总结
git常用命令总结:https://www.cnblogs.com/jackchensir/p/8306448.html 利用git提交代码 一.首先需要下载git 查看电脑是否安装git,打开终端, ...
- 洛谷 P1339 [USACO09OCT]热浪Heat Wave(dijkstra)
题目链接 https://www.luogu.org/problemnew/show/P1339 最短路 解题思路 dijkstra直接过 注意: 双向边 memset ma数组要在读入之前 AC代码 ...
- 爬虫之requests模块的使用
requests模块 概念:基于网络请求的模块 作用:用来模拟浏览器发请求,从而实现爬虫 环境安装:pip install requests 编码流程: 指定url 发起请求 获取响应数据 持久化存储 ...
- #python# error:http.client.RemoteDisconnected: Remote end closed connection without response
添加headers user-agent 网络情况不好的状态下也能出现
- CSU 1092 Barricade
1092: Barricade Time Limit: 1 Sec Memory Limit: 32 MBSubmit: 240 Solved: 71[Submit][Status][Web Bo ...
- C Sleepy Kaguya
链接:https://ac.nowcoder.com/acm/contest/338/C来源:牛客网 题目描述 Houraisan☆Kaguya is the princess who lives i ...
- android 好的源码链接
1.自定义表情键盘:https://github.com/w446108264/XhsEmoticonsKeyboard 2.底部导航栏https://github.com/Ashok-Varma/B ...
- 从0构建webpack开发环境(二) 添加css,img的模块化支持
在一个简单的webpack.config.js中,构建了一个基础的webpack.config.js文件,但是只支持js模块的打包. 本篇中添加对css和img的模块化支持 首先需要安装三个个load ...