CODEWITHSUNDEEP
javascripthtmlnode.jspug
Justin
Justin

Reputation: 2334

Jade conditional statements rendered as plain text

I am trying to conditionally render some tags in my <head>

Here's the code:

<!doctype html>
    <html ng-app='nodeApp'>

    <head>
        if (title)
            <title>#{title}</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="UTF-8">
        <meta name='author' content='#{author}'>
        <meta name='og:title' content='#{title}'>
        <meta name='description' content='#{description}'>
        <meta name='og:description' content='#{description}'>
        <meta name='og:image' content='#{image}'>
        <meta name="theme-color" content="#3F51B5">
        <!-- CSS files are inserted here -->
        <link rel="stylesheet" href="/static/client.css" type="text/css">
    </head>

When I go to my page the text "if (title)" is rendered in plain text at the top of the page. This happens to ALL conditionals.. however, the title tag is rendered with the correct text.

I have also tried

if title
            <title>#{title}</title>

and 

if (title) {
            <title>#{title}</title>
}

in my backend I have (throughout the class)..

const jade = require('jade');
this.locals = {
                title: process.env.sitename
            };
this.header = jade.render(this.header, this.locals);

So sitename is returned correctly because the title gets populated, but the if statements don't do anything and just get rendered as plain text. Thoughts?

Upvotes: 1

Views: 1021

Answers (2)

tomtom
tomtom

Reputation: 642

I think the problem might be that you are mixing writing regular html with jade. Since you are writing with regular html-tags the if-statement is already a child to head. But then you use indentation as well and it becomes sort of a double indentation and Jade gets confused. Try this without indentation before the if-statement:

<head>
if (title)
  <title>#{title}</title>

Or better yet. Use Jade consistently.

Upvotes: 1

Lionel T
Lionel T

Reputation: 1597

You have to prepend a hyphen for the javascript statements like here.

- var title = true;

- if (title) {
    h1(title='#{title}') My Title
- }

Upvotes: 0

Related Questions