当前位置: 首页 > Web前端 > CSS

哈巴狗

时间:2023-03-30 13:36:38 CSS

的安装和使用可以看出哈巴狗的原名不是哈巴狗,而是名玉。后因商标问题,改为帕格、帕格。其实只是改个名字而已,语法和jade一样。说难听点,Pug有它自身的缺点——移植性差、调试困难、性能差,但是使用它可以加快开发效率。本文将详细介绍pug模板引擎。安装1.sudonpminstalljade-g2.sudoyarnglobaladdjade常用命令正常编译,在同级目录下会生成编译好的test.html文件jadetest.jade。#--漂亮|-P(大写)用缩进等美化输出的htmljade-Ptest.jade#--out|-o

将编译后的html输出到指定文件夹jade-Ptest.jade--out./output#--obj|-O传递变量给jade模板,需要传递一个json或者json文件的路径jade-P--obj'{testName:"thisistetsName"}'test.jadejade-P-O./config.jsontest.jade#--watch|-w监听文件变化,自动重新编译jade-P-wtest.jadetagsjade中的标签不再包含html中的尖括号,直接写标签名就可以了,不管单双标签,只写标签名;标签之间的嵌套关系是通过缩进和换行来实现的;标签后第一个空格后的内容会被编译成标签中的文本内容doctypehtmlhtml(lang="en")headtitleDocument//通过换行和缩进实现标签嵌套linenestingby':'p:atext//自定义标签加'/'表示自闭和标签(html默认自闭,标签可以省略)foo/attribute一般属性要加括号()nextto标签,多个属性之间用,,隔开()里面其实是javascript环境,可以在这里进行基本的计算body//'='链接属性和值,多个属性之间用','隔开p:a(href="www.baidu.com",焦油get="_blank")link//基本的javascript计算可以在属性p中完成-varlink='www.baidu.com'a(href=link.toUpperCase())link//当属性很多的时候,你可以换行,这个你可以不用逗号分隔p:input(type="checkbox"name="chexkbox"checked=true)p(content="
")伪代码'='默认转义p(content!="
")伪代码'!='表示不转义类和样式属性body//使用'.'链接标签和类名或者多个类名p.p-class.p-class-addcontent//也可以定义变量然后正常传入,可以传入一个数组-varclasses=['p-类','p-class-1','p-class-2'];p(class=classes)//多个class属性,值会累加p.class-name(class="class-1",class=classes)//style属性的值可以是字符串也可以是样式objectp(style={color:'red',background:'blue'})p(style="color:red;background:blue;")textbodyp这是一个单行文本p这是一个多行文本行文|使用“|”区分多行文字|注意缩进也应该使用div。'.'用于标记一段文字,可以是多行,这里可以编写html标签脚本。//这里直接写javascript代码console.log('firstline');console.log('第二行');console.log('最后一行');variable-var用于声明变量{variablesName}使用变量,输出变量数据会转码{variablesName}一般用于使用变量,但输出变量数据不会转码变量名,和#{variablesName}一样,将转码后的变量值赋值为标签内容,不同的是如果变量没有定义,#{}会返回undefined;=会忽略它tagName!=variablesName类似于tagName=variablesName,除了如果想输出#{}或!{}而不对变量值进行转义,可以在前面加一个反斜杠#{xxx}|!{xxx}会持续更新,希望多多支持