Page Layout
Page layouts decide how the top level blocks of a page are placed out. In this chapter, we'll show you how to design a page layout.
The HTML Template
Usually a page layout on coServ is made up of three files: a HTML, a CSS and an include file. Let's start with the HTML file.
As shown in the above snapshoot, the page layout HTML is actually a HTML template. Anything enclosed by <% and %> are Javascript codes. In the following sections we'll take a closer look at the layout HTML sample code shown above.
The Header Section
A page layout can be applied to many pages. On the other hand, pages sharing the same layout would have its own title, so the page title needs to be dynamically fed into the page layout. That's what line #4 does:
<title><%=ctx.title%></title>
The page title is read from the context variable, ctx. The markup <%= tells coServ to print out the variable value. The same technique would work for the page description in line #5. In summary, a context variable contains some information about a web page and those information include the page title (ctx.title) and description (ctx.description).
The header section of a HTML page usually includes CSS files. In a coServ page layout, you can include CSS files by adding the <link> tag as you've been doing or you can do it the coServ way (the more succinct way):
<% includeCss(); %>
By invoking the includeCss() function, you'll list all CSS files specified in the include file (remember we said a page layout has three constituents and one of them is the include file?). The result is the same as using the <link> tag to include the CSS files but the includeCss() function can make our page layout cleaner and easier to manage.
Similar to the CSS includsion, Javascript files or libraries can be included with the includeJs() function as in line #10:
<% includeJs(); %>
Again, you can still use the <script> tag for the same purpose but using the include file can make the whole thing more managable.
Since a page layout specifies how blocks are arranged in a page and each block has its own CSS specifications, there will be a need for a page layout to collect all CSS specifications of every block embedded in a page. This is done by the css() function in line #13:
<% css(); %>
By calling the css() function, you give coServ a chance to explore the block tree (blocks can embed blocks and so on) and collect their CSS specifications.
Just as each block has its own CSS specification, a block has its own Javascript file (to implement the block controller), too. So we also need to collection the Javascript files of every block in a page, and that can be done by the js() function as we did in line #17:
<% js(); %>
Before we close up the header section, there is one more thing to be mentioned. In line #23, the template calls the __.initPage() function which is needed to activate all blocks running in a web page.
The Body Section
Lines #29 ~ #40 specifies how top level blocks are placed out in a page. In our page layout example, we use the <div> tag to divide up the page space and invoke the block() function to embed the actual contents. For example, lines #31 to #33 say something like:
<div id="pgHead">
<% block('/head'); %>
</div>
What those lines do is to create a space for a page header and the actual contents of that header are filled in by the head block (line #32 block('/head'); ).
If a block is embedded without specifying its path (like line #38), the page URL will be used as the block path. For example, if the page URL is http://www.foo.com/hello, then invoking a block like
<% block(); %>
is the same as
<% block('/hello'); %>
By designing a page layout this way, many beautiful things can happen. First of all, we detach contents from a page layout so the page layout is really just a skeleton. Secondly, we do not specify the size or position of those spaces created by the <div> tags in the HTML template. Instead, sizing and positioning are left out for the page layout CSS. As a result, we make the layout template really clean and manageable.
Try Out With The Design Console
We've explained how a page layout works. Now you can explore a page layout with the help of the design console. Choose the website you've created in chapter 1, click on the "Layouts" section and choose the "default" layout. Click on the HTML, CSS and Include tags to see what's in there. You may even make some minor changes and see how that effects the actual outcome.