Basic Layout
In the previous post, we had explored briefly about layout components. Now let’s drill down into each one more deeply.
As we discussed before, main advantage of Sitecore is, as a developer, we have full control over HTML. First step towards that is, creating a basic layout, which is similar to a master page in ASP.NET web-forms terminology.
Basic layout contains the common HTML tags, and also have references to common resources like css, and js files.
It also contain placeholders, where another modules (Sublayouts/Renderings) can be placed. In Sitecore every page, have only one layout associated with it, but can have any number of modules.
When we install Sitecore, we can observe (from presentation details) that, default home page is using Sample Layout.
We can look at the layout code, by fetching the file from deploy location /layouts/Sample Layout.aspx
Now let’s have a look at, how can we create a new layout.
Assuming you have a VS solution, associated with your Sitecore installation, add new BasicLayout.aspx file, with the basic code (as shown below), build and deploy the solution.
Add a new layout in Sitecore, While adding new layout, Sitecore automatically creates one new file in deploy location, let’s delete that one.
Copy the .aspx file location into path field,
To verify the new layout, let’s change the layout of home page item, from presentation details.
Click OK, and publish the site. For now, just ignore the controls (Sample sublayout & rendering).
One you load the site, you will be able to see the newly added layout’s HTML as below,
Till now, we have only looked at .aspx layout, we can also follow pretty similar steps to create MVC layout, where file extension would be .cshtml.
Happy Learning 🙂
Gopi's Blog 