Developers

Complete page template example

Here's an example of ordinary page with all most common elements: HTML header, page title, navigation menu, editable body elements and a footer. Note that there are some necessary Liquid tags at the end of the head and body that should almost always be present in all page layouts: site.stats_header, sitejs_include and site.analytics.

<!DOCTYPE html>
<html>
  <head>
    <title>{{ page.site_header }} - {{ page.title }}</title>
    <meta name="description" content="{{ page.description }}">
    {% stylesheet_link "style.css" %}
    {% rss_link %}
    {% site.stats_header %}
  </head>

  <body>
    <div id="header">
      <h1>{{ page.title }}</h1>
      
      <ul id="menu">
        {% menulink site.root_item wrapper-tag="li" %}
        
        {% for item in site.menuitems %}
          {% menulink item wrapper-tag="li" %}
        {% endfor %}
      </ul>
    </div>

    <div id="content">
      <div id="body">{% content %}</div>
      <div id="sidebar">{% content name="sidebar" %}</div>
    </div>
    
    <div id="footer">{% xcontent name="footer" %}</div>
    {% sitejs_include %}
    {% site.analytics %}
  </body>
</html>

Read next: