Pug(原名 Jade,因商标问题改名)是一个强大、优雅、功能丰富的 Node.js 模板引擎。
Pug 的一般渲染过程很简单,pug.compile()
会将 Pug 源码编译成 JavaScript 函数,该 JavaScript 函数将数据对象locals
作为参数,调用该结果函数,将返回与数据一起呈现的 HTML 字符串。
可以重复使用已编译的函数,并使用不同的数据集调用该函数。
//- template.pug
p #{name}'s Pug source code!
const pug = require('pug');
// Compile the source code
const compiledFunction = pug.compileFile('template.pug');
// Render a set of data
console.log(compiledFunction({
name: 'Timothy'
}));
// "<p>Timothy's Pug source code!</p>"
// Render another set of data
console.log(compiledFunction({
name: 'Forbes'
}));
// "<p>Forbes's Pug source code!</p>"
Pug 还提供了pug.render()
将编译和渲染结合在一起的一系列功能。但是,每次render
调用时都会重新编译模板函数,这可能会影响性能。
const pug = require('pug');
// Compile template.pug, and render a set of data
console.log(pug.renderFile('template.pug', {
name: 'Timothy'
}));
// "<p>Timothy's Pug source code!</p>"
Pug的使用 Pug是一款健壮、灵活、功能丰富的HTML模板引擎,专门为 Node.js 平台开发。Pug是由Jade 改名而来。 是一种通过缩进(表示标签间的嵌套关系)的方式来编写代码的过程,在编译的过程中,不需要考虑标签是否闭合的问题。可以加快写代码速度,也为代码复用提供了便捷。 1. 标签 在默认情况下,在每行文本的开头(或者紧跟白字符的部分)书写这个 HTML 标签的名称。使用缩进来表示标
一、 介绍 pug,原名jade,是流行的HTML模板引擎,,最大的特色是使用缩进排列替代成对标签。它简化了HTML的成对标签的写法,使代码更加简洁、开发效率更高,但是同时它也带来了一些副作用:可移植性差、调试困难、性能并不出色。 二、使用理由 HTML标签必须进行闭合,如果不闭合的话容易报错。 HTML没有模板机制,如果不使用前端框架维护起来非常困难 三、简单事例 #hello <div id=
1.Jade中文文档 2.Pug 中文文档
模板引擎:模板引擎是web应用中动态生成html的工具,负责将数据和模板结合;常见模板引擎有:ejs、jade(现更名为pug)、Handlebars、Nunjucks、Swig等;使用模板引擎可以是项目结构更加清晰,结构更加合理,让项目维护变得更简单; pug语法:通过缩进关系,代替以往html的层级包含关系,如 个简单的静态 可以表达为,注意要统一使用tab或者空格缩进,不要混用 内联书写层级
预处理器 预处理器是在真正的编译开始之前由编译器调用的独立程序。预处理器可以删除注释、包含其他文件以及执行宏(宏macro是一段重复文字的简短描写)替代。 Pug Pug是一款健壮、灵活、功能丰富的HTML模板引擎,专门为 Node.js 平台开发。Pug是由Jade 改名而来。 是一种通过缩进(表示标签间的嵌套关系)的方式来编写代码的过程,在编译的过程中,不需要考虑标签是否闭合的问题。可以加快写
一、初步认识pug 1.所谓的pug就是我们之前说的jade,也就是一种通过缩进的方式来编写代码的过程,在编译的过程中,我们不需要考虑标签是否闭合的问题。此外,用这种编译方式,加快了我们写代码的速度,也为代码复用提供了便捷。 2.在学习pug基础语法之前,首先要了解pug的命令行的使用,例如: doctype html html head title
1.类名和ID名 a.button a(class="button") a#button a(id = "button") 编译后:<a class="button"></a> <a id="button"></a> 如果前面没指定标签名,则默认div 2.属性 用()包裹,属性值之间用逗号隔开。可实现根据条件设置属性的语法形式 &at
jade/pug-html coffee - js json格式化(可折叠高亮) http://javascript.ruanyifeng.com/#toc5 转载于:https://www.cnblogs.com/jianzhouf/p/6610355.html
Vue大操练 技术栈:pug + typescript 项目前景:在前几天看到别人家的项目使用了pug + ts,总共代码行数加起来简直少的可怜,心痒痒便自己动手试了一试 解决的问题:视图层的文本信息完全和页面解耦,不用担心找一个字段/莫名其妙标点的文本错误啦,加上ts以后报错信息也更多了呢(编译不通过你丫咋运行!) 语法介绍 pug 使用缩进进行分组,无标签化 .p(v-mode="myMode
代码 Code Pug 为您在模板中嵌入 JavaScript 提供了可能。这里有三种类型的代码。 不输出的代码 用 - 开始一段不直接进行输出的代码,比如:- for (var x = 0; x < 3; x++) li item 渲染后:itemitemitem Pug 也支持把它们写成一个块的形式:- var list = ["Uno", "Dos", "Tres", "Cuatro", "
在用pug模板搭建页面的时候 经常需要只引进中间内容部分 而头和脚是已经有的部分 类似于移动端的单页面应用 这个时候 如果将中间部分插入到项目之中无法运行 就要检查一下是不是pug 模板出现了问题 因为pug 模板对缩进的要求是比较严格的 如果在插入引入代码后 首行不缩进 是无法生效的 在遇到页面滚动条bug 的时候 要记得改完以后刷新再看看 因为有的时候npm ru
前言:pug是一款健壮、灵活、功能丰富的模板引擎 1.安装npm包 npm i -D pug pug-html-loader pug-plain-loader 2.build/webpack.base.conf.js修改配置 test:/\.pug$/, loader: "pug-html-loader" } 转载于:https://www.cnblog
Pug原名不叫Pug,原来是大名鼎鼎的jade,后来由于商标的原因,改为Pug,哈巴狗。以下是官方解释: it has been revealed to us that "Jade" is a registered trademark, and as a result a rename is needed. After some discussion among the maintainers,
1、安装相应loader : pug-html-loader和pug。 npm i pug pug-html-loader -S 2、修改 node_modules\@angular\cli\models\webpack-configs\common.js文件,在loader中添加: { test: /\.pug$/, loaders: [
具体查看ejs官方文档 https://github.com/mde/ejs
我们自己实现了一个轻量级的模板引擎,不要问为什么不用smart之类的,因为我们认为没有必要为了一个小小的模板引擎而引入smaart这样复杂的实现。你可能会说,smart功能强大,支持各种标签,标签也是很强大,而且还可以对模板引擎进行各种"灵活"的配置... 这里我们觉得有必要说明一下: 框架的内置模板引擎基本上实现了我们日常开中所有常用的标签。 不常用的标签我们也做了巧妙的实现。 我们只提供了扩展
内置模板引擎 视图的模板文件可以支持不同的解析规则,默认情况下无需手动初始化模板引擎。 可以通过下面的几种方式对模板引擎进行初始化。 配置文件 内置模板引擎的参数统一在配置目录的template.php文件中配置,例如: return [ // 模板引擎类型 支持 php think 支持扩展 'type' => 'Think', // 模板路径 '
Warning: The packages listed below may be outdated, no longer maintained or even broken. Listing here does not constitute an endorsement or recommendation from the Expressjs project team. Use at your
Use the app.engine(ext, callback) method to create your own template engine. ext refers to the file extension, and callback is the template engine function, which accepts the following items as parame
hi-nginx-java内置了两个mustache模板引擎:mustache.java和jmustache。 以下介绍仅就jmustache而言。 字符串模板 字符串模板是最简单的情况。例如: package test; import hi.request; import hi.response; import hi.route; import java.util.regex.Matcher
快速开始 安装模块 # 安装koa模板使用中间件 npm install --save koa-views # 安装ejs模板引擎 npm install --save ejs 使用模板引擎 demo源码 https://github.com/ChenShenhai/koa2-note/blob/master/demo/ejs/ 文件目录 ├── package.json ├── index.js
模版引擎 引入 我们在使用ajax请求数据时,返回的如果是一个 JSON 格式的字符串,我们需要将其包装到对应的HTML代码中,再添加到页面上,才能看到效果。那么这个包装得过程有没有简单的方法呢? 假设在 js 中有如下数据: var obj = { name:"fox", age:18, skill:"卖萌" }; 希望包装为: <