Architecture Orchard CMS. Layout Concepts
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 . Home “ Orchard CMS Architecture. Basic concepts can be found and read here .
In order to start working with Orchard CMS, you need to learn the basic concepts that are used in this CMS for working with content. In this part of the tutorial, we will introduce the Orchard CMS layout elements that make up the CMS architecture.
I remind you that the automatic download of Orchard is available from the application gallery using the Web Platform Installer's quick access tool (click on this link to start the installation ).
')
The Orchard content management system has rich capabilities for creating and managing the layout of web pages, content layout, appearance design (themes). When working with the 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.
For any content management system, an important part is the mechanism for customizing the appearance of web pages. Orchard CMS offers the functionality of themes. One design theme is delivered with the system (called The Theme Machine), but through the control panel you can access the online gallery and download one of the themes created by the developer community (Figure 2.6).
Fig. 2.6. Gallery of themes Orchard CMS
In Orchard CMS, the design theme is a combination of CSS styles, images, files describing layout layouts, templates, and source code. The default skin uses new HTML5 semantic tags. An important quality mechanism for Orchard themes is the ability to create themes based on other themes, that is, to inherit themes from the layout.
The markup layout file describes how each of the components of a webpage should be located. The layout of the page in Orchard CMS uses 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 to which the content has been added.
Fig. 2.7. Orchard CMS Default Layout Layout Zones
Each content part, each content field and each widget must have a graphical representation of the data they represent. A template is code that creates an HTML representation of data for a different type of content.
Orchard CMS uses the Razor presentation engine and the corresponding syntax by default. You can learn more about Razor from this video guide http://www.techdays.ru/videos/3307.html .
For example, the template for displaying the site name in the header is as follows:
You can find it in the default theme. This template is represented by the Branding.cshtml file and is located in the Themes \ TheTimeMachine \ Views folder.
In Orchard CMS there are two special templates: layout template and document template.
Layout Layout Template .cshtml contains the structure of the layout of the web page components. Thanks to this template and applied design styles, page elements are placed where it is needed.
Document template Document .cshtml contains a template for forming the final markup of a document based on an element layout template. Figure 2.8 shows the document template that is used in Orchard CMS projects by default:
Fig. 2.8. Default Document Template Code
You can make sure that the document template describes the structure of the web page using the tags <! DOCTYPE>, <html>, <body> and others.
A form is a concept of components that Orchard CMS uses to build a tree of information elements.
Before you display content using a template on a page, this content is converted into a form. Of all these forms, a tree is built of the entire web page. Forms will be presented: layout file, zones, widgets and parts of documents (content parts).
Forms can be represented as components that have content and a template that is responsible for displaying this content. Forms can be created and added to the markup dynamically as needed.
For example, a little higher we looked at 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 header with the following code:
WorkContext.Layout.Header.Add (New.Branding (), "5" );
You will work with forms as with the simplest elements of the web page tree.
In order for the Orchard content management system to know in what order it is necessary to place the fields or parts of the content, the placement rules must be defined.
Such rules are formed using a special file Placement.info, which contains information about the placement in the form of XML. For example, the Placement.info file for the Navigation module contains the following rule:
<Placement>
<Place Parts_Navigation_Menu_Edit = "Content: 9" />
</ Placement>
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 with a position from 1 to 8).
Using the location file, you can flexibly customize 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 the maximum flexibility to create a 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, the current type of content display, the type of content and even the current URL (will be added to Orchard 1.1).
Zones are parts of pages that can contain content. The layout of web pages in Orchard CMS is based on zones. For example, in Figure 2.7, all available zones are shown when working with the default The Time Machine theme.
Zones are defined in the skin and are used in the Layout.cshtml layout template . For example, in the The Time Machine topic, the following zones are defined (in the 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, zones are automatically available for placing widgets in them through the administration panel (Figure 2.9).
![clip_image004[4]](http://microgeek.ru/upload/blog/aspnet/fee/feeb80a3b5c03071399d15ab80b0cf81.png "clip_image004 [4]")
Fig. 2.9. List of available zones when adding a widget
A widget is a small element of the user interface that can be added to one or several pages of the site. Examples of widgets are tag clouds, maps, a search form, and so on. Figure 2.10 highlights some 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 pieces of content.
Widgets are created by the developer. Several widgets come with Orchard CMS. The simplest and most common widget that comes with the Orchard CMS is the Html widget, with which it is easy to add arbitrary HTML markup to the page zone (Figure 2.11).
Fig. 2.11. Adding an HTML widget to the Header zone via the Orchard CMS administration panel
In total, the delivery of Orchard CMS contains four widgets (Figure 2.12): for displaying the container of elmenets, outputting HTML markup, displaying the list of recent 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 pages of the site.
Layers is the Orchard CMS concept by grouping widgets according to different scenarios. For example, you can create a set of widgets that are displayed only to authorized users, but not visible to anonymous page visitors.
Layers allow you to flexibly customize 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 layer of widgets 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 a Default layer, whose widgets are always displayed regardless of conditions.
to be continued…
Introduction
In order to start working with Orchard CMS, you need to learn the basic concepts that are used in this CMS for working with content. In this part of the tutorial, we will introduce the Orchard CMS layout elements that make up the CMS architecture.
I remind you that the automatic download of Orchard is available from the application gallery using the Web Platform Installer's quick access tool (click on this link to start the installation ).
')
Orchard CMS Layout Concepts
The Orchard content management system has rich capabilities for creating and managing the layout of web pages, content layout, appearance design (themes). When working with the 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 (Themes)
For any content management system, an important part is the mechanism for customizing the appearance of web pages. Orchard CMS offers the functionality of themes. One design theme is delivered with the system (called The Theme Machine), but through the control panel you can access the online gallery and download one of the themes created by the developer community (Figure 2.6).
Fig. 2.6. Gallery of themes Orchard CMS
In Orchard CMS, the design theme is a combination of CSS styles, images, files describing layout layouts, templates, and source code. The default skin uses new HTML5 semantic tags. An important quality mechanism for Orchard themes is the ability to create themes based on other themes, that is, to inherit themes from the layout.
Layout
The markup layout file describes how each of the components of a webpage should be located. The layout of the page in Orchard CMS uses 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 to which the content has been added.
Fig. 2.7. Orchard CMS Default Layout Layout Zones
Template
Each content part, each content field and each widget must have a graphical representation of the data they represent. A template is code that creates an HTML representation of data for a different type of content.
Orchard CMS uses the Razor presentation engine and the corresponding syntax by default. You can learn more about Razor from this video guide http://www.techdays.ru/videos/3307.html .
For example, the template for displaying the site name in the header is as follows:
@{ var homeUrl = Href("~/"); } <h1 id="branding"><a href="@homeUrl">@WorkContext.CurrentSite.SiteName</a></h1> You can find it in the default theme. This template is represented by the Branding.cshtml file and is located in the Themes \ TheTimeMachine \ Views folder.
In Orchard CMS there are two special templates: layout template and document template.
Layout Layout Template .cshtml contains the structure of the layout of the web page components. Thanks to this template and applied design styles, page elements are placed where it is needed.
Document template Document .cshtml contains a template for forming the final markup of a document based on an element layout template. Figure 2.8 shows the document template that is used in Orchard CMS projects by default:
Fig. 2.8. Default Document Template Code
You can make sure that the document template describes the structure of the web page using the tags <! DOCTYPE>, <html>, <body> and others.
Shape
A form is a concept of components that Orchard CMS uses to build a tree of information elements.
Before you display content using a template on a page, this content is converted into a form. Of all these forms, a tree is built of the entire web page. Forms will be presented: layout file, zones, widgets and parts of documents (content parts).
Forms can be represented as components that have content and a template that is responsible for displaying this content. Forms can be created and added to the markup dynamically as needed.
For example, a little higher we looked at 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 header with the following code:
WorkContext.Layout.Header.Add (New.Branding (), "5" );
You will work with forms as with the simplest elements of the web page tree.
Placement
In order for the Orchard content management system to know in what order it is necessary to place the fields or parts of the content, the placement rules must be defined.
Such rules are formed using a special file Placement.info, which contains information about the placement in the form of XML. For example, the Placement.info file for the Navigation module contains the following rule:
<Placement>
<Place Parts_Navigation_Menu_Edit = "Content: 9" />
</ Placement>
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 with a position from 1 to 8).
Using the location file, you can flexibly customize 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 the maximum flexibility to create a 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, the current type of content display, the type of content and even the current URL (will be added to Orchard 1.1).
Zone
Zones are parts of pages that can contain content. The layout of web pages in Orchard CMS is based on zones. For example, in Figure 2.7, all available zones are shown when working with the default The Time Machine theme.
Zones are defined in the skin and are used in the Layout.cshtml layout template . For example, in the The Time Machine topic, the following zones are defined (in the 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, zones are automatically 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 element of the user interface that can be added to one or several pages of the site. Examples of widgets are tag clouds, maps, a search form, and so on. Figure 2.10 highlights some 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 pieces of content.
Widgets are created by the developer. Several widgets come with Orchard CMS. The simplest and most common widget that comes with the Orchard CMS is the Html widget, with which it is easy to add arbitrary HTML markup to the page zone (Figure 2.11).
Fig. 2.11. Adding an HTML widget to the Header zone via the Orchard CMS administration panel
In total, the delivery of Orchard CMS contains four widgets (Figure 2.12): for displaying the container of elmenets, outputting HTML markup, displaying the list of recent 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 pages of the site.
Layer (Layer)
Layers is the Orchard CMS concept by grouping widgets according to different scenarios. For example, you can create a set of widgets that are displayed only to authorized users, but not visible to anonymous page visitors.
Layers allow you to flexibly customize 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 layer of widgets 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 a Default layer, whose widgets are always displayed regardless of conditions.
to be continued…
Source: https://habr.com/ru/post/116547/
All Articles