模板引擎pug几种编译渲染方法

选项

filename: string
  要编译的代码的文件名。用于异常信息以及(使用相对路径的)包含(include)和扩展(extends)操作。默认值是 'Pug'。
basedir: string
  模板里所有绝对定位的根目录。
filters: object
  存放自定义过滤器的哈希表。默认为 undefined。self: boolean
  是否使用一个叫做 self 的命名空间来存放局部变量。这可以加速编译的过程,但是,相对于原来书写比如 variable 来访问局部变量,您将需要改为 self.variable 来访问它们。默认为 false。
debug: boolean
  当设置为 true 时,编译产生的函数代码会被记录到标准输出。
compileDebug: boolean
  当设置为 true 时,源代码会被包含在编译出来的模板函数中,用于提供更详实的错误信息(这在开发时会有用)。它默认是启用的,除非是在 Express 的生产环境模式中。
globals: Array<string>
  该数组用于向模板中添加全局对象的名字,编译器将保证它们不被局部作用域影响。
cache: boolean
  当设置为 true 时,编译出来的函数会被缓存下来。此时必须填写 filename 选项作为缓存的索引字段。该选项仅用于 render 函数。默认为 false。
inlineRuntimeFunctions: boolean
  相对于使用 require 来获得公用的运行时函数,是否需要直接嵌入这些运行时函数。在 compileClient 函数里默认是 true,因此就不需要再手动包含那些函数(从而让其能在浏览器上运行)。在其他的 compile / render 系列函数中,默认是 false。
name: string
  模板函数的名称。仅用于 compileClient 函数。默认值是 'template'。

方法

Pug 的渲染操作一般来说是相当简单的。 pug.compile()会把 Pug 代码编译成一个 JavaScript 函数,并且这个函数有一个参数可用于传入数据(局部变量,locals),调用这个编译出来的函数,并且传入数据,这时返回的就是用您提供的数据渲染的 HTML 字符串了。
Pug 也提供了 pug.render() 系列的函数,它们把编译和渲染两个步骤合二为一。当然,在每次执行 render的时候,这样一个模板函数都需要被重新编译一遍,这会在一定程度上影响性能。但同时,可以在执行 render 的时候配合使用 cache选项,它将会把编译出来的函数自动存储到内部缓存中。

pug.compile(source, ?options)把一个 Pug 模板编译成一个可多次使用、可传入不同局部变量渲染的函数。
source: string 需要编译的 Pug 代码
options: ?options 存放选项的对象
returns: function 一个可以从包含局部变量的对象渲染生成出 HTML 的函数

var pug = require('pug');

// Compile a function
var fn = pug.compile('string of pug', options);

// Render the function
var html = fn(locals);
// => '<string>of pug</string>'

pug.compileFile(path, ?options)从文件中读取一个 Pug 模板,并编译成一个可多次使用、可传入不同局部变量渲染的函数。
path: string 需要编译的 Pug 代码文件的位置
options: ?options 存放选项的对象
returns: function 一个可以从包含局部变量的对象渲染生成出 HTML 的函数

var pug = require('pug');

// 编译出一个函数
var fn = pug.compileFile('到 Pug 代码文件的路径', options);

// 渲染它
var html = fn(locals);
// => '从 Pug 生成的 HTML 代码'

pug.compileClient(source, ?options)把一个 Pug 模板编译成一份 JavaScript 代码字符串,它可以直接用在浏览器上而不需要 Pug 的运行时库。
source: string 需要编译的 Pug 代码
options: ?options 存放选项的对象
returns: string 一份 JavaScript 代码字符串

var pug = require('pug');

// 编译出一个函数
var fn = pug.compileClient('string of pug', options);

// 渲染它
var html = fn(locals);
// => 'function template(locals) { return "从 Pug 生成的 HTML 代码"; }'

pug.compileClientWithDependenciesTracked(source, ?options)与 compileClient 相似,但这个函数返回的是这样一个结构:

{
  'body': 'function (locals) {...}',
  'dependencies': ['filename.pug']
}

您应该在需要 dependencies 来实现一些诸如“监视 Pug 文件变动”的功能的时候,才使用该函数。

pug.compileFileClient(path, ?options) 从文件中读取一个 Pug 模板并编译成一份 JavaScript 代码字符串,它可以直接用在浏览器上而不需要 Pug 的运行时库。
path: string 需要编译的 Pug 代码文件的位置
options: ?options 存放选项的对象
options.name: string 如果您传递了 .name 属性给选项对象,那么编译出来的函数名称就会被换成这个属性指定的名称。
returns: string一份 JavaScript 代码字符串
首先,写下我们的模板……

h1 这是一个 Pug 模板
h2 作者:#{author}

然后将 Pug 编译为函数代码字符串。

var fs = require('fs');
var pug = require('pug');

// 将模板编译为一个函数的代码字符串
var jsFunctionString = pug.compileFileClient('/path/to/pugFile.pug', {name: "fancyTemplateFun"});

// 或许您还想要把模板编译到一个叫做 templates.js 的文件里,让浏览器直接使用。
fs.writeFileSync("templates.js", jsFunctionString);

您获得的输出的结果可能类似下面的内容(即被写入 templates.js 中的代码):

function fancyTemplateFun(locals) {
  var buf = [];
  var pug_mixins = {};
  var pug_interp;

  var locals_for_with = (locals || {});

  (function (author) {
    buf.push("<h1>这是一个 Pug 模板</h1><h2>作者:"
      + (pug.escape((pug_interp = author) == null ? '' : pug_interp))
      + "</h2>");
  }.call(this, "author" in locals_for_with ?
    locals_for_with.author : typeof author !== "undefined" ?
      author : undefined)
  );

  return buf.join("");
}

请确保您已经把 Pug 的运行时库(node_modules/pug/runtime.js)传给了浏览器,从而让浏览器能够顺利执行您刚才编译出来的函数。

<!DOCTYPE html>
<html>
  <head>
    <script src="/runtime.js"></script>
    <script src="/templates.js"></script>
  </head>

  <body>
    <h1>这是一个神奇的模板。</h1>

    <script type="text/javascript">
      var html = window.fancyTemplateFun({author: "enlore"});
      var div = document.createElement("div");
      div.innerHTML = html;
      document.body.appendChild(div);
    </script>
  </body>
</html>

pug.render(source, ?options, ?callback)
source: string 需要渲染的 Pug 代码
options: ?options 存放选项的对象,同时也直接用作局部变量的对象
callback: ?function Node.js 风格的回调函数,用于接收渲染结果。注意:这个回调是同步执行的。
returns: string 渲染出来的 HTML 字符串

var pug = require('pug');

var html = pug.render('string of pug', options);
// => '<string>of pug</string>'

pug.renderFile(path, ?options, ?callback)
path: string 需要渲染的 Pug 代码文件的位置
options: ?options 存放选项的对象,同时也直接用作局部变量的对象
callback: ?function Node.js 风格的回调函数,用于接收渲染结果。注意:这个回调是同步执行的。
returns: string 渲染出来的 HTML 字符串

var pug = require('pug');

var html = pug.renderFile('path/to/file.pug', options);
// ...
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,099评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,828评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,540评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,848评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,971评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,132评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,193评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,934评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,376评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,687评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,846评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,537评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,175评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,887评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,134评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,674评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,741评论 2 351

推荐阅读更多精彩内容