I would like to set a class on the body tag by declaring a variable in a template that extends a base layout.
When I try, the body_class
variable is undefined
in the layout.
It appears the layout is executed before the extending template, or they are executed in different scopes or something.
Is there another way? Would a mixin work here?
_layout.jade:
doctype html html(lang="en-au") head meta(charset="utf-8") block css body(class=(body_class || "it-did-not-work")) block header block content block footer
home.jade:
var body_class = 'i-am-the-home-page' extends _layout block header h1 home
To extend this layout, create a new file and use the extends directive with a path to the parent template. (If no file extension is given, . pug is automatically appended to the file name.) Then, define one or more blocks to override the parent block content.
About PUG. pug. js, also known as PUG, is a Javascript library that was previously known as JADE. It is an easy-to-code template engine used to code HTML in a more readable fashion. One upside to PUG is that it equips developers to code reusable HTML documents by pulling data dynamically from the API.
Ah ha! Figured it out.
Create a block at the top of the base layout and add your variables in there.
_layout.jade:
block variables doctype html html(lang="en-au") head meta(charset="utf-8") block css body(class=(body_class || "it-did-not-work")) block header block content block footer
home.jade:
extends _layout block variables - var body_class = 'i-am-the-home-page' block header h1 home
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With