Jade入门学习

article/2025/3/16 23:57:40

title: Jade入门学习
date: 2018-05-17 20:09:31
tags: [jade, pug]

jade是超高性能的node JavaScript模板引擎,有着非常强大的API和大量杰出的特性。它主要针对node的服务端。由于商标的原因,改为Pug,哈巴狗。Pug有它本身的缺点——可移植性差,调试困难,性能并不出色,但使用它可以加快开发效率。

标签嵌套

使用缩进来表示标签间的嵌套关系,这样可以构建一个 HTML 代码的 树状结构 语法

ulli item Ali item B

为了节省空间, Pug 嵌套标签提供了一种 内联式 语法

a: img

Pug知道哪些元素是自闭合的,为了语法的完整性,也可以通过在标签后加上 / 来明确声明此标签是 自闭合

img
img/
input 
input/

HTML5的 DOCTYPE 书写如下

doctype html

当然,也可以自定义一个 doctype 字面值。

doctype html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"

内容

Pug 提供了三种常用的方式来放置内容

  • 【管道文本】
    这是最简单的向模板添加纯文本的方法。只需要在每行前面加一个 | 字符,这个字符在类 Unix 系统下常用作“管道”功能,因此得名
| 纯文本当然也可以包括 <strong>HTML</strong> 内容。
p| 但它必须单独起一行。
  • 【标签内文本】
    这实际上是最常见的情况,文本只需要和标签名隔开一个空格即可.
p 纯文本 <strong>HTML</strong> 内容
  • 【嵌入大段文本】
    有时可能想要写一个大段文本块。比如嵌入脚本或者样式。只需在标签后面接一个 .即可。 注意: 不能有空格
script.if (usingPug)console.log('请用Pug')else console.log('傻不拉几')

属性

  1. 标签属性和 HTML 语法非常相似,它们的值就是普通的 JavaScript 表达式。可以用逗号作为属性分隔符,也可以不加逗号
  2. 如果有很多属性,可以把它们分几行写
  3. 如果有一个很长的属性,并且JavaScript运行时引擎支持ES2015模板字符串,可以使用它来写属性值
// 1. 
a(href='baidu.com') 百度
= '\n'
a(class='button' href='baidu.com') 百度
= '\n'
a(class='button', href='baidu.com') 百度// 2. 
input(type='checkbox'name='agreement'checked
)// 3. 
input(data-json=`{"非常": "长的","数据": true}
`)
  1. 默认情况下,所有的属性都经过转义(即把特殊字符转换成转义序列)来防止诸如跨站脚本攻击之类的攻击方式。如果要使用特殊符号,需要使用 != 而不是 =

注意: 未经转义的缓存代码十分危险。必须正确处理和过滤用户的输入来避免跨站脚本攻击

div(escaped="<code>")
div(unescaped!="<code>")
  1. 在Pug中,布尔值属性是经过映射的,这样布尔值(true和false)就能接受了。没有指定值时,默认是true
input(type='checkbox' checked)
= '\n'
input(type='checkbox' checked=true)
= '\n'
input(type='checkbox' checked=false)
= '\n'
input(type='checkbox' checked=true.toString())
  1. style(样式)属性可以是一个字符串(就像其他普通的属性一样)还可以是一个对象
a(style={color: 'red', background: 'green'})
  1. 标签嵌入

#[标签名(标签属性) 标签内容]
8. 空格调整
Pug 默认会去除一个标签前后的所有空格,而标签嵌入功能可以在需要嵌入的位置上处理前后空格

p| 如果我不用嵌入功能来书写,一些标签比如strong strong| 和em em| 可能会产生意外的结果。
p.如果用了嵌入,在 #[strong strong] 和 #[em em] 旁的空格就会让我舒服多了。

效果,前者strong前后无空格,后者有空格。(啦strong啦啦,啦 strong 啦)

  1. 注释
// 注释
//- 注释不输出,即不会出现在结果中
// 块注释继续写块注释

ps: 所有以 < 开头的行都会被当作纯文本,因此直接写一个 HTML 风格的条件注释也是没问题的

<!--[if IE 8]>
<html lang="en" class="lt-ie9">
<![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en">
<!--<![endif]-->
  1. 使用=或#{}来进行变量的真实值替换
    在 #{ 和 } 里面的代码也会被求值、转义,并最终嵌入到模板的渲染输出中.Pug 足够聪明来分辨到底哪里才是嵌入表达式的结束,所以不用担心表达式中有 },也不需要额外的转义;使用!{}嵌入没有转义的文本进入模板中

变量

变量来源有三种,分别是pug文件内部、命令行参数和外部JSON文件。

// 文件内部
-var val = "aaaa";
p= val// 命令行
pug test.pug -P -w --obj '{val: "fldasj"}'// 外部json文件
pug test.pug -P -w -O test.json

include

包含(include)功能允许把另外的文件内容插入进来,被包含的如果不是 Pug 文件,那么就只会当作文本内容来引入

//- 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 支持使用 block 和 extends 关键字进行模板的继承。一个称之为“块”(block)的代码块,可以被子模板覆盖、替换。这个过程是递归的。

复制代码
//- layout.pug
htmlheadmeta(charset="UTF-8")title 我的站点 - #{title}block scriptsscript(src='/jquery.js')bodyblock contentblock foot#footerp 一些页脚的内容//- 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//- pet.pug
p= petName  // 或者 p #{petName}

值得注意的是,因为这里的 foot 块 没有 被重定义,所以会依然输出“一些页脚的内容”

扩展

Pug 允许去替换(默认的行为)、prepend(向头部添加内容),或者 append(向尾部添加内容)一个块。

参考文献: jade


3分钟,了解天下大事

每天花3分钟在【每日全搜索】上,可尽知天下大事。
把省下来的时间留给自我技术沉淀噻~
在这里插入图片描述


http://chatgpt.dhexx.cn/article/G8FUgjee.shtml

相关文章

Jade linux 位置,jade 6.5 安装教程

简介&#xff1a; MDI Jade是一款XRD分析软件&#xff0c;可以分析X射线衍射&#xff0c;分析出衍射图谱&#xff0c;获得材料的成分、材料内部原子或分子的结构或形态等信息的研究手段。 MDI Jade可以对X射线衍射进行分析&#xff0c;通过分析得到的结果&#xff0c;软件可以判…

jade支持html,Jade !HTML框架

1.电脑要有nodejs npm install jade -g 3.pwd 4.subl .打开编译器 格式为jade的文件 5.jade jadetut.jade 编译 安装 $ npm install jade --global -usage $ jade [options] [dir|file ...] Options: -h, --help output usage information pads pagers set-top boxes 语法 incl…

MDI Jade6.5安装教程-附安装包

安装软件前&#xff0c;请退出360、腾讯电脑管家等安全和杀毒软件。 1&#xff0e;双击setup.exe 2&#xff0e;选择是 3.下一步 4.同意许可协议&#xff0c;下一步 5.下一步&#xff08;默认不要改&#xff09;&#xff0c;如果需要更改&#xff0c;希望只更改盘符&am…

java模板引擎 jade_jade模板引擎

jade是使用JavaScript实现&#xff0c;可供nodejs使用的高性能模板引擎(性能高不高&#xff0c;有些争议。姑且称之为高性能吧&#xff01;)。模板引擎有很多&#xff0c;主要使用比较广泛的是jade和ejs&#xff0c;modejs项目默认使用jade作为模板引擎&#xff0c;我也就不多说…

jade java_JADE提升篇

以下如果未特殊声明&#xff0c;都在JADE管理器中运行&#xff0c;然后再Eclipse控制台中查看&#xff01; JADE行为类 在前面的例子中&#xff0c;Agent所作的工作都定义在了setup方法中&#xff0c;实际上它具有的行为和执行的动作都应该定义在Behavious类中&#xff0c;我们…

Windows系统缺失jade6.dll文件导致程序无法运行解决办法

其实很多用户玩单机游戏或者安装软件的时候就出现过这种问题&#xff0c;如果是新手第一时间会认为是软件或游戏出错了&#xff0c;其实并不是这样&#xff0c;其主要原因就是你电脑系统的该dll文件丢失了或没有安装一些系统软件平台所需要的动态链接库&#xff0c;这时你可以下…

JADE平台搭建

首先从下列官方网站下载必要的软件或文件。 JADE官方网站&#xff1a;http://jade.tilab.com/&#xff1b; JAVA环境搭建之JDK官网&#xff1a;http://www.oracle.com/technetwork/java/javase/downloads/index.html eclipse软件下载&#xff1a;https://www.eclipse.org/do…

html jade文件,Jade模板

Express框架里内嵌了Jade模板引擎。正好项目里也要用到&#xff0c;本篇整理了下Jade的相关用法。 安装与执行 标签和属性 多行文本 变量 语句 Mixin 模板 注释 过滤器 安装与执行 安装很简单&#xff1a; npm install jade –global 安装后本地随便新建一个sample.jade文件&am…

MDI Jade6的安装(含ocx控件的安装、PDF索引建立、修改注册表)

前言 关于介绍及安装jade的资料及教程&#xff0c;上小木虫、六维、百度等一搜一大堆&#xff0c;这里不再详细介绍及逐一列举。 这里只谈干货&#xff0c;里面很多问题需要仔细摸索解决&#xff0c;这里就一一说明了。 记住&#xff1a;不管是安装文件还是所需要的文件&…

Jade6安装及PDF卡片导入

2020年是中国脱贫攻坚的收官之年&#xff0c;也是全面建成小康社会的关键一年。在这样一个具有标志性意义的年代&#xff0c;我觉得应该没有人像我一样还用着过渡版的Windows 8了。别问为什么不装Windows 10&#xff0c;因为电脑带不动&#xff0c;毕竟伴随我进行了十年的艰苦征…

Ubuntu系统重装Ubuntu系统

系统环境&#xff1a;Ubuntu18.04 目的&#xff1a;重装Ubuntu系统 步骤&#xff1a; 1. sudo usb-creator-gtk 2. 选择iso系统文件 Ubuntu 18.04.4.XXX.iso 3. 选择u盘&#xff0c;并选择Make Startup Disk 4. 制作完成后重启电脑&#xff0c;长按F12(联想笔记本&#xf…

【2021】重装ubuntu16.04系统

2021年3月3日19点47分 本人因为种种原因导致ubuntu16.04系统崩溃&#xff0c;现需要重装系统&#xff0c;故记录下这次重装ubuntu之旅。 原因&#xff1a;ubuntu16.04 - 检测到系统程序出现问题 一直在登录用户的界面&#xff0c;登录进去后再闪退出来&#xff0c;一直循环登…

重装Ubuntu系统及系列软件安装

重装Ubuntu系统及系列软件安装 【1】安装ubuntu20.04.03系统下载Ubuntu20.04.03系统更换系统apt的源 【2】CUDA和cudnn安装下载CUDA安装包并安装 【3】pycharm的安装【4】conda的安装【5】兼容Tf1和30显卡 【1】安装ubuntu20.04.03系统 下载Ubuntu20.04.03系统 【下载地址】h…

双系统重装Ubuntu

完全删除Ubuntu 1、右键此电脑-管理-磁盘管理&#xff0c;删除Ubuntu所在卷&#xff08;Ubuntu EFI分区无法删除&#xff09; 2、删除Ubuntu EFI分区 ①Win R 输入cmd打开终端&#xff0c;输入 diskpart 进入磁盘工具 ②输入 list disk 查看磁盘&#xff0c;输入 select d…

Windows重装Ubuntu系统

一&#xff0c;去官网下载Ubuntu镜像 二、下载镜像安装工具&#xff08;win32diskManger&#xff09; 下载之后完成安装 三、制作Ubuntu安装盘 打开win32diskManger 选择镜像文件&#xff0c;选择u盘&#xff0c;确认后写入&#xff0c;请备份好资料&#xff0c;写入后数据会格…

Ubuntu16.04重装系统

Ubuntu16.04重装系统 安装显卡驱动第一步 禁用nouveau第二步 下载驱动第三步 进入命令行模式&#xff0c;关闭lightdm第四步 安装显卡驱动第五步 查看Nivida 设置更新与源地址步骤 安装gnome桌面安装搜狗输入法安装谷歌浏览器安装Anaconda3安装Pycharm安装keras下载Cuda安装cuD…

装机(一) ubuntu server 系统安装图文教程

装机任务为Dell C4130服务器&#xff0c;安装ubuntu16.04系统&#xff0c;无图形界面。 第一步为了安装ubuntu系统我们需要先下载合适的系统&#xff0c;这里我们下载了ubuntu16.04LTS服务器版本&#xff0c;也就是server版本的系统。可以去官方网站下载http://www.ubuntu.org…

如何重装Ubuntu 系统

如果你弄坏了你的 Ubuntu 系统&#xff0c;并尝试了很多方法来修复&#xff0c;你最终放弃并采取简单的方法&#xff1a;重新安装 Ubuntu。 我们一直遇到这样一种情况&#xff0c;重新安装 Linux 似乎比找出问题并解决来得更好。排查 Linux 故障能教你很多&#xff0c;但你不会…

ubuntu重装系统

新的电脑主板带有UEFI功能&#xff0c;但是使用这个功能有很多问题。 1&#xff0c;系统稳定后不要再update了。 2&#xff0c;必须给UEFI分一个区&#xff0c;100M大小就够了&#xff0c;否则系统起不来 3&#xff0c;重装根分区&#xff0c;参照http://forum.ubuntu.org.c…

Windows还是Ubuntu重装系统,不用愁,傻瓜式安装

程序猿&#xff1a;妹子电脑装系统不用愁&#xff01;Windows还是Ubuntu都搞定&#xff01; 重装系统是不是很麻烦&#xff1f;是不是很烦重装系统&#xff0c;什么windows&#xff0c;什么Ubuntu&#xff08;linux),看上去就麻烦&#xff0c;那么小编今天就给你科普一下这些重…