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. Link(rel='stylesheet' href='/css/cars.Pug supports template inheritance. Link(rel='stylesheet' href='/css/index.css') Meta(name='viewport', content='width=device-width, initial-scale=1.0')

P= 'Two to the power of ten is: ' + 2**10 - Now I can refer to a 'name' variable in my Pug code Nav#navbar-default // My wonderful navbar

Veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea Tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod H1.navbar-header My Website! We can write anything we want here … Rendered /home/jim/Desktop/pug-examples/html/index.html Previous Post Next Post A Guide to the Pug HTML Template Preprocessor

Pug template images