Tree ersetzt Menu - eforia web manager Blog

eforia web manager Blog

Tree ersetzt Menu

Ich habe intern Kritik erhalten wegen dem Menu.prg. Langsam gibt es zu viele Optionen und das macht die Bedienung nicht gerade einfach. Also habe ich zusammen mit einem kleinen Team nach einer neuen Möglichkeit gesucht, wie man die Navigation einfach und trotzdem flexibel realisieren kann. Herausgekommen ist tree.prg.

Als Parameter erhält es die Vorlage, die benutzt werden soll (es gibt nur eine). Weiterhin stehen 3 Schalter zur Verfügung:

ifnotexist
Gibt Punkte in der Defaultsprache aus, wenn er in der aktuellen nicht existiert
all
Blättert das komplette Menü auf, nicht nur den Pfad zum aktuellen Punkt
pathactive
Stellt alle Punkte zum aktuellen als Aktiv dar

Beispiel für die Benutzung: {execmacro="tree" param="template=mainmenu;all;"}

Die Vorlagen enthalten dann schlicht den HTML-Code mit ein paar Platzhaltern, die Schleifen darstellen. Hier einfach 3 Beispiele:
Beispiel 1:

<ul>
{loop_level_1}
<li><a {ifactitem_level_1}class="act" {/ifactitem_level_1}href="{link}">{title}</a>
{level_2}
    <ul>
    {loop_level_2}
      <li><a {ifactitem_level_2}class="act" {/ifactitem_level_2}href="{link}">{title}</a>
      {level_3}
        <ul>
        {loop_level_3}
          <li><a {ifactitem_level_3}class="act" {/ifactitem_level_3}href="{link}">{title}</a>
          {level_4}
            <ul>
            {loop_level_4}
              <li><a {ifactitem_level_4}class="act" {/ifactitem_level_4}href="{link}">{title}</a></li>
            {/loop_level_4}
            </ul>
          {/level_4}
          </li>
        {/loop_level_3}
        </ul>
      {/level_3}
      </li>
    {/loop_level_2}
    </ul>
{/level_2}
</li>
{/loop_level_1}
</ul>

Gibt beim Aufruf mit Parameter all den kompletten Baum in einer HTML-UL-Liste aus.

Beispiel 2:

{loop_level_1}
{level_2}
    {loop_level_2}
       <a {ifactitem_level_2}class="act" {/ifactitem_level_2}href="{link}">{title}</a>
      {level_3}
        {loop_level_3}
           <a class="menl3{ifactitem_level_3} act{/ifactitem_level_3}" href="{link}">{title}</a>
        {/loop_level_3}
      {/level_3}
    {/loop_level_2}
{/level_2}
{/loop_level_1}

Gibt ein Untermenü ab Ebene 2 aus. Darstellung recht einfach als Links.

Beispiel 3:

{[8]if="{[9]level}#0"}
Sie sind hier:
{loop_level_1}
{ifactitem_level_1}<a href="{link}">{title}</a>{/ifactitem_level_1}
{level_2}
    {loop_level_2}
      {ifactitem_level_2} - <a href="{link}">{title}</a>{/ifactitem_level_2}
      {level_3}
        {loop_level_3}
          {ifactitem_level_3} - <a href="{link}">{title}</a>{/ifactitem_level_3}
          {level_4}
            {loop_level_4}
              {ifactitem_level_4} - <a href="{link}">{title}</a>{/ifactitem_level_4}
            {/loop_level_4}
          {/level_4}
        {/loop_level_3}
      {/level_3}
    {/loop_level_2}
{/level_2}
{/loop_level_1}
{end}

Eine Brotkrummennavigation. Dazu ist der Parameter pathactive notwendig, da nur aktive Punkte ausgegeben werden. Die If-Abfrage Außenrum sorgt übrigens dafür, dass auf der Startseite nichts angezeigt wird. Macht da ja keinen Sinn. Der Platzhalter {level} dazu ist auch neu.

Neben den Platzhaltern, die man in den Beispielen sieht, gibt es noch diese:

Zwischen {ifnotactitem_level_X} und {/ifnotactitem_level_X} bleibt nur etwas übrig, wenn der aktuelle Punkt NICHT aktiv ist.
Was zwischen {ifnotlast_level_X} und {\ifnotlast_level_X}steht wird nur ausgegeben, wenn der aktuelle Punkt nicht der letzte ist.

Ansonsten sind die gleichen Platzhalter für die eigentlichen Punkte möglich, wie beim menu.prg. Also:

{name}
{date}
{description}
{keywords}
{title}
{link}

{counter} zählt dann noch die Schleife mit. Damit kann man dann sehr spezielle Lösungen machen, z.B. besondere Trennlinien zwischen Menü-Hälften, andere Farben für jeden Punkt usw..

Weil Dinge wie eben eine Brotkrumennavigation oder eine Sitemap möglich sind, nennt sich dieses Modul nun eben Tree und nicht mehr Menu.

Wenn man ein neues HTML-Design macht und darin ein Beispiel-Menü enthalten ist, kann man dieses nun einfach mit den "level-Tags" versehen und hat im Handumdrehen ein funktionierendes Menü.

Übrigens:
Neu sind neben dem Platzhalter {level} auch noch:

{systemname}
{systemurl}
{systemadminname}
{systemadminmail}
{systemsendermail}

Die jeweils einfach den Wert ausgeben, der in der eforia.ini entsprechend hinterlegt ist. Der Sinn des Ganzen ist, nur an einer Stelle die URL des Systems, den Namen und solche Angaben ändern zu müssen. Das ist bei der Ersteinrichtung eine Hilfe. Diese Platzhalter können auch in allen Mailvorlagen benutzt werden.

Außerdem können {title}, {name}, {lfd}, {id}, {poscount} und {position} nun mit einem Prefix aufgerufen werden. Als Prefix ist parent, prev und next erlaubt. Beispielsweise gibt {parent.id} die ID der Elternseite aus. Das kann man benutzen, um Vorlagen in Abhängigkeit des Überpunktes verschieden reagieren zu lassen. Als eindeutiges Kriterium ist die ID sowieso nicht schlecht. Sie kann leichter eindeutig gehalten werden wie der Name und ist doch änderbarer als die Lfd. Wenn man z.B. mit Entwürfen arbeitet oder verschiedenen Sprachversionen ist die Lfd als Ziel eher weniger geeignet. Die ID bleibt auch gleich, wenn eine Seite verschoben wird, im Gegensatz zum Namen. Deshalb ist das Feld für die ID nun etwas größer und auch alphanumerische Angaben möglich.
Michael [Link entfernt, weil Linkziel leider nicht mehr verfÃ¼gbar] wollte schon seit Langem, dass die ID etwas mehr genutzt wird.

Dieser Artikel wurde veröffentlicht am 22.05.2010 um 16:56 Uhr. Tags: ewm5 menu tree beta | Permalink | Trackback URI