Sites, Layouts, and Pages

Each Website in Brick River is defined by a beautifully simple Site record.  Each Site uses Layouts and Pages to create static and dynamic content - as well as the design and style of the site. 

  • Layouts contain HTML and Razor Code to render design and content elements that will be added to the Pages using that Layout.
  • Pages contain HTML and other code (C#, Javascript, CSS) to create static and dynamic content.  Each page is based on a Layout.

Sites will also use image, code, and other files which are typically stored in the Brick River file system - documented here.

If you are new to Brick River and starting from scratch it's a good idea to create a test site to experiment with Pages, Layouts and Brick River Views.


Sites

Sites can be created and managed using the My websites link on the Sites Menu.

To create a site:

On the Site menu, click My Websites. Click the New button.


1  Enter a Name

2 Enter a Short Name.  We suggest a short string of characters with no spaces.  In the example above the site URL will be:  http://demo-newsite.brtsite.com.

3 Default Identity - Choose Guest Guest - This will be the identity for un-authenticated website visitors,

4 Default Layout (optional) - each page of your site will link to Layout.  All new pages added to a site will link to the default layout if one is indicated here.  If no Layouts are yet available, leave this blank.

5 Sites can be de-activated to prevent the site URL from rendering the site in a browser.

Save and Return.

For each site, Brick River presents a Sitemap with a collapsible tree view of the site's pages.  In order to view the Sitemap at least one Layout must be linked to the site.   Attempting to view the homepage prior to creating and linking a layout will lead to a 'layout required' prompt.


Layouts

Layouts can be created and managed using the Site layouts link on the Sites Menu.   On the Site menu, click the Site Layouts link. Click the Create a new layout button.

Note: This example demonstrates the simplest possible use of layouts.  Jump to Designing with Pages and Layouts below for a more realistic example of Layout content

1 Enter a layout name
2 Select the Websites that may use the layout.  Our example selects the New Site created in the previous step.
3  Select a parent layout - (optional).  Layouts may inherit parent layouts, which may inherit parent layouts, and on...
4 Code Editor  - your poetry goes here.  Our example uses a simple HTML block.  Any page that uses this layout will display our poetic statement.  Real layouts have real HTML, CSS, JS and C#.

Save and Publish the Layout.  Click Return to go back to the 'Your Website Layouts' window. 

Use the Layout Name links will open existing Layouts for editing.


Pages

Existing Pages are displayed as a Sitemap with a collapsible tree view of the site's pages.  All site pages are child pages of the site Homepage - which Brick River creates when a Layout is linked to a new site.

To use a Sitemap, open the Site menu, and click the desired link in the Manage Sites portion of the menu.

Expand and collapse Sitemaps as necessary and click the desired page name link to open a page for editing.  Based on our example above, the Homepage link opens the Page Editor window.

1 Use the Layout field to change the Layout linked to the current page.  Since our simple example is a simple HTML block, the Design window simply displays the contents of the Layout

2 Work in the Design tab to edit page contents using a WYSIWYG editor.  This requires linking to a layout that included the @RenderBody() and @RenderSection() Helpers to create the desired editable sections of the page.

3 Work in the Source tab to write straight code to design the page. Brick River is optimized for designers to store site design in Layouts and compose Page source code to generate dynamic content using custom Razor helpers.  It is sometimes useful to do a portion of the page design in straight source code - but also include editable areas that non-designers can use to make basic edits using the Design Tab.

4 The Properties Tab provides links to manage a few basic Page properties, described further below.


Creating New Pages

New pages are created from the Sitemap window using the + icon to the right of the Page link.

The new page link creates a page as a child page of the current page.  Use the link on the Homepage level to create the Site's highest level parent pages - and links on those pages to create children accordingly.

New Pages are created in an Unpublished status.  Changes to pages can be Saved - but changes will not be rendered and visible in a browser until the Page is Published.

Publishing a Page will automatically save any changes made since the last Save.  In the Sitemap, Published status is indicated with a green checkbox icon.


Moving Pages and Ordering Pages

Child pages are displayed alphabetically beneath their parent.  Drag and Drop to move them from one parent page to another.

 

To change the sort order of child pages, add numeric values to the Sort field on the Page Properties tab (more below).


Page Properties

Select the Properties tab to edit Page Properties

1  Enter the Title for the Page - this will be used to identify the Page in the Sitemap and can be rendered easily by including the Title variable to the Layout linked to the Page.

2  The friendly URL to be used in site navigation.  This value will auto-generate when creating the Page Title - and afterwards can be edited manually  (avoiding the use of spaces and invalid characters, of course).

3    Add a URL redirect if desired.

4   Add numeric values to adjust the Sort Order of pages.  If this field is blank  all children pages will sort beneath the parent alphabetically by the Page title.  Add numbers here for pages to sort from low value to high.  It's best to choose a numbering scheme that allows for new pages to be added easily in the future.  For example, if ordering five pages, use the Sort Order - 10,20,30,40,50 rather than 1,2,3,4,5.

5   Hide the Page from the Sitemap window if desired.  The Page can still be viewed by those with sufficient permission by directly entering a URL to the Page.

6   Click to prevent page from being included in sitemap.xml provided to search engines if desired.

7   Check to cause Page to open in new Tab or Window if desired.

8   Enter a Page description if desired.

9    Add Keywords to use in site search features, if desired.


Designing with Pages and Layouts

Brick River Layouts and Pages provide flexible design tools that can be used in different ways in different design scenarios.  The simple example above demonstrates  the minimum requirements to set up a basic site ( a website, a Layout with minimal content, and a Page that uses that Layout).

A real world site will almost certainly use nested Parent and Child Layouts to render site pages.  A site may use a Parent Layout to control elements such as Header, Footer and Navbar elements that will appear on every page - combined with multiple Child Layouts which styles the various columns, grids, sidebars, and carousels featured on individual Pages.

The inheritance of code from Parent Layout to Child Layout to Page requires the use of the RenderBody() Helper.   The following screenshots demonstrate this inheritance.

Page Source

 This page links to the Layout: mainpage  1

Child Layout

The mainpage Layout 1 includes a RenderBody() Helper - this will be replaced by the Page code.  This layout styles the content of Page using the classes:  row, col-sm-12, and well.

Mainpage is linked to a parent Layout: root 2

Parent Layout

The root Layout 2  includes a RenderBody() Helper - this will be replaced by the mainpage Layout code.  This Layout creates a navigation bar with four links and styles the mainpage Layout content with the container class.

In a nutshell - when a web browser displays a Brick River Page it displays a Page, wrapped by a Layout, wrapped by another Layout, possibly wrapped by additional Layouts.  


Using RenderSection() and RenderSection("Head")

Additional editable areas can be added to layouts using the RenderSection("section name") Helper

The parent Layout of the page should include the HTML <Head> tag.  Include RenderSection("Head") in this area to allow child Layouts to add additional content to the final <Head> content.

Our BRT Helpers are used in Layouts (and Pages too)

Putting It All Together
... If you review and understand our Nested Layouts Example - then you are ready to learn where and how to use our BRT Helpers( Link ot BRT Helpers) to drive dynamic content to your Site's Pages.


Site URLs

Brick River URLs are constructed using Account Short Names and Site Short Names.

Once you have created the basic elements necessary to render a web page, sites can be viewed using a URL:
http://"your ACCOUNT short name" & "-" & "your SITE short name &".brtsite.com"

Add this URL to CNAME record with a domain registrar to point a registered domain URL to any of your Brick River sites.



The more you explain it, the more I don’t understand it.
 
Mark Twain

 

Want to learn more?

Call 800-924-5220 or

Schedule a demo