There is a (not so) particular kind of shape
in Orchard: zones. Functionally, zones are places where other shapes can render. There are top-level zones,
the ones defined on Layout, where widgets typically go, and there are local zones that can be defined anywhere. These local zones are what you target
in placement.info. Creating a
zone is easy because it really is just an empty shape. Most themes include a helper for it: Func<dynamic, dynamic>
Zone = x => Display(x);
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
With this helper, you can create a
zone by simply writing:
@Zone(Model.Header)
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
Let's deconstruct what's happening here with that weird Lambda.
In the Layout template where we are working,
the Model is
the Layout shape itself, so Model.Header is really creating a new Header shape under Layout, or getting a reference to it if it already exists.
The Zone function is then called on that object, which is equivalent to calling Display.
In other words, you could have just written
the following to get
the exact same effect:
@Display(Model.Header)
The Zone helper function only exists to make
the intent very explicit. Now here's something interesting: while this works
in the Layout template, you can also make it work from any deeper-nested template and still create top-level zones.
The difference is that wherever you are, Model is not
the layout anymore so you need to access it
in a different way:
@Display(WorkContext.Layout.Header)
This is still doing
the exact same thing as above.
One thing to know is that for top-level zones to be usable from
the widget editing UI, you need one more thing, which is to specify it
in the theme's manifest:
Name: Contoso
Author:
The Orchard Team
Description: A subtle and simple CMS themeVersion: 1.1
Tags: business, cms, modern, simple, subtle, product, service
Website: http://www.orchardproject.net
Zones: Header, Navigation, HomeFeaturedImage, HomeFeaturedHeadline, Messages, Content, ContentAside, TripelFirst, TripelSecond, TripelThird, Footer
Local zones are just ordinary shapes like global zones,
the only difference being that they are created on a deeper shape than layout. For example,
in Content.cshtml, you can find our good old code fro creating a header zone:
@Display(Model.Header)
The difference here is that Model is no longer
the Layout shape, so that
zone will be local.
The name of that local
zone is what you specify
in placement.info, for example:
<Place Parts_Common_Metadata_Summary="Header:1"/>
Now here's
the really interesting part: zones do not even know that they are zones, and
in fact any shape can be substituted. That means that if you want to add new shapes to
the shape that some part has been emitting from its driver for example, you can absolutely do that. And because zones are so barebones as shapes go, they can be created
the first time they are accessed. This is what enables us to add shapes into a
zone before
the code that you would think creates it has even run. For example,
in the Layout.cshtml template
in TheThemeMachine,
the BadgeOfHonor shape is being injected into
the Footer
zone on line 47, even though that
zone will really be "created" on line 168.
