资讯专栏INFORMATION COLUMN

pug的安装与使用

jeyhan / 1566人阅读

摘要:说明原名不叫,是大名鼎鼎的,后来由于商标的原因,改为,哈巴狗。其实只是换个名字,语法都与一样。丑话说在前面,有它本身的缺点可移植性差,调试困难,性能并不出色,但使用它可以加快开发效率。本文将详细介绍模板引擎。

说明 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="
") 伪代码 ‘=’ 默认是转义的 p(content!="
") 伪代码 "!=" 表示不转义
class 与 style 属性
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

相关文章

  • pug安装使用

    摘要:说明原名不叫,是大名鼎鼎的,后来由于商标的原因,改为,哈巴狗。其实只是换个名字,语法都与一样。丑话说在前面,有它本身的缺点可移植性差,调试困难,性能并不出色,但使用它可以加快开发效率。本文将详细介绍模板引擎。 说明 Pug原名不叫Pug,是大名鼎鼎的jade,后来由于商标的原因,改为Pug,哈巴狗。其实只是换个名字,语法都与jade一样。丑话说在前面,Pug有它本身的缺点——可移植性...

    dantezhao 评论0 收藏0
  • 【开发经验】使用WepyBmob新sdk快速开发小程序

    摘要:小项目的内容基本就是维护订单表,订单状态,用户表等,小程序还要解决微信登录,微信支付等等微信。后台管理系统待施工,其实这部分和小程序差不多,改改直接用,出来往的服务一扔,就给甲方用了。 引言:最近一直在做一些小的小程序项目,小项目虽然小,但是前后端和管理系统都还是需要的。在甲方极低的预算下,人工又显得极其紧张,所以我大概摸索出了一套能用尽量少的代码,尽量减少单人工作量,又能实现实际需求...

    hikui 评论0 收藏0
  • vue+webpack+scss+jade(pug)环境搭建

    摘要:标签声明转载须经本人同意这篇博客就聊一聊如何用搭建的环境,以及拓展了下如何在搭建好的环境中使用以及,废话不多说,直接进入主题。第三步补充,依赖扩展现在,我们搭建的环境并不支持,语法,我们需要再加工一下配置。 标签:vue,webpack,jade,scss声明:转载须经本人同意这篇博客就聊一聊如何用webpack搭建vue2.0的环境,以及拓展了下如何在搭建好的环境中使用scss以及p...

    GraphQuery 评论0 收藏0
  • Express 文档(使用模板引擎)

    摘要:一些与一起使用的流行模板引擎是和,应用程序生成器使用作为其默认值,但它也支持其他几个。有关可与一起使用的模板引擎列表,请参阅模板引擎,另请参阅比较模板引擎等。,使用的模板引擎,例如,要使用模板引擎。 使用模板引擎 模板引擎使你可以在应用程序中使用静态模板文件,在运行时,模板引擎用实际值替换模板文件中的变量,并将模板转换为发送到客户端的HTML文件,这种方法可以更轻松地设计HTML页面。...

    gxyz 评论0 收藏0
  • Express 实战(七):视图模板:Pug 和 EJS

    摘要:而框架中最常用的两个视图引擎是和。实际上这些上下文对象就是会在视图中使用到的变量。其实视图缓存并不是缓存视图实际上它缓存的视图路径。根据默认视图引擎将缺少拓展名的视图文件补充完整。实际上存在由不同组织维护的两个不同版本的。 showImg(https://segmentfault.com/img/remote/1460000010821004);前面的内容大都是关于 Express 框...

    wmui 评论0 收藏0

发表评论

0条评论

jeyhan

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<