DZone
Java Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Java Zone > Nested Layouts in HarpJS

Nested Layouts in HarpJS

Raymond Camden user avatar by
Raymond Camden
·
Mar. 17, 14 · Java Zone · Interview
Like (0)
Save
Tweet
7.07K Views

Join the DZone community and get the full member experience.

Join For Free

Currently it isn't possible to use nested layouts in HarpJS. But with a little work you can support it easily enough. Here is a solution (with an alternative) that you can use until (if) HarpJS supports it natively in the future.

First, a reminder. By default, if you have a _layout.ejs (or .md, or that other template engine) in your folder, Harp will take the content of your current page and send it to the layout script as a variable, yield. So a simple layout could look like this:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
</head>
<body>

	<%- yield %> 
	
</body>
</html>

If you have a subdirectory, it can also specify a _layout.ejs file. When Harp encounters this file, it runs that layout instead of one higher in the directory structure. While you have the option to select a different layout template (in data.json) or ask for no layout, you can't have wrapped layout - i.e., use the current layout and then send the result to the parent layout.

This can solved by simply using partials in your layout file. These partials can then be loaded by other layout scripts. So imagine this as your main site layout.

<%- partial("_main_header") %>

<%- yield %>

<%- partial("_main_footer") %>

All I've done is taken the code that would have normally been above and below the yield statement and moved them into a partial. Now imagine I've got an articles folder with its own layout. I want to include the main site layout as well. This is all I do:

<%- partial("../_main_header") %>

<h3>Article Header</h3>

<%- yield %>

<h3>Article Footer</h3>

<%- partial("../_main_footer") %>

Boom. That's it. This works, but the more I use Harp, the more I become concerned with creating nice, maintainable scripts. I've noticed that many themes (including the one on my blog), suffer from "Div-Itis". You all know what Div-Itis is. You view source on a page and see approximately 30 different layers of div tags. I cant tell you how many times I've accidentally broken a layout because I screwed this up. I also can't tell you how many times I've said, "Screw it, let me add a closing div tag" in an attempt to fix something.

The solution above works, but separates my layout into two files (ok, technically three, but I'd never update the main layout again), so I wondered if it could be done better. I came up with another solution that uses the ability to pass variables to partials. Remember, partials in Harp are more than just include. You can pass data to them and they can react accordingly. I'm going to use a trick I've used for over a decade now when building ColdFusion templates.

<%- partial("_main", {mode:"header"}) %>

<%- yield %>

<%- partial("_main", {mode:"footer"}) %>

I've made a new partial, called main, and I pass a mode value to it. Now let's look at main.ejs.

<% if(mode === "header") { %>

<h1>MAIN HEADER</h1>

<% } else { %>

<h2>MAIN FOOTER</h2>

<% } %>

As you can see, I've simply added an IF clause that selects which branch of my layout to render. I've got some code intertwined in there, but at least I can look at the entirety of the template all at once.

I've included both demos as an attachment.

Download attached file



Template HARP (algorithm) Pass (software) Data (computing) React (JavaScript library) Branch (computer science) Directory

Published at DZone with permission of Raymond Camden, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Automatically Creating Microservices Architecture Diagrams
  • What to Know About Python and Why Its the Most Popular Today
  • Resilient Kafka Consumers With Reactor Kafka
  • Native vs Hybrid vs Cross-Platform: How and What to Choose?

Comments

Java Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo