Creating Page Layout Templates

We use the Mustache template standard as our templating engine. While PHP is a fine scripting language that can be used to build templates, we find it much easier to use Mustache for our page layouts. Lets take a look at one, simple.mustache, to get a feel for what its about.

As you can see below, everything is indented and consistent to make it really easy to read and understand. Its pure mustache templates and nothing else.

We will call Content Zones, the areas where HTML markup can be filled in. In this template, some places are:

{{{doctype}}}
{{{htmlBegin}}}
  {{{headBegin}}}
    {{{title}}}
    {{#meta}}
      {{{metaItem}}}
    {{/meta}}
    {{#fonts}}
      {{{fontItem}}}
    {{/fonts}}
    {{#css}}
      {{{cssItem}}}
    {{/css}}
    {{#link}}
      {{{linkItem}}}
    {{/link}}
    {{#scriptsAtHead}}
      {{{scriptsAtHeadItem}}}
    {{/scriptsAtHead}}
  {{{headEnd}}}
  {{{bodyBegin}}}
    {{{pageBegin}}}
      {{{pageHeaderBegin}}}
        {{{pageHeaderContent}}}
      {{{pageHeaderEnd}}}
      {{{pageNavBegin}}}
        {{{pageNavContent}}}
      {{{pageNavEnd}}}
      {{{breadcrumbBegin}}}
        {{{breadcrumbContent}}}
      {{{breadcrumbEnd}}}
      {{{mainBegin}}}
        {{{mainHeaderBegin}}}
          {{{mainHeaderContent}}}
        {{{mainHeaderEnd}}}
        {{{mainContent}}}
        {{{mainFooterBegin}}}
          {{{mainFooterContent}}}
        {{{mainFooterEnd}}}
      {{{mainEnd}}}
      {{{pageFooterBegin}}}
        {{{pageFooterContent}}}
      {{{pageFooterEnd}}}
    {{{pageEnd}}}
    {{#scriptsAtBodyEnd}}
      {{{scriptsAtBodyEndItem}}}
    {{/scriptsAtBodyEnd}}
  {{{bodyEnd}}}
{{{htmlEnd}}} 

If you noticed that some tags are triple braced and some double braced, there is a very good reason for that. By default, Mustache sets double braced tags as escaped HTML. You use triple braced tags to unescape HTML.

At the global theme level, you will likely fill in the pageHeaderContent, pageNavContent, and pageFooterContent to keep things the same throughout the entire website. You would do this in your /var/www/themes/theme/theme.main.php file by setting the appropriate qlick variable keys that correlate to these content zones.

At the page level, you fill in the mainContent or articleContent in your /var/www/content/category/filename.php.content file. You set the page layout type that matches the mustache layout template.

You fill in like this using a PHP heredoc string:


$qlick["pageMainContent"] = <<< MAIN_CONTENT_1

<p>
Lorem ipsum dolor sit amet, oportere principes constituam est at. Qui nibh persius principes no,
ne his detraxit quaestio. Et mea sale numquam, sea natum <i>theophrastus</i> complectitur in.
Ut pro nonumes oporteat, nemore assentior te nam. Pri in iriure adversarium, at brute deleniti
cum, liber sententiae in quo.
</p>
MAIN_CONTENT_1;

If this seems a little overwhelming, don't worry. Once you get the hang of it, you will be cranking out your own really cool custom templates in no time.