Log in to Sitecore. Open the Content Editor from Launch Pad. You will find a default /sitecore/Content/Home item with the Title and Text fields. Delete this item as we will create our own custom template for the Home item.

In the /sitecore/Templates item, create a new Template Folder item, Cookbook. In this, create a Site Root template, leaving the base template set to the default Standard template, as shown in the following image:

In template builder, create different fields, Title and Body, as shown in the following image, and save the details:

We will now create a content page using this data template. Create a new content item, Home, in the /sitecore/Content path using the Site Root template that we created and fill in the appropriate information in these fields:

To show common details of websites, such as logo, copyright text, and some other information, create another Site Configuration template with fields such as Company Name, Logo, Copyright Text, and so on.

The Site Configuration item will be a non-visual item, so it should be created outside the Home item. Create a folder item Global in /sitecore/Content, and in this, create a content item, Configurations, using the preceding template, and fill in the appropriate details.

We will now create a layout from Visual Studio. From the SitecoreCookbook project, create an MVC main.cshtml view in the /Views folder to render field values from the previously created items. For this, put the following code in the view file inside the <h tml/body> tag:

<div id="header"> <a href="/">
  @Html.Sitecore().Field("Logo", Sitecore.Context.Database.GetItem("/sitecore/Content/Global/Configurations"))
</a> </div>

<div id="contentarea">
  <h1>@Html.Sitecore().Field("Title")</h1>
  @Html.Sitecore().Field("Body")
</div>

<div id="footer">
  @Html.Sitecore().Field("Copyright Text", Sitecore.Context.Database.GetItem("/sitecore/Content/Global/Configurations"))
</div>

We will now register this view file as a layout in Sitecore. In the /sitecore/layout/Layouts item, create a layout folder, Cookbook. In this, create a layout named Main Layout. Set the path field of this layout to /Views/main.cshtml.

Now we will assign the layout to the content items. Select the Site Root data template. From the ribbon, select Standard Values in the Builder Options tab. This will create the __Standard Values item for the template.

Select the __Standard Values item. From the ribbon, select the Details button in the Layout group from the Presentation tab. It will open a Layout Details dialog. For a Default layout, click on the Edit button, which will open the Device Editor dialog. Here, in the Layout section, select Main Layout and select OK. See the following image, which represents both the dialogs:

From the Content Editor, select the Home item. From the ribbon, click on the Preview button in the Publish group from the Publish tab. This will open your home page in preview mode, as shown in the following image, where you will find Logo, Title, Body, and Copyright Text.

Note

You can get the layout and style sheet files from the code bundle provided with this book to make it work, as shown in the following image: