贵港购物网站开发设计,工控机做网站服务器,简述网页的基本结构,麦客网做网站前面的话 为什么要引入pug#xff0c;pug有什么特别之处呢#xff1f;有一些嵌套层次较深的页面#xff0c;可能会出现巢状嵌套#xff0c;如下图所示 在后期维护和修改时#xff0c;一不小心少了一个尖括号#xff0c;或者某个标签的开始和闭合没有对应上#xff0c;就…前面的话 为什么要引入pugpug有什么特别之处呢有一些嵌套层次较深的页面可能会出现巢状嵌套如下图所示 在后期维护和修改时一不小心少了一个尖括号或者某个标签的开始和闭合没有对应上就会导致DOM结构的混乱甚至是错误。所以有人发明了HAML它最大的特色就是使用缩进排列来代替成对标签。受HAML的启发pug进行了javascript的实现。 Pug原名不叫Pug是大名鼎鼎的jade后来由于商标的原因改为Pug哈巴狗。其实只是换个名字语法都与jade一样。丑话说在前面Pug有它本身的缺点——可移植性差调试困难性能并不出色但使用它可以加快开发效率。本文将详细介绍pug模板引擎 安装 使用npm安装pug $ npm install pug 但运行pug命令时提示pug命令未找到 这时需要安装pug命令行工具pug-cli [注意]一定要全局安装pug-cli否则无法正常编译 npm install pug-cli -g 再运行pug命令时正常执行 命令行 在学习pug基础语法之前首先要了解pug的命令行的使用 【基础编译】 将如下内容输入文件中并命名为index.pug htmlheadtitle aaabody 在命令行中敲入pug index.pug即可实现基础编译 在当前目录下生成一个index.html是index.pug编译后的结果 【sublime两列设置】 但是这样查看并不方便。下面将sublime设置为两列放置将index.pug和index.html分别放置在左右两列方便查看 【自动编译】 使用pug -w功能可以实现自动编译 更改index.pug文件并保存后index.html文件会实时更新为最新的编译的文件 【标准版HTML】 如上所示默认地pug编译出的HTML文件是压缩版的。如果要编译标准版的HTML文件需要设置-P参数 pug index.html -P 【路径设置】 如果并不希望在当前目录下输入编译后的HTML文件而是有自定义目录的需求则需要设置-o参数 如下设置index.html将输入到a目录下面如果a目录不存在则会新建a目录 pug index.pug -o a 【重命名】 默认地编译后的HTML与pug文件同名。如果需要重命名则可以进行如下设置 通过如下设置可以同时设置路径和名称 [注意]这里的路径必须提前建立好否则不会成功 pug xx.pug xx/xx.html 最终test.html文件被保存到templates目录下 【批量编译】 假设编译href目录下所有的pug文件 结构语法 下面介绍关于结构的基础语法 标签 【树状】 在默认情况下在每行文本的开头或者紧跟白字符的部分书写这个 HTML 标签的名称。使用缩进来表示标签间的嵌套关系这样可以构建一个 HTML 代码的树状结构 ulli Item Ali Item Bli Item C 【内联】 为了节省空间 Pug 嵌套标签提供了一种内联式语法 a: img 【自闭合】 Pug知道哪些元素是自闭合的也可以通过在标签后加上 / 来明确声明此标签是自闭合的 img
input
img/
input/ 【DOCTYPE】 HTML5的DOCTYPE书写如下 doctype html 也可以自定义一个 doctype 字面值 doctype html PUBLIC -//W3C//DTD XHTML Basic 1.1//EN 内容 Pug 提供了三种常用的方式来放置内容 【管道文本】 这是最简单的向模板添加纯文本的方法。只需要在每行前面加一个 | 字符这个字符在类 Unix 系统下常用作“管道”功能因此得名 | 纯文本当然也可以包括 strongHTML/strong 内容。
p| 但它必须单独起一行。 【标签内文本】 这实际上是最常见的情况文本只需要和标签名隔开一个空格即可 p 纯文本当然也可以包括 strongHTML/strong 内容。 【嵌入大段文本】 有时可能想要写一个大段文本块。比如嵌入脚本或者样式。只需在标签后面接一个 .即可 [注意]不要有空格 script.if (usingPug)console.log(这是明智的选择。)elseconsole.log(请用 Pug。) 属性 标签属性和 HTML 语法非常相似它们的值就是普通的 JavaScript 表达式。可以用逗号作为属性分隔符也可以不加逗号 a(hrefbaidu.com) 百度\n
a(classbutton hrefbaidu.com) 百度\n
a(classbutton, hrefbaidu.com) 百度 【多行属性】 如果有很多属性可以把它们分几行写 input(typecheckboxnameagreementchecked
) 【长属性】 如果有一个很长的属性并且JavaScript运行时引擎支持ES2015模板字符串可以使用它来写属性值 input(data-json{非常: 长的,数据: true}
) 【特殊字符】 如果属性名称中含有某些奇怪的字符可能会与 JavaScript 语法产生冲突的话可以将它们使用 或者 括起来。还可以使用逗号来分割不同的属性 div(classdiv-class, (click)play())
div(classdiv-class (click)play()) 【转义属性】 默认情况下所有的属性都经过转义即把特殊字符转换成转义序列来防止诸如跨站脚本攻击之类的攻击方式。如果要使用特殊符号需要使用 ! 而不是 [注意]未经转义的缓存代码十分危险。必须正确处理和过滤用户的输入来避免跨站脚本攻击 div(escapedcode)
div(unescaped!code) 【布尔值】 在Pug中布尔值属性是经过映射的这样布尔值(true和false)就能接受了。没有指定值时默认是true input(typecheckbox checked)\n
input(typecheckbox checkedtrue)\n
input(typecheckbox checkedfalse)\n
input(typecheckbox checkedtrue.toString()) 【行内样式】 style样式属性可以是一个字符串就像其他普通的属性一样还可以是一个对象 a(style{color: red, background: green}) 【类和ID】 类可以使用 .classname 语法来定义ID 可以使用 #idname 语法来定义 考虑到使用 div 作为标签名这种行为实在是太常见了所以如果省略掉标签名称的话它就是默认值 a.button
.content
\n
a#main-link
#content 标签嵌入 标签支持一种标签嵌入的写法形式如下 #[标签名(标签属性) 标签内容] 对于内联标签来说这种写法比较简单 p.这是一个很长很长而且还很无聊的段落还没有结束是的非常非常地长。突然出现了一个 #[strong 充满力量感的单词]这确实让人难以 #[em 忽视]。 【空格调整】 Pug 默认会去除一个标签前后的所有空格而标签嵌入功能可以在需要嵌入的位置上处理前后空格 p| 如果我不用嵌入功能来书写一些标签比如strong strong| 和em em| 可能会产生意外的结果。
p.如果用了嵌入在 #[strong strong] 和 #[em em] 旁的空格就会让我舒服多了。 注释 【单行注释】 单行注释和 JavaScript 类似但是必须独立一行 // 一些内容
p foo
p bar 【不输出注释】 只需要加上一个横杠就可以使用不输出注释 //- 这行不会出现在结果里
p foo
p bar 【块注释】 body//随便写多少字都没关系。 【条件注释】 Pug 没有特殊的语法来表示条件注释conditional comments。不过因为所有以 开头的行都会被当作纯文本因此直接写一个 HTML 风格的条件注释也是没问题的 !--[if IE 8]
html langen classlt-ie9
![endif]--
!--[if gt IE 8]!--
html langen
!--![endif]-- 逻辑语法 以下是关于模板逻辑的语法 JS代码 【不输出的代码】 用 - 开始一段不直接进行输出的代码 - for (var x 0; x 3; x)li item 【输出的代码】 用开始一段带有输出的代码它应该是可以被求值的一个JavaScript表达式。为安全起见它将被HTML转义 p 这个代码被 转义 了
p 这个代码被 转义 了 【不转义的输出代码】 用 ! 开始一段不转义的带有输出的代码。这将不会做任何转义所以用于执行用户的输入将会不安全 p! 这段文字 strong没有/strong 被转义
p! 这段文字 strong没有/strong 被转义 变量 【内容变量】 使用或#{}来进行变量的真实值替换 - var title On Dogs: Mans Best Friend;
- var author enlore;
- var theGreat span转义!/span;h1 title
p #{author} 笔下源于真情的创作。
p 这是安全的#{theGreat} 在 #{ 和 } 里面的代码也会被求值、转义并最终嵌入到模板的渲染输出中 - var msg not my inside voice;
p This is #{msg.toUpperCase()} Pug 足够聪明来分辨到底哪里才是嵌入表达式的结束所以不用担心表达式中有 }也不需要额外的转义 p 不要转义 #{}} 如果需要表示一个 #{ 文本可以转义它也可以用嵌入功能来生成 p Escaping works with \#{interpolation}
p Interpolation works with #{#{interpolation}} too! 使用!{}嵌入没有转义的文本进入模板中 - var riskyBusiness em我希望通过外籍教师 Peter 找一位英语笔友。/em;
.quotep 李华!{riskyBusiness} [注意]如果直接使用用户提供的数据未进行转义的内容可能会带来安全风险 【属性变量】 如果要在属性当中使用变量的话需要进行如下操作 - var url pug-test.html;
a(href/ url) 链接\n
- url https://example.com/
a(hrefurl) 另一个链接 如果JavaScript运行时支持 ECMAScript 2015 模板字符串还可以使用下列方式来简化属性值 - var btnType info
- var btnSize lg
button(typebutton classbtn btn- btnType btn- btnSize)\n
button(typebutton classbtn btn-${btnType} btn-${btnSize}) attributes 语法可以将一个对象转化为一个元素的属性列表 div#foo(data-barfoo)attributes({data-foo: bar})
- var attributes {};
- attributes.class baz;
div#foo(data-barfoo)attributes(attributes) 【变量来源】 变量来源有三种分别是pug文件内部、命令行参数和外部JSON文件 1、pug文件内部 2、命令行参数 使用--obj参数就可以跟随一个对象形式的参数 3、外部JSON文件 使用-O跟随一个JSON文件的路径即可 这三种方式pug文件内部的变量优先级最多而外部JSON文件和命令行传参优先级相同 如下所示外部JSON文件和命令行传参两种方式都存在由于--obj写在-w后面最终以命令行传参为准 条件 Pug 的条件判断的一般形式的括号是可选的所以可以省略掉开头的 -效果完全相同。类似一个常规的 JavaScript 语法形式 【if else】 - var user { description: foo bar baz }
- var authorised false
#userif user.descriptionh2.green 描述p.description user.descriptionelse if authorisedh2.blue 描述p.description.用户没有添加描述。不写点什么吗……elseh2.red 描述p.description 用户没有描述 Pug 同样也提供了它的反义版本 unless unless user.isAnonymousp 您已经以 #{user.name} 的身份登录。 【switch】 case 是 JavaScript 的 switch 指令的缩写并且它接受如下的形式 - var friends 10
case friendswhen 0p 您没有朋友when 1p 您有一个朋友defaultp 您有 #{friends} 个朋友 在某些情况下如果不想输出任何东西的话可以明确地加上一个原生的 break 语句 - var friends 0
case friendswhen 0- breakwhen 1p 您的朋友很少defaultp 您有 #{friends} 个朋友 也可以使用块展开的语法 - var friends 1
case friendswhen 0: p 您没有朋友when 1: p 您有一个朋友default: p 您有 #{friends} 个朋友 循环 Pug 目前支持两种主要的迭代方式 each 和 while 【each】 这是 Pug 的首选迭代方式 uleach val in [1, 2, 3, 4, 5]li val 可以在迭代时获得索引值 uleach val, index in [〇, 一, 二]li index : val 能够迭代对象中的键值 uleach val, index in {1:一,2:二,3:三}li index : val 用于迭代的对象或数组仅仅是个 JavaScript 表达式因此它可以是变量、函数调用的结果又或者其他 - var values [];
uleach val in values.length ? values : [没有内容]li val 还能添加一个 else 块这个语句块将会在数组与对象没有可供迭代的值时被执行 - var values [];
uleach val in valuesli valelseli 没有内容 [注意]也可以使用 for 作为 each 的别称 【while】 也可以使用 while 来创建一个循环 - var n 0;
ulwhile n 4li n 混入 混入是一种允许在 Pug 中重复使用一整个代码块的方法 //- 定义
mixin listulli fooli barli baz
//- 使用
list
list 混入可以被编译成函数形式并传递一些参数 mixin pet(name)li.pet name
ulpet(猫)pet(狗)pet(猪) 混入也可以把一整个代码块像内容一样传递进来 mixin article(title).article.article-wrapperh1 titleif blockblockelsep 没有提供任何内容。article(Hello world)article(Hello world)p 这是我p 随便写的文章 混入也可以隐式地从“标签属性”得到一个参数 attributes 也可以直接用 attributes 方法来传递 attributes 参数 mixin link(href, name)a(class!attributes.class hrefhref) namelink(/foo, foo)(classbtn) [注意]link(classbtn) 等价于 link()(classbtn)因为 Pug 会判断括号内的内容是属性还是参数。但最好使用后面的写法明确地传递空的参数确保第一对括号内始终都是参数列表 可以用剩余参数rest arguments语法来表示参数列表最后传入若干个长度不定的参数 mixin list(id, ...items)ul(idid)each item in itemsli itemlist(my-list, 1, 2, 3, 4) 文件包含 包含include功能允许把另外的文件内容插入进来 //- index.pug
doctype html
htmlinclude includes/head.pugbodyh1 我的网站p 欢迎来到我这简陋得不能再简陋的网站。include includes/foot.pug //- includes/head.pug
headtitle 我的网站script(src/javascripts/jquery.js)script(src/javascripts/app.js) //- includes/foot.pug
footer#footerp Copyright (c) foobar 被包含的如果不是 Pug 文件那么就只会当作文本内容来引入 //- index.pug
doctype html
htmlheadstyleinclude style.cssbodyh1 我的网站p 欢迎来到我这简陋得不能再简陋的网站。scriptinclude script.js /* style.css */
h1 {color: red;
} // script.js
console.log(真了不起); 文件继承 【覆盖】 Pug 支持使用 block 和 extends 关键字进行模板的继承。一个称之为“块”block的代码块可以被子模板覆盖、替换。这个过程是递归的。 Pug 的块可以提供一份默认内容当然这是可选的 //- layout.pug
htmlhead meta(charsetUTF-8)title 我的站点 - #{title}block scriptsscript(src/jquery.js)bodyblock contentblock foot#footerp 一些页脚的内容 现在来扩展这个布局只需要简单地创建一个新文件并如下所示用一句 extends 来指出这个被继承的模板的路径。现在可以定义若干个新的块来覆盖父模板里对应的“父块”。值得注意的是因为这里的 foot 块 没有 被重定义所以会依然输出“一些页脚的内容” //- pet.pug
p petName //- page-a.pug
extends layout.pugblock scriptsscript(src/jquery.js)script(src/pets.js)block contenth1 title- var pets [猫, 狗]each petName in petsinclude pet.pug 同样也可以覆盖一个块并在其中提供一些新的块。如下所示content 块现在暴露出两个新的块 sidebar 和 primary 用来被扩展。当然它的子模板也可以把整个 content 给覆盖掉 //- sub-layout.pug
extends layout.pugblock content.sidebarblock sidebarp 什么都没有.primaryblock primaryp 什么都没有 //- page-b.pug
extends sub-layout.pugblock content.sidebarblock sidebarp 什么都没有.primaryblock primaryp 什么都没有 【扩展】 Pug 允许去替换默认的行为、prepend向头部添加内容或者 append向尾部添加内容一个块。 假设有一份默认的脚本要放在 head 块中而且希望将它应用到 每一个页面可以进行如下操作 //- layout.pug
htmlheadblock headscript(src/vendor/jquery.js)script(src/vendor/caustic.js)bodyblock content 现在假设有一个页面那是一个 JavaScript 编写的游戏。希望把一些游戏相关的脚本也像默认的那些脚本一样放进去那么只要简单地 append 这个块 //- page.pug
extends layout.pugblock prepend headscript(src/vendor/three.js)block append headscript(src/game.js) 当使用 block append 或者 block prepend 时block 关键字是可省略的 //- page.pug
extends layout.pugprepend headscript(src/vendor/three.js)append headscript(src/game.js) 简易模板 //- index.pug
doctype html
htmlheadmeta(charsetUTF-8)title documentTitleeach val in srcStyleslink(href baseStyle / val)bodyheader.hdnav.hd-navbar.m-navbar.m-navbar_primary.hd-navbar-tel 联系方式: #{tel}ul.hd-navbar-naveach val in mainNavItemli.Hnn-item.m-btn.m-btn_infoa(href#) valsection.mainh1.main-title 我的文档p.main-content.这是一个很长很长而且还很无聊的段落还没有结束是的非常非常地长。突然出现了一个 #[strong 充满力量感的单词]这确实让人难以 #[em 忽视]。footer.ftp Copyright (c) 小火柴的蓝色理想each val in srcScriptsscript(srcbaseScript / val) //- data.json
{documentTitle:测试文档,tel:400-888-8888,mainNavItem:[登录,注册,关于,帮助],baseStyle:style,srcStyles:[bootstrap.css,main.css],baseScript:/js,srcScripts:[jquery.js,app.js]
}
