pug的安装与使用

jeyhan 发布于2019-08-29 16:17 / 1445人阅读

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

说明 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}

持续更新，希望支持。

专线服务混合云 hbase的安装与使用 mysql数据库的安装与使用 mysql安装与使用 hadoop安装与使用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113646.html

pug的安装与使用

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

dantezhao 2019-08-02 11:09 评论0 收藏0
【开发经验】使用Wepy与Bmob新sdk快速开发小程序

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

hikui 2019-08-23 12:10 评论0 收藏0
vue+webpack+scss+jade(pug)的环境搭建

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

GraphQuery 2019-08-01 15:59 评论0 收藏0
Express 文档（使用模板引擎）

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

gxyz 2019-08-23 14:21 评论0 收藏0
Express 实战（七）：视图与模板：Pug 和 EJS

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

wmui 2019-08-20 18:54 评论0 收藏0