How to enforce express to interpret string as an HTML code?

Question

I'm getting started with node.js and particularly express.js.

Given that I like to be as D.R.Y. as possible, I've decided to have only one index.pug-template which has single HTML element main.content in the body. The actual content is created by pug.renderFile(), based on excerpt, stored in <name>.pug file.

The whole picture is this:

SERVER.JS

response.render("index", {
    content: pug.renderFile(excerpt("aboutus"), {
        title: "About Us",
        subtitle: "Some subtitle here",
        article: "Some text here"
    })
});

ABOUTUS.PUG

h1= title
h3= subtitle
article= article

INDEX.PUG

//- html-head-body routine
main.content= content

The problem is that pug.renderFile() returns HTML code in form of string and, instead of getting three elements inside main.content element, I'm getting this exact string as .innerHTML of this element.

So, what is my mistake here?

Where are you getting excerpt?

Evan Carroll
– Evan Carroll

2017-01-13 00:00:26 +00:00
Commented Jan 13, 2017 at 0:00 — Evan Carroll
– Evan Carroll, Commented Jan 13, 2017 at 0:00

Evan Carroll · Accepted Answer · 2017-01-13 00:02:17Z

1

That's horrible practice. You need to use extends. Not make two calls to pug. You're baking presentation into the wrong layer. This is going to sting you later.

Not to mention, you're forcing HTML into an intermediary string and making extra functions calls that can't be optimized away.

SERVER.JS

response.render("aboutus", {
  title: "About Us",
  subtitle: "Some subtitle here",
  article: "Some text here"
});

ABOUTUS.PUG

extends index

block content
  h1= title
  h3= subtitle
  article= article

INDEX.PUG

// html-head-body routine
main.content= content

If this doesn't make sense think about how your system is going to scale. Let's say you have one pug file for a navigation bar, one for a footer and one for a header etc. etc. You're going to string them all together and pass them into your index.pug on every request?

That will be very much anti-DRY.
That will be slow.
That will be memory intensive.
That will be a maintenance nightmare.

Follow the convention it will do you well.

answered Jan 13, 2017 at 0:02

Evan Carroll

1

Sign up to request clarification or add additional context in comments.

1 Comment

Parzh Over a year ago

Yeah, that is extremely convenient. Thank you very much!

Collectives™ on Stack Overflow

How to enforce express to interpret string as an HTML code?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related