关于pug的笔记
一、简介
Pug 是一款健壮、灵活、功能丰富的模板引擎,专门为 Node.js 平台开发。Pug 是由 Jade 改名而来,他可以帮助我们写html的时候更加的简单明了。
安装、使用pug的过程
打开cmd
直接输入npm install pug-cli -gd
最后显示出如图的样子就安装成功了:
创建一个文件夹在文件夹中创造一个index.pug和name.bat的文件,然后在用记事本打开文件name.bat然后输入pug pug -P("P"为大写) -o a -w,双击name.bat就会自动创建一个a文件,在a文件中还会自动生成index.html即可在index.pug中编写index.html,简单明了。
注意编写index.pug是空格和tab不能同时使用,否则会发生编译失败的现象。
下面给大家展示一些关于pug的简单的语法
<!DOCTYPE html>
html(lang="en")
head
meta(charset="UTF-8")
meta(name="viewport", content="width=device-width, initial-scale=1.0")
meta(http-equiv="X-UA-Compatible", content="ie=edge")
title Document
link(rel="stylesheet", href="../css/index1.css")
body
div(class="div1")
div(class="div2")
a(class="button" href="http://www.baidu.com") 百度
='\n'
input(
type='checkbox'
name='agreement'
checked
)
(上面是index.pug里的代码)
(下面是index.html里的代码<编译后的>)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Document</title>
<link rel="stylesheet" href="../css/index1.css"/>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div><a class="button" href="http://www.baidu.com">百度</a>
<input type="checkbox" name="agreement" checked="checked"/>
</body>
</html>
关于pug的笔记的更多相关文章
- jade(pug)学习笔记(待填充.......)
深刻认识到总结知识点的重要性,不然遇到似曾相识的问题,要翻老半天的百度才能解决.20171018 pug——文字内部嵌入结构 比如: <a class = "href"> ...
- pug(jade) 学习笔记
from: https://www.cnblogs.com/xiaohuochai/p/7222227.html 对于一些嵌套层次较深的页面,在后期维护和修改时,一不小心少了一个尖括号,或者某个标签的 ...
- TJI读书笔记15-持有对象
TJI读书笔记15-持有对象 总览 类型安全和泛型 Collection接口 添加元素 List 迭代器 LinkedList 栈 Set Map Queue Collection和Iterator ...
- mysql颠覆实战笔记(一)--设计一个项目需求,灌入一万数据先
版权声明:笔记整理者亡命小卒热爱自由,崇尚分享.但是本笔记源自www.jtthink.com(程序员在囧途)沈逸老师的<web级mysql颠覆实战课程 >.如需转载请尊重老师劳动,保留沈逸 ...
- koa2学习笔记01 - 创建项目 —— koa生成器一键生成koa项目
前言 从17年开始尝试学习搭建个人网站开始,就开始学习摸索node了,至今差不多快两年了. 说起来现在都9102年了,所以最近打算整体设计重构一下网站,索性node后台也重写一遍. 重温一下node, ...
- 两万字Vue.js基础学习笔记
Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...
- 超硬核 Web 前端学霸笔记,学完就去找工作!
文章和教程 Vue 学习笔记 Node 学习笔记 React 学习笔记 Angular 学习笔记 RequireJS 学习笔记 Webpack 学习笔记 Gulp 学习笔记 Python 学习笔记 E ...
- git-简单流程(学习笔记)
这是阅读廖雪峰的官方网站的笔记,用于自己以后回看 1.进入项目文件夹 初始化一个Git仓库,使用git init命令. 添加文件到Git仓库,分两步: 第一步,使用命令git add <file ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
随机推荐
- 认识了一个新的手机游戏剖析工具- SnapDragon Profiler
原来这个是高通的工具,具说UNITY官方推荐了这个工具.大概看了下,可以从宏观上实时剖析手机应用的方方面面
- DAY 6 上午
如果不是割点,答案减少2(n-1) 如果删去割点,删去之后整个图分成多个连通块 每一个联通块的大小*其他连通块的大小之和 先求出缩点之后的树 加尽可能少的边使树变成一个边双 找出树上的所有叶子节点(度 ...
- isinstance(object, classinfo) class type(name, bases, dict)
w https://docs.python.org/3/library/functions.html#isinstance
- master-slave replication
redis save 备份 恢复 root@ubuntu:/etc/init.d# find / -name dump.rdb |xargs ls -alt redis-cli save cp /va ...
- 纯CSS3写一个立方体并在鼠标悬停的时候无限循环旋转
- golang md5 结果类型
golang md5 结果类型 package main import ( "crypto/md5" "encoding/hex" "fmt&quo ...
- 每日js练习
第一次玩codewars,选了个最简单的题目 要求是: You have to write a function that describe Leo: if oscar was (integer) 8 ...
- vs2010自带的报表应用
1.先创建一个本地的数据库,右键单击你的项目-->选择[Add]--->New Item--->Local database.创建数据库后,添加一个数据表T_student,添加一些 ...
- ES6标准入门 第二章:块级作用域 以及 let和const命令
一.块级作用域 1.为什么需要块级作用域? ES5中只有全局作用域和函数作用域,带来很多不合理的场景. (1)内层变量可能会覆盖外层变量: var tem = new Date(); function ...
- UVa 12169 Disgruntled Judge 紫书
思路还是按照紫书,枚举a,得出b, 然后验证. 代码参考了LRJ的. #include <cstdio> #include <iostream> using namespace ...