Pug 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
Pug 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
授权协议: MIT
开发语言: JavaScript 查看源码 »
操作系统: 跨平台
收录时间: 2020-05-07
提 交 者: h4cd

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>"
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

Pug 的相关博客

pug参考文档

1. API express框架的渲染模板有多种选择,官方的例子是Pug,网上找了一下,Pug没有可以参考的中文文档,于是自己动手丰衣足食...

初步认识pug

一、初步认识pug 1.所谓的pug就是我们之前说的jade,也就是一种通过缩进的方式来编写代码的过程,在编译的过程中,我们不需要考...

jade(pug)学习和使用

由于版权问题,现已改名pug.但无须担心,几乎没什么区别.就算依然使用jade也不会有太大影响. 慢慢迁移过渡即可 # 官网 https...

Pug+Stylus+Bootstrap入门

Pug和Stylus的简单语法和使用+Bootstrap的栅格系统的简介

vue+webpack添加对pug的支持

// 安装pug和加载器 yarn add pug-loader pug-plain-loader pug --dev    // webpack.config.js中 添加规则 { test:...

网页模板pug基本语法

该博客首发于www.litreily.top Pug – robust, elegant, feature rich template engine for Node.js pug原名jade,因版权问题更...

vue 使用pug(详细说明)

1.安装pug npm i -D pug pug-html-loader pug-plain-loader cli2.0脚手架修改build/webpack.base.conf.js文件 module: { ru...

Support Pug Template Engine In Intellij IDEA

Opening Preferences -> Editor -> Code Style -> File Types, Find "Jade" under Recognized File Types Add "*.pug" to the...

升级nuxt2.0后遇到的问题

由于我喜欢用pug模版所以在vue里面用了 <template lang="pug"> 这类写法 结果升级了nuxt2.0后报找不到模块 后来查看了vue-loa...

Pug 的相关问答

还没有任何问答,马上提问

评论 (0)

加载中
更多评论
0 评论
0 收藏
分享
返回顶部
顶部