Navigations menu

Navigations menuer kan genereres ved at iterere igennem listen af sider på din Edy CMS. Adgangen til denne liste er gjort mulig via de globale objekter der findes ved navn: site. Dette objekt har properties ved navn menuitems der er en collection af menuitem der hver indeholder informationer om de respektive sider.
Et meget simpelt kode uddrag for at generere en top-level navigations menu, altså en menu hvor kun hovedmenuerne vises:<ul id="menu">
  <li><a href="{{ site.root_item.url }}">{{ site.root_item.title }}</a></li>
  {% for item in site.menuitems %}
    <li><a href="{{ item.url }}">{{ item.title }}</a></li>
  {% endfor %}
</ul>
Bemærk specielt i eksemplet brugen af property for root_item der er et specielt menuitem objekt der representerer din Edy CMS's forside.
Hvert menuitem objekt har adgang til disses child objekter for den side de respresenterer. Dette tillader generering af undermenuer.
Eksemplet her viser hvorledes second-level, altså undermenu punkter til hovedmenuen, bliver genereret:{% for item in site.menuitems %}
  {% if item.selected? %}
    <ul id="submenu">
      {% for level2 in item.children %}
        <li><a href="{{ level2.url }}">{{ level2.title }}</a></li>
      {% endfor %}
    </ul>
  {% endif %}
{% endfor %}
For at tilføje yderligere levels, altså yderligere undermenuer, kræver blot videre iterering igennem alle child elementer af menuitem objektet.

Din menu kan udviddes via funktionerne menuadd og menubtn. Visible, hidden, active og untranslated menuitem objekter behandles desuden også i nedenstående eksempel:

<ul class="mainmenu">
  {% 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>
I eksempel, for at summere ovenstående, vil en ganske typisk kode for undermenuer i to levels og deres hovedmenuer med visning af det aktive element på første level, så således ud: {% 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 %}

For at komme godt igang, anbefales det af bruge ovenstående som inspiration til at lave din egen menustruktur, som kan sættes ind på en hvilken som helst side, dog typisk i et eller flere layouts der benyttes for udvalgte eller alle sider.Start med at åbne design editoren:


Opret nu en komponent, og navngiv den sigende efter hvad du ønsker den skal bruges til. I dette tilfælde "MenuShowcase" og kopier ét af eksemplerne ind ovenfor:


Åben så det eller de layouts du vil bruge menu'en i, og skriv koden for at inkludere din komponent. I dette tilfælde: {% include "MenuShowcase" %} som skal bruges for "Frontpage" layout'et der er generelt for hele siden.


Kontrollér så at du bruger layout'et på den eller de sider der skal bruge det:


Når dette e valgt, vælg nu ikonet nederst i højre hjørne for at se din nye menu. For dette tilfælde er Edy CMS siden renset for det meste andet indhold, for at se den nye menu alene:


Husk at trykke "gem" undervejs, ellers vil siden automatisk blive gemt i intervaller eller du vil blive advaret hvis der er foretaget ændringer der bør gemmes.