If a child template tried to add content outside of a block, Pug would have no way of knowing where to put it in the final page. This is important! Parent templates define a page’s overall structure, and child templates can only append, prepend, or replace specific blocks of markup and logic. Note that only named blocks and mixin definitions can appear at the top (unindented) level of a child template. However, if you chain many, many templates together, you can make things a lot more complicated for yourself. Pug’s template inheritance is a powerful feature that allows you to split complex page template structures into smaller, simpler files.
When using block append or block prepend, the word “ block” is optional: //- page.pug extends layout append head script ( src = '/vendor/three.js' ) script ( src = '/game.js' ) Common mistakes ¶ You can simply append the block: //- page.pug extends layout.pug block append head script ( src = '/vendor/three.js' ) script ( src = '/game.js' ) You want some game related scripts as well as these defaults. Now, consider a page of your JavaScript game. 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.
0 kommentar(er)
