I'm working on a project that utilizes the Pug template engine. All my Pug files (layout.pug, head.pug, index.pug, etc.) are stored within a folder named pug. In my layout.pug file, I've established the foundational structure of my HTML document. My aim is to include the head.pug file to dynamically set the page title and canonical URL.
However, I've encountered an issue where the head.pug file is not being detected or applied during the rendering process. I've meticulously reviewed the file locations, syntax, and indentation, yet the problem persists.
What are some troubleshooting steps I can take to resolve this issue?
here is the code:
1) head.pug
meta(charset="UTF-8")
meta(name="viewport" content="width=device-width, initial-scale=1.0")
block title
title #{pageTitle}
block description
meta(name="description" content="#{pageDescription}")
block canonical
link(rel="canonical" href="#{canonicalURL}")enter code here
2) Layout.pug
doctype HTML
html(lang="en")
block head
include head.pug
body
include navbar.pug
block content
include footer.pug
3) index.pug
extends layout
block head
include head.pug
block title
- var pageTitle = "My Website"
block description
- var description = "This is my official website"
block canonical
- var canonicalURL = "https://adityasutar.com/"
block content
h1 Hello
Meta tags are not detected in the browsers
There's a few things wrong with the code:
includedeclarations can't have things indented beneath them.blockin a child template will replace the content of ablockwith the same name in a parent template<head>element defined (note that naming a block "head" doesn't automatically render a<head>element)(attr="#{variable}")doesn't work in Pug anymoreA better way to achieve what you're trying to do would be as follows:
prependinstead ofblockhere. This will put this block's content before any content within the corresponding block in the parent template, instead of replacing it. A separate block for each variable isn't necessary either.