CODEWITHSUNDEEP
htmlnode.jspugtemplate-engine
RandomMath
RandomMath

Reputation: 691

Jade/Pug - Extending layout - variable not being recognised

I am using Jade/Pug to simplify my HTML and I'm trying to create a block with meta details. When I extend my layout in my index file I can't seem to replace #{desc} with the desc variable.

Am I doing something wrong?

Layout:

doctype
html
  head
    block title
        title variables
        meta(name='description' content='#{desc}')
  body
    p hello

Index:

extends includes/layout
block title
    title things
    - var desc="hello"

The meta isn't being outputted when the source code is viewed

Upvotes: 2

Views: 3660

Answers (2)

tmslnz
tmslnz

Reputation: 1813

Jade/Pug doesn't merge blocks or their scope, which is what you appear to be expecting here. It can only replace, append or prepend.

The block in index.pug is overriding the default content in layout.pug. var desc = 'hello' is never used.

My advice would be define and use a mixin, or try to declare your vars outside the scope of the block.

// layout.pug
doctype
html
  head
    title=title || 'Default Title'
    meta(name='description' content='#{description || "Default desc"}')
  body
    p hello

// index.pug
extends includes/layout
-
    var title = 'Mario'
    var description = 'Luigi'

// <your markup here>

Upvotes: 4

Peter Lyons
Peter Lyons

Reputation: 146014

Made a bunch of fixes described below.

layout.pug

- var desc = 'default meta desc'
block variables
doctype
html
  head
    block title
      meta(name='description' content=desc)
  body
    p hello

index.pug

extends includes/layout
block variables
  - desc = "hello"
block append title
  title things
  • use block append instead of block for the title
  • put variables in the layout and override them in the page
  • Reference desc directly without the interpolation syntax

Upvotes: 4

Related Questions