You might do this: //- layout.pug html head block head script ( src = '/vendor/jquery.js' ) script ( src = '/vendor/caustic.js' ) body block content Suppose you have default scripts in a head block that you wish to use on every page. Pug allows you to replace (default), prepend, or append blocks. primary block primary p nothing Block append / prepend ¶ primary block primary p nothing //- page-b.pug extends sub-layout.pug block content. (Alternatively, the child template could override content altogether.) //- sub-layout.pug extends layout.pug block content. As it shows, content now exposes a sidebar and primary block for overriding. It’s also possible to override a block to provide additional blocks, as shown in the following example. - page-a.pug extends layout.pug block scripts script ( src = '/jquery.js' ) script ( src = '/pets.js' ) block content h1 = title - var pets = Įach petName in pets include pet.pug //- pet.pug p = petName pug is automatically appended to the file name.) Then, define one or more blocks to override the parent block content.īelow, notice that the foot block is not redefined, so it will use the parent’s default and output “some footer content”. To extend this layout, create a new file and use the extends directive with a path to the parent template. - layout.pug html head title My Site - # block scripts script ( src = '/jquery.js' ) body block content block foot #footer p some footer content The example below defines block scripts, block content, and block foot. Providing default content is purely optional, though. Pug blocks can provide default content, if appropriate. In a template, a block is simply a “block” of Pug that a child template may replace. Template inheritance works via the block and extends keywords. Render a set of data console.Pug supports template inheritance.

Compile the source code const compiledFunction = pug. - template.pug p #'s Pug source code! const pug = require( 'pug') The compiled function can be re-used, and called with different sets of data. Call that resultant function with your data, and voilà!, it will return a string of HTML rendered with your data. pug.compile() will compile the Pug source code into a JavaScript function that takes a data object (called “ locals”) as an argument.

The general rendering process of Pug is simple. Pug is available via npm: $ npm install pug Sponsors coin news Getting Started Installation ¶

Pug template cache