How To Set A Page Title And H1 Tag With A Single Jade Template Block

Yesterday, I accidentally figured out that you can use a Jade template “block” in more than one location, and any content you put into the block will show up in all of the locations. It’s a pretty simple trick, but it made setting the page <title> and <h1> title blocks in SignalLeaf a lot easier than I expected.

Setup The Blocks

In your layout.jade file, add a block title to your <title> tag, and also in the body of your document where you want the page title to be displayed.

doctype 5

head
  title
    | MySite.com :: 
    block title
      | Awesome Stuff For Awesome People

body

  header
    h1
      block title

  article
    block content

Notice the extra info that I included in the <title> tag. You can put whatever you want prior to, inside of, and after the block title  The resulting <title> tag will contain all of the content that you specify, including the content within the block, by default. This gives you a default page title for any page that forgets to include a block title.

Set The Title In A Page

Once you have the layout set up, you can specify a block title in any content page that extends from the layout.

extends layout

block title
  | My Page Of Cool Stuff

block content
  p All the usual content goes here.

When you do this, the result is a page that has both the <title> tag and the page’s <h1> title set to the same content.


Post Footer automatically generated by Add Post Footer Plugin for wordpress.

About Derick Bailey

Derick Bailey is an entrepreneur, problem solver (and creator? :P ), software developer, screecaster, writer, blogger, speaker and technology leader in central Texas (north of Austin). He runs SignalLeaf.com - the amazingly awesome podcast audio hosting service that everyone should be using, and WatchMeCode.net where he throws down the JavaScript gauntlets to get you up to speed. He has been a professional software developer since the late 90's, and has been writing code since the late 80's. Find me on twitter: @derickbailey, @mutedsolutions, @backbonejsclass Find me on the web: SignalLeaf, WatchMeCode, Kendo UI blog, MarionetteJS, My Github profile, On Google+.
This entry was posted in Uncategorized. Bookmark the permalink. Follow any comments here with the RSS feed for this post.
  • http://peterlyons.com Peter Lyons

    Really I just want the page title to be a variable set in the child page’s template but accessible in the parent layout template. That way I can use the value as the content of tags like title and H1, but also as attribute values such as . I have yet to find a good way to do this. I’ve seen static site generators such as wintersmith split the child template into a data block with variable values then a content block with markdown. Not sure there’s a clean analog in jade, though. Thougts?