Templates

Templates are html files which contain the layout of your site, the information which is common for all the pages. In case of GPC this information also includes CSS rules for your page, but we will strip it from the template to the separate .css files and only leave link to those files. To do so we cut anything after the <style type="text/css"> till the corresponding </style> just leaving the style tags and paste it into the new google.css file. The <style type="text/css"></style> tags we'll replace by <link rel="stylesheet" href="&.root;google.css" /> tag that indicates that CSS rules are no more integrated into each page but must be read from a separate file. This will help us to remove unneeded CSS clutter. For the users of our site this will seriously decrease page load times so everybody seems happy. The non-standard .root entity is an OSB feature which will be discussed later.

Now as we have a clean HTML page we can clearly see how Google designers defined page zones. We can find our content in the corresponding div tags which are identified with g_ prefixes: <div id="g_title">Tutorial</div> for example. All we have to do now is to replace our content in the template with the following placeholders:

"Tutorial"

&.title;

"Home :: Download . . ."

&.section(description);

"On this page . . ."

&.text;

&.section(footer);

Now your changed g_title tag should look like this: <div id="g_title">&.title;</div> which indicates it's a placeholder for the page title. Placeholder may be used unlimited number of times on the page so we will also use it in HTML title tag: <title>&.title;</title> instead of <title>Preparing site template in Open Site Builder</title> on this page at the very beginning of our template. Now each our page will contain a title taken from the corresponding source file and this title will appear on the page between the h1 tags and as the name of a browser window. Good.

The content of our source file replaces the &.text; placeholder. It's rather simple. We take the .src file, strip the first line (which represents &.title;) and put the rest in the place of a &.text; placeholder. That's it.

The &.section(); placeholder defines the content which is stored in the _sections.xml file and may be reused by many content files.

You can see the Template and section file placeholders in Commands Reference for a full list of placeholders you may use in templates or section files.

For our very simple site we'll only use one template but it is not uncommon to use multiple templates for the complex sites with different kind of documents. See the Config file tags in Commands Reference for a way of using different templates on your site.

Assuming basic understanding of using .title and .text placeholders and before we get to meet sections closely let me introduce you the .root placeholder. This is an extremely useful variable that helps maintain HTML tags with paths (like img src or a href) and represents a number of concatenated ../ substrings needed to access a document root from a content file in any subfolder. For example, our CSS file google.css is placed at root and must be accessed from all the pages of our site. As far as all the pages share the same root folder there are no problem -- we just link to the google.css. For files in the same folder, link directive should look like this:

Now imagine that you use some directory structure (currently not available with GPC but possible in other situations). For the files in subdirectory dir to link to the stylesheet we need to use modified path since google.css is now in the upper directory:

... and so on (../../google.css) going deeper. Of course, we can use absolute /google.css syntax in our template, but then it will be hard to develop -- all your pages on the local machine will need google.css to be present at the root folder. And if you develop more than one site, do you really want to use the same document root for all of them? Not enough reasons? Well, imagine that you want to check your target html site by simply loading a page in browser, not through your local apache. Then where all your / paths will be starting?

Ok, here enters .root variable. In the files from the document root it expands to an empty string, in first level subfolders -- to ../ and so on. If we have a following construction in our template:

then the path will expand to google.css in files from document root, ../google.css in files from the first level of subfolders, ../../google.css in second and so on.

Now you may ask me "And finally why do we need it in GPC pages?" Well, in GPC all pages are placed in the same directory and sure we don't need to bother about paths. But I presented this conception because of its importance for the portability of your site. If one day your site evaluates into a bigger structure (or GPC begins to support multiple folders) you'll only need to move your source files into corresponding folders and OSB will reconstruct the paths automatically. A good reason to start using it from day one.

Go on to sections.

Page updated

Google Sites

Report abuse