摘要:说明原名不叫,是大名鼎鼎的,后来由于商标的原因,改为,哈巴狗。其实只是换个名字,语法都与一样。丑话说在前面,有它本身的缺点可移植性差,调试困难,性能并不出色,但使用它可以加快开发效率。本文将详细介绍模板引擎。
说明 Pug原名不叫Pug,是大名鼎鼎的jade,后来由于商标的原因,改为Pug,哈巴狗。其实只是换个名字,语法都与jade一样。丑话说在前面,Pug有它本身的缺点——可移植性差,调试困难,性能并不出色,但使用它可以加快开发效率。本文将详细介绍pug模板引擎。 安装
1.sudo npm install jade -g 2.sudo yarn global add jade常用命令 普通编译,会在同目录下生成编译后的 test.html 文件
jade test.jade # --pretty | -P (大写) 美化输出的 html 使之带有缩进等 jade -P test.jade # --out | -o标签将编译后的 html 输出到指定文件夹 jade -P test.jade --out ./output # --obj | -O 向 jade 模板中传递变量,需要传递一个 json 或者一个 json 文件的路径 jade -P --obj "{testName: "this is tetsName"}" test.jade jade -P -O ./config.json test.jade # --watch | -w 监听文件变化,自动重新编译 jade -P -w test.jade
jade 中的标签不再含有 html 中的 尖括号,直接写标签名即可,无论单双标签,只写以这个标签名;
标签间嵌套关系使用缩进加换行实现;
标签后第一个空格后边的内容会被编译成标签内的文本内容
doctype html
html(lang="en")
head title Document // 通过换行加缩进实现标签嵌套 body p 标签后的文本 // 通过 ‘:’ 实现行内的嵌套 p: a 文本 // 自定义的标签加上 ‘/’ 表示自闭和标签(html 默认自闭和标签可以不用) foo/属性 一般属性要添加在紧挨标签的括号里() ,多个属性用 , 隔开,() 内实际上是一个 javascript 的环境,可以在这里进行基础的运算
body // ‘=’ 链接属性和值,多个属性用 ‘,’ 隔开 p: a(href="www.baidu.com", target="_blank") 链接 // 属性中可以做基础的 javascript 计算 p - var link = "www.baidu.com" a(href=link.toUpperCase()) 链接 // 属性多的时候可以换行,这个时候可以不用逗号分隔 p: input( type="checkbox" name="chexkbox" checked=true ) p(content="class 与 style 属性
") 伪代码 ‘=’ 默认是转义的 p(content!="
") 伪代码 "!=" 表示不转义
body // 使用 "." 链接标签和类名或者多个类名 p.p-class.p-class-add 内容 // 也可以定义变量然后,将其通过普通方式传入,可以传入数组 - var classes = ["p-class", "p-class-1", "p-class-2"]; p(class=classes) // 多个 class 属性,值会累加 p.class-name(class="class-1", class=classes) // style 属性的值可以是一个字符串也可以是一个样式对象 p(style={color: "red", background: "blue"}) p(style="color: red;background: blue;")文本
body p 这是单行的文本 p 这是多行文本 | 使用‘|’区分多行文本 | 注意同样要使用缩进 div. "."用来标记一块文本 可以是多行的,在这里可以 写 html 标签 script. // 在这里直接写 javascript 代码 console.log("first line"); console.log("second line"); console.log("last line");变量
-var 用于声明变量
{variablesName} 用来使用变量,输出的变量数据会被转码
{variablesName} 通用用来使用变量,但是输出的变量数据不会被转码
tagName=variablesName 标签名等于变量名,与 #{variablesName}一样,将转码后的变量值赋值为标签内容,区别在于,如果变量未定义 #{} 会返回 undefined;= 会将其忽略
tagName!=variablesName 与 tagName=variablesName 类似,除了不转义变量值
如果要输出 #{} 或者 !{} 可以再其前面加上反斜杠 #{xxx} | !{xxx}
持续更新,希望支持。文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/113646.html
摘要:小项目的内容基本就是维护订单表,订单状态,用户表等,小程序还要解决微信登录,微信支付等等微信。后台管理系统待施工,其实这部分和小程序差不多,改改直接用,出来往的服务一扔,就给甲方用了。 引言:最近一直在做一些小的小程序项目,小项目虽然小,但是前后端和管理系统都还是需要的。在甲方极低的预算下,人工又显得极其紧张,所以我大概摸索出了一套能用尽量少的代码,尽量减少单人工作量,又能实现实际需求...
摘要:标签声明转载须经本人同意这篇博客就聊一聊如何用搭建的环境,以及拓展了下如何在搭建好的环境中使用以及,废话不多说,直接进入主题。第三步补充,依赖扩展现在,我们搭建的环境并不支持,语法,我们需要再加工一下配置。 标签:vue,webpack,jade,scss声明:转载须经本人同意这篇博客就聊一聊如何用webpack搭建vue2.0的环境,以及拓展了下如何在搭建好的环境中使用scss以及p...
摘要:一些与一起使用的流行模板引擎是和,应用程序生成器使用作为其默认值,但它也支持其他几个。有关可与一起使用的模板引擎列表,请参阅模板引擎,另请参阅比较模板引擎等。,使用的模板引擎,例如,要使用模板引擎。 使用模板引擎 模板引擎使你可以在应用程序中使用静态模板文件,在运行时,模板引擎用实际值替换模板文件中的变量,并将模板转换为发送到客户端的HTML文件,这种方法可以更轻松地设计HTML页面。...
摘要:而框架中最常用的两个视图引擎是和。实际上这些上下文对象就是会在视图中使用到的变量。其实视图缓存并不是缓存视图实际上它缓存的视图路径。根据默认视图引擎将缺少拓展名的视图文件补充完整。实际上存在由不同组织维护的两个不同版本的。 showImg(https://segmentfault.com/img/remote/1460000010821004);前面的内容大都是关于 Express 框...
阅读 1247·2023-04-25 19:33
阅读 1149·2021-10-21 09:39
阅读 3622·2021-09-09 09:32
阅读 2573·2019-08-30 10:58
阅读 1567·2019-08-29 16:17
阅读 855·2019-08-29 15:29
阅读 2856·2019-08-26 11:55
阅读 2628·2019-08-26 10:33