I have a layout called layouts/master.dust
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>{+title /}</title>
<link rel="stylesheet" href="css/app.css" />
</head>
<body>
<div id="wrapper">
<h3>This is the master header</h3>
{+body /}
</div>
</body>
</html>
I then have a template called index.dust
:
{>"layouts/master" /}
{<body}
<h1>{@pre type="content" key="greeting"/}</h1>
{/body}
Predictably, that outputs
This is the master header
Hello, Alex!
(when supplied with the relevant json)
My issue is, I'm creating another "nested" or "child" template: layouts/admin.dust
that looks like:
{>"layouts/master" /}
<h4>This is an admin header</h4>
{+body /}
and a template adminIndex.dust
that uses layouts/admin/dust
like this:
{>"layouts/admin" /}
{<body}
<p>This is some stuff for admin</p>
{/body}
My problem, is the output is:
This is the master header
This is some stuff for adminThis is an admin header
This is some stuff for admin
So, my {+body}
block is being called twice, and not overridden by my nested template
Is there a way to do that?
Edit
As per my comment, a more 'realistic' example of admin.dust
would be:
{>"layouts/master" /}
<h4>This is an admin header</h4>
<div style="float: left; width: 200px;">
<strong>left nav</strong>
<ul>
<li>Link one</li>
<li>Link two</li>
</ul>
</div>
<div style="float: right">
{+ body /}
</div>
Where by in templates that use the admin
layout, their body
is in a div floated right (for example)
Your {+body}
block is being overridden by your {<body}
inline partial in your adminIndex.dust
template. The contents of an inline partial (in your case <p>This is some stuff for admin</p>
) will be inserted wherever a block is found in your template. If you are hoping to have the master header be replaced by the admin header, you would need your templates to look like this:
layouts/master.dust
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>{+title /}</title>
<link rel="stylesheet" href="css/app.css" />
</head>
<body>
<div id="wrapper">
{+header}<h3>This is the master header</h3>{/header}
{+body /}
</div>
</body>
</html>
layouts/admin.dust
{>"layouts/master" /}
{+header}<h4>This is an admin header</h4>{/header}
adminIndex.dust
requires no change.
Note: I have added a {+header}
block to layouts/master.dust
with a default value, and added a {header}
inline partial and removed the {+body}
block from layouts/admin.dust
. This will output:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/app.css" />
</head>
<body>
<div id="wrapper">
<h3>This is the admin header</h3>
<p>This is some stuff for admin</p>
</div>
</body>
</html>