Change theme:   

Using components

Here's an example of using components to break appart common parts like headers, footers and menus from templates and generating translation file for multilingual site. Using components not only allows editing common parts o source in one place, but makes your templates easier to read.

SiteHeader component.

Declares various header components for all site pages.

<!DOCTYPE html>
<html>
<head>
  <meta name="keywords" content="{{ page.keywords }}" />
  <meta name="description" content="{{ page.description }}" />
  <meta name="copyright" content="{{ site.copyright }}" />
  <meta name="author" content="{{ site.author }}" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  
  {% stylesheet_link "style.css" %}
  {% unless editmode %}
    <link href="/stylesheets/mobile.css" media="all and (max-width: 800px)" rel="stylesheet" type="text/css">
  {% endunless %}

  <link rel="icon" href="/favicon.ico" type="image/x-icon" />
  <link rel="shortcut icon" href="/favicon.ico" type="image/ico" />
  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
  
  <title>{% if article %}{{ article.title }} | {{page.site_title}}{% else %}{{page.site_title}} | {{ page.title }}{% endif %}</title>
  
  {% include "Translations" %}
</head>
<body> 

SiteFooter component.

Declares common footer source:

  <div id="footer">
    {% content name="footer" xpage="true" %}
  </div>
  {% include "Javascripts" %}
</body>
</html> 

MainMenu component.

For a more detailed explanation of menussee examples under Navigation menu exaples

<ul class="menu">
  {% unless site.root_item.hidden? %}
    <li{% if site.root_item.selected? %} class="active"{% endif %}>
      <a href="{{site.root_item.url}}">{{site.root_item.title}}</a>
    </li>
  {% endunless %}
  {% for item in site.visible_menuitems %}
    <li{% if item.selected? %} class="active"{% endif %}{% unless item.translated? %} class="untranslated"{% endunless %}>
      <a href="{{item.url}}">{{item.title}}</a>
    </li>
  {% endfor %}
  {% if editmode %}
    {% if site.hidden_menuitems.size > 0 %}
      <li>{% menubtn site.hidden_menuitems %}</li>
    {% endif %}
    <li>{% menuadd %}</li>
  {% endif %}
</ul> 

SubMenu component

{% for item in site.menuitems_with_hidden %}
  {% if item.selected? %}
    {% if editmode or item.children? %}
      <ul class="submenu">
        {% for level2 in item.visible_children %}
          <li{% unless level2.translated? %} class="untranslated"{% endunless %}>
            <a href="{{ level2.url }}"{% if level2.selected? %} class="active"{% endif %}>{{ level2.title }}</a>
            {% if level2.selected? %}
              {% if editmode or level2.children? %}
                <ul>
                  {% for level3 in level2.visible_children %}
                    <li{% unless level3.translated? %} class="untranslated"{% endunless %}>
                      <a href="{{ level3.url }}"{% if level3.selected? %} class="active"{% endif%}>{{ level3.title }}</a>
                    </li>
                  {% endfor %}
                  {% if editmode %}
                    {% if level2.hidden_children.size > 0 %}
                      <li>{% menubtn level2.hidden_children %}</li>
                    {% endif %}
                    <li>{% menuadd parent="level2" %}</li>
                  {% endif %}
                </ul>
              {% endif %}
            {% endif %}
          </li>
        {% endfor %}
        {% if editmode %}
          {% if item.hidden_children.size > 0 %}
            <li>{% menubtn item.hidden_children %}</li>
          {% endif %}
          <li class="last">{% menuadd parent="item" %}</li>
        {% endif %}
      </ul>
    {% endif %}
  {% endif %}
{% endfor %} 

Translations component.

It is a quite good idea to keep all hardcoded texts in your templates in one place so it would be easy to change texts on the whole site and add languages in the future.

{% case page.language_code %}
{% when 'et' %}
  {% assign translation_login = 'Logi sisse' %}
  {% assign translation_register = "Registreeri" %}
  {% assign translation_forgot = "Unustasid parooli?" %}
{% else %}
  {% assign translation_login = 'Log in' %}
  {% assign translation_register = "Register" %}
  {% assign translation_forgot = "Forgot password?" %}
{% endcase %} 

Javascripts component.

Configures Edicy site search widget javascript and statistics service javascript. See more here …

{% if site.search.enabled %}
  <script type="text/javascript" src="http://static.edicy.com/assets/site_search/3.0/site_search.js?1"></script>
  <script type="text/javascript">
    var edys_site_search_options = {
      texts: { noresults: "{{ "search_noresults"|lc }}" },
      default_stylesheet_enabled: false
    }
  </script>
{% endif %}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="{{ javascripts_path }}/scripts.js"></script>

{% unless editmode %}{{ site.analytics }}{% endunless %} 


Template

 {% include "SiteHeader" %}
  <div class="header">
    <h1>{{ page.title }}</h1>
    {% include "MainMenu" %}
  </div>
  <div class="content-wrapper">
    <button>{{ translation_login }}</button>
    <button>{{ translation_register }}</button>
    <button>{{ translation_forgot }}</button>
    <div class="content">
      {% content %}
    </div>
    <div class="sidebar">
      {% include "SubMenu" %}
      {% content name="sidebar" %}
    </div>
  </div>
{% include "SiteFooter" %}