This is a continuation of the second part of the guide “ How to create your website from scratch using Orchard CMS ”. You can get acquainted with the first part of the guide here: the beginning and the continuation . Start “ Orchard CMS Architecture. Basic concepts ”can be found and read here .

Introduction

In order to start working with Orchard CMS, you need to learn the basic concepts that are used in this CMS to work with content. In this part of the guide, we will introduce you to the Orchard CMS layout elements that make up the CMS architecture.

Let me remind you that automatic download of Orchard is available from the application gallery using the Web Platform Installer, a quick access tool for web tools (click this link to start the installation ).

Orchard CMS Layout Concepts

The Orchard content management system has rich capabilities for the formation and management of the layout of web pages, the arrangement of content, and the appearance (theme). When working with a layout, Orchard CMS operates with a set of concepts that are important to know and understand.

Below is a brief overview of the concepts, in subsequent articles they will be given a detailed overview.

Themes

An important part for any content management system is the mechanism for customizing the appearance of web pages. Orchard CMS offers functional themes. Along with the system, there is one design theme (called The Theme Machine), but through the control panel you can access online galleries and download one of the themes created by the developer community (Figure 2.6).


Fig. 2.6.

Orchard CMS Theme Gallery In Orchard CMS, the design theme is represented by a combination of CSS styles, images, files describing layout, templates, and source code. The default theme uses the new semantic HTML5 tags. An important quality of the Orchard theme engine is the ability to create themes based on other themes, that is, inherit themes.

Layout

The markup layout file describes how each of the components of the web page should be located. Page layout in Orchard CMS operates with the concepts of "zone", "widgets", "layers".

Figure 2.7 shows the layout of the theme available in Orchard CMS by default with all available zones in which the content is added.


Fig. 2.7. Default Orchard CMS Theme Layout Zones

Template

Each content part, each content field, and each widget must have a graphical representation of the data that they represent. A template is code that creates an HTML representation of data for different types of content.

Orchard CMS uses the Razor presentation engine and its corresponding syntax by default. You can learn more about Razor from this video guide http://www.techdays.ru/videos/3307.html .

For example, a template for displaying the site name in the header is as follows:

@{
    var homeUrl = Href("~/");
}
@WorkContext.CurrentSite.SiteName

You may find it in the default skin. This template is represented by the Branding.cshtml file and is located in the Themes \ TheTimeMachine \ Views folder.

There are two special patterns in Orchard CMS: layout template and document template. Layout .cshtml

layout template contains the layout structure of web page components. Thanks to this template and applied styles, page elements are located where it is needed. The Document .cshtml document template contains a template for the formation of the final layout of the document based on the element layout template. Figure 2.8 shows the document template used by default in Orchard CMS projects: Fig. 2.8. Default Document Template Code






You can verify that the document template describes the structure of the web page using tags,, and others.

Shape

A form is a component concept that Orchard CMS uses to build a tree of information elements.

Before displaying content using a template on a page, this content is converted to a form. The tree of the entire web page is built from all such forms. Forms will include: layout file, zones, widgets and document parts (content parts).

Forms can be thought of as components that have content and a template responsible for displaying that content. Forms can be created and added to the markup dynamically as needed.

For example, a little higher, we examined the Branding.cshtml template, which is responsible for displaying the site name in the page header. In a layout template, this template is used as a form. And this form is dynamically added to the page title using the following code:

WorkContext.Layout.Header.Add (New.Branding (), "5" );

You will work with forms, as with the simplest elements of a web page tree.

Placement

In order for the Orchard content management system to know in which order to place the fields or parts of the content, placement rules must be defined.

Such rules are generated using the special Placement.info file, which contains information about the placement in XML. For example, the Placement.info file for the Navigation module contains the following rule:







This code means that the form under the name Parts_Navigation_Menu_Edit should be placed on the page in the Content section in the ninth position (that is, after the elements that put the position from 1 to 8).

With the help of the placements file, you can flexibly configure the location of parts of the content. Moreover, you can specify different locations on the page for different forms of the module. This feature allows you to flexibly create page layout and add modules.

Using the rules of Placement.info, you can specify the location not only depending on the part of the page, but also on other parameters, for example, on the current type of content display, on the type of content and even on the current URL (to be added in Orchard 1.1).

Zone

Zones are parts of pages that may contain content. Web page layout in Orchard CMS is based on zones. For example, Figure 2.7 shows all available zones when working with the default theme, The Time Machine.

Zones are defined in the skin and are used in the Layout.cshtml layout template . For example, the following zones are defined in The Time Machine theme (in Theme.txt file): Header, Navigation, Featured, BeforeMain, AsideFirst, Messages, BeforeContent, Content, AfterContent, AsideSecond, AfterMain, TripelFirst, TripelSecond, TripelThird, FooterQuadFirst, FooterQuadSecond, FooterQuadThird, FooterQuadFourth, Footer.

After determining the design theme in the zone, the zones automatically become available for placing widgets in them through the administration panel (Figure 2.9).


Fig. 2.9. List of available zones when adding a widget

Widget

A widget is a small user interface element that can be added to one or more pages of a site. Examples of widgets include tag clouds, maps, a search form, and so on. Figure 2.10 highlights some of the page elements that are widgets.


Fig. 2.10. Widgets on the Orchard CMS page

Widgets must be represented by code and markup, while the code can be quite complex and contain its own MVC controllers. In addition, widgets can be created based on parts of the content.

Widgets are created by the developer. Several widgets come with Orchard CMS. The simplest and most common widget that comes with Orchard CMS is the Html widget, which makes it easy to add arbitrary HTML markup to the page zone (Figure 2.11).


Fig. 2.11. Adding an HTML widget to the Header zone through the Orchard CMS admin panel

In total, there are four widgets in the Orchard CMS delivery (Figure 2.12): for displaying an e-mail container, displaying HTML markup, listing the latest blog entries and displaying the "blog archive" element.


Fig. 2.12. Available widgets in Orchard CMS

Later in this guide we will learn how to create your own widgets and use them on the site.

Layer

Layers is an Orchard CMS concept for grouping widgets according to different scenarios. For example, you can create a set of widgets that are displayed only to authorized users, but are not visible to anonymous visitors to the page.

Layers allow you to flexibly adjust the appearance of the page, the saturation of the elements, depending on various conditions: user type (anonymous or registered), page type (main or not) and others.

Creating your own layer for the site is done through the interface in the administration panel (Figure 2.13).


Fig. 2.13. Adding a new widget layer to Orchard CMS

When adding a widget to a zone on a page, you must specify the layer on which this widget will be available. By default, there is the Default layer, the widgets of which are always displayed regardless of conditions.

to be continued…