Layouts

From Kooboo document
Jump to: navigation, search

A layout defines the position of the content that is presented within an individual page. It defines some positions which content can be inserted into.

Most of the modern websites contain a header position, a headline, a sidebar and main content. In our sample website, the layout looks like this:

Layout position.png

A layout contains standard ASP.NET and HTML code with one additional position tag from Kooboo CMS. You can use the Kooboo API within a layout. To create or change the layout of your website, do the following:

First click on Development in the left menu. Then click on Layouts. You will see the following screen:

Layout list.png

Right now we have only one layout. To edit the layout, click on the layout or click on the edit icon. This will open the layout editing page.

Layout edit.png

This is the Microsoft Razor view engine. The @ mark is used by the Razor view engine. You can change the HTML code to anyway you like.

To add a position in your HTML code, first locate your mouse to where the position should be added, and then click on the Add button under ‘Positions’ in the top-right menu. Now you will see a textbox. Fill in the name of your position and click on the OK button. The position code will be added to your HTML page:

Layout add position.png

The syntax to add a Kooboo position manually is:

@Html.FrontHtml().Position("yourname")

You can also render a view in the layout. The syntax is similar:

@Html.FrontHtml().RenderView("myview",ViewData)

Layout helper and Code helper


In order to help you with common tasks like menu, contact form, we have provide some sample code as helpers. You may click to insert sample code block into your layout.

Layout code helper.png