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. It is often used to generate HTML, but it can also be used to generate XML or other types of documents.Pug supports template inheritance. Pug is a templating language for Node.js and the browser. In this series, however, we'll focus on HTML. It should be noted that many templating languages do not only support HTML, but can generate other types of files as well. This means these template files must be converted (compiled, as we call it in the programming world) to HTML before being forwarded to browsers to render.
The latter, however, are different languages than HTML and have their own syntax.So we're basically still writing in HTML. With the former which is just an editor extension, we write abbreviations which expand to full HTML code instantly when we press TAB.The fundamental difference between Emmet and templating languages like Pug and Slim is that, In this series, we're going to learn the basics of these two and hopefully they would help improve your workflow further. Templating languages are widely used in Web development and two of the most popular ones are Pug and Slim.
This series builds on my post, Supercharge Your Web Dev Workflow With Emmet, to which Maciek Fitzner posted a comment mentioning Pug.
0 kommentar(er)
