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.
