Assign a class on body conditionally in Jade

StackOverflow https://stackoverflow.com/questions/23610670

题

Assume I have main template file named layout.jade and a bunch of files that extend this template - home, about, products and so on.

In main template I put structure like this:

    body
        section.main-content
            block content

Then pages:

    extends ../layouts/default
    block content
        include partials/banner
        include partials/why

So different pages put different content into content block accordingly. I render pages with gulp-jade and in the end I have all the pages as HTML.

My question is - can I put some variable inside child page, like about, so that it to go as a class to body tag of its parent template, like <body class="about">?

有帮助吗？

解决方案

Here's a pattern I use for this type of situation. In your main template, set up some variables:

//layouts/default.jade
- var bodyClass;
block variables
html
  head
  body(class=bodyClass)
    section.main-content
      block content

Then establish the bodyClass in your page templates.

//about.jade
extends ../layouts/default
block variables
  - bodyClass = "about"
block content
  h1 This is the About Page

This is how I do my page titles for the <head><title> tag, for example. I can also have logic in the layout.jade file to provide default values, etc.

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top