Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.


typoscript_navigation [2023.12.12 16:02] (aktuell) – angelegt - Externe Bearbeitung 127.0.0.1
Zeile 1: Zeile 1:
 +====== TypoScript Navigation ======
  
 +
 +Wir zeigen Ihnen hier den Aufbau einer Navigation mit TYPO3. Mit TypoScript können Sie nicht nur eine hierarchische Navigation der gesamten Webseite erzeugen. Es gibt auch Sonderfälle von Menus, die sich mit TypoScript hervorragend generieren lassen.
 +
 +
 +
 +
 +===== Navigation mit besonderen Seiten =====
 +
 +Diese Art der Navigation baut mit TypoScript Links zu besonderen Seiten auf.
 +
 +Denn oftmals steht man bei der Arbeit an einer Webseite vor der Aufgabe, bestimmte Links auf jeder Seite zu schalten. Dies können z. B. Links zum Impressum oder zum Datenschutz sein, die im Kopfbereich oder im Footer der Webseite dargestellt werden und auf jeder Seite sichtbar sein sollen. Für diesen Fall gibt es den Typ ''special = list'' der Navigation in TypoScript. Dieser Art der Navigation gibt man bestimmte IDs von Seiten vor, die dann als Links angezeigt werden. Dabei ist es unerheblich, in welcher Hierarchie diese Links stehen.
 +  
 +  lib.navigation_banner = COA
 +  lib.navigation_banner {
 +    10 = HMENU
 +    10 {
 +      special = list
 +      special.value = 2, 10, 72, 71
 +      entryLevel = 0
 +    
 +      1 = TMENU
 +      1 {
 +        NO = 1
 +        expAll = 0
 +        collapse = 0
 +        NO.ATagParams = class="bread_link_small white"
 +        NO.linkWrap = ||*|
 +      }
 +    }
 +  }  
 +
 +
 +===== Brotkrümel Navigation =====
 +
 +Als es noch keine Smartphones und noch keine tragbaren Navigationssysteme gab, wurden Kinder in Märchen in den Wald oder in Höhlen geschickt. Damit sie wieder hinausfanden, streuten sie Brotkrümel auf den Weg. Dem gleichen Zweck dient eine Navigation in einer Webseite, die uns sagt, wie wir wieder zur Startseite zurückkommen und welche Seiten auf dem Weg dahin liegen: Die Brotkrümel-, Breadcrumb- oder Parallel-Navigation.
 +
 +==== TypoScript für eine Breadcrumb Navigation ====
 +
 +Dieses TypoScript baut eine Breadcrumb Navigation auf, die in der Startseite beginnt.
 +
 +Dabei sind die folgenden Parameter von Bedeutung:
 +  * ''special = rootline'' ist der Aufruf einer Parallelnavigation
 +  * ''special.range = 0'' lässt die Navigation in der Startseite beginnen. Möchte man z. B. erst in der 2. Ebene der Navigation beginnen, kann man hier mit dem Wert "2" starten.
 +  * ''allWrap = |*|| » |*||'' ist ein schönes Beispiel für einen ''option split''. Dieses Objekt baut die Navigation in einer bestimmten Reihenfolge auf. Als Trenner zwischen den einzelnen Menus dient ein HTML-Sonderzeichen.
 +  * ''ATagParams = [...]'' weist dem generierten ''<a href="[...]">'' Link eine CSS-Klasse zu.
 +
 +
 +  lib.breadcrumb = HMENU
 +  lib.breadcrumb {
 +    special = rootline
 +    special.range = 0
 +    1 = TMENU
 +    1 {
 +      wrap = |
 +      target = _top
 +      NO {
 +        linkWrap = |
 +        allWrap = |*||&nbsp;&#187;&nbsp;|*||
 +        ATagParams = class="bread_link_small"
 +      }
 +    }
 +  }
 +
 +
 +==== Breadcrumb Navigation mit Hover Effekt ====
 +
 +Hier ist ein Sonderfall einer Breadcrumb Navigation, den wir für die Georgienseite genutzt haben. Beim Überfahren eines Links in der Parallelnavigation taucht unter dem Link ein formatierter Text auf, der eine Beschreibung der Seite enthält. Dazu nutzen wir die ''prepend''-Methode. Aus der Tabelle ''pages'' von TYPO3 werden mehrere potenzielle Felder über ''field'' in hierarchischer Reihenfolge ausgelesen.
 +
 +Das Aufklappen der Navigation muss über ein [[css_beispiele#breadcrumb-navigationpopup_unter_dem_link|entsprechendes CSS]] geregelt werden.
 +
 +  lib.breadcrumb = HMENU
 +  lib.breadcrumb {
 +    special = rootline
 +    special.range = 0
 +    1 = TMENU
 +    1 {
 +      wrap = |
 +      target = _top
 +      NO {
 +        linkWrap = |
 +        allWrap = |*||&nbsp;&#187;&nbsp;|*||
 +      
 +        stdWrap.prepend = TEXT
 +        stdWrap.prepend {
 +          field = description // subtitle // title
 +          wrap = <span>|</span>
 +        }
 +        ATagParams = class="bread_link_small"
 +      }
 +    }
 +  }
 +  
 +  
 +==== Breadcrumb Navigation ohne Link aktuelle Seite ====  
 +
 +Hier ein Sonderfall für eine Breadcrumb-Navigation: Bei der aktuellen Seite (''CUR'') wird der Link abgeschaltet. Dies ist insofern sinnvoll, als man sich ja gerade auf dieser Seite befindet.
 +
 +  lib.breadcrumb = HMENU
 +  lib.breadcrumb {
 +    special = rootline
 +    special.range = 0
 +    1 = TMENU
 +    1 {
 +      wrap = |
 +      target = _top
 +  
 +      ## Normalzustand der Navigation
 +      NO {
 +        linkWrap = |
 +        allWrap = |*||&nbsp;&raquo;&nbsp;|*||
 +      }
 +  
 +      ## Aktuell aufgerufene Seite nicht verlinkt
 +      CUR = 1
 +      CUR {
 +        doNotLinkIt = 1
 +      }
 +    }
 +  }  
 +  
 +  
 +==== Breadcrumb Navigation mit VHS Viewhelper ====
 +
 +Eine Brotkrümelnavigation können wir mit TYPO3 nicht nur über TypoScript, sondern auch über den VHS Viewhelper aufbauen. Diese wundervolle Sammlung alltäglich genutzter Funktionen in einer Webseite ist dann die einzige Wahl, wenn man mit Rich Text Formaten arbeiten möchte. 
 +
 +Hier ein Beispiel für den Aufbau einer Breadcrumb Navigation mit dem VHS Viewhelper:
 +
 +  <v:page.breadCrumb as="menu">
 +    <ul>
 +      <f:for each="{menu}" as="menuItem">
 +        <li>
 +          <f:link.page pageUid="{menuItem.uid}">
 +            {menuItem.title}
 +          </f:link.page>
 +        </li>
 +      </f:for>
 +    </ul>
 +  </v:page.breadCrumb>
 +  
 +Im obigen Fall bauen wir eine Navigation mit einer ungeordneten Liste über eine ungeordnete Liste auf. Wir können natürlich auch ein DIV-Element nehmen oder es bei reinem Text belassen - unser TYPO3 Projekt bestimmt, welcher HTML-Quelltext dabei generiert wird.  
 +
 +==== Breadcrumb Navigation mit VHS Viewhelper für Rich Text ====
 +
 +Wenn wir unsere Webseite im Rahmen einer SEO bearbeiten, ist es eine gute Maßnahmen zur Suchmaschinenoptimierung, mit Rich Text Formaten zu arbeiten. Mit Hilfe dieser Formatierung erleichtern wir Suchmaschinen das Crawlen unserer Webseite. Der Klickpfad kann mit Hilfe entsprechender Rich Text Snippets von Google eingelesen und bei einem Suchergebnis dargestellt werden.
 +
 +An diesem Punkt müssen wir uns von TypoScript verabschieden. Denn um den Anforderungen des Code für das Rich Text Format zu gehorchen, müssen wir die einzelnen Ebenen der Navigation durchzählen. Dies geht mit dem VHS Viewhelper.
 +
 +Hier ist nun ein Source Code für eine Brotkrümelnavigation mit dem VHS Viewhelper und Rich Text Formatierung:
 +
 +  <v:page.breadCrumb as="menu">
 +    <span itemscope itemtype="https://schema.org/BreadcrumbList">
 +      <f:for each="{menu}" as="menuItem" iteration="breadIteration">
 +        <span itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
 +        <f:link.page pageUid="{menuItem.uid}" title="{menuItem.title}" additionalAttributes="{itemprop="item"}">
 +          <span itemprop="name">{menuItem.title}</span>
 +        </f:link.page>
 +        <meta itemprop="position" content="{breadIteration.cycle}" />
 +        </span>
 +      </f:for>
 +    </span>
 +  </v:page.breadCrumb>
 +
 +
 +<WRAP left info 100%>
 +Die Vorlage für den Aufbau einer Breadcrumb Navigation finden Sie bei [[https://schema.org/BreadcrumbList|Schema.Org]].
 +</WRAP>
 +
 +===== Footer Navigation =====
 +
 +Hier finden Sie Beispiele für Aufbau und Integration einer Footer Navigation in einer Webseite. Man nutzt Footer oftmals, um für Besucher die wichtigsten Inhalte einer Webseite auf einen Schlag und in jeder Seite sichtbar darzustellen.
 +
 +==== Footer Navigation eine Ebene ====
 +
 +
 +Mit diesem TypoScript können Sie eine Navigation mit **einer** Ebene in den Footer Ihrer Webseite integrieren.
 +
 +  lib.navigation_footer = COA
 +  lib.navigation_footer {
 +    
 +    10 = HMENU
 +    10.wrap=<div class="ibkfooter">|</div>  
 +    10.entryLevel = 0
 +    10 {
 +      1 = TMENU
 +      1 {
 +        NO = 1
 +        expAll = 1
 +        collapse = 0
 +        NO.allWrap = |*||<br />|*||
 +        NO.ATagParams = class="bread_link_small"
 +        <span class="div_footer">|</span>
 +      }
 +    }
 +  }  
 +  
 +  
 +==== Footer Navigation zwei Ebenen ====  
 +
 +Diese Navigation baut eine Navigation auf zwei Ebenen auf.
 +
 +  lib.navigation_footer = COA
 +  lib.navigation_footer {
 +    20 = HMENU
 +    
 +    20 {
 +      special = directory
 +      special.value = 1
 +      excludeUidList = 1, 2
 +    
 +      1 = TMENU
 +      1 {
 +        expAll = 1
 +        collapse = 0
 +        NO = 1
 +        NO {
 +          ATagParams = class="footer_link_small strong"
 +          ATagTitle.field = description // subtitle // title
 +          linkWrap = <div class="div_navigation_footer footer_ebene_1">|</div>
 +          wrapItemAndSub = <div class="footer_frame">|</div>
 +        }
 +      }
 +    
 +      2 = TMENU
 +      2 {
 +        expAll = 1
 +        collapse = 0
 +        NO = 1
 +        NO {
 +          ATagParams = class="footer_link_small"
 +          ATagTitle.field = description // subtitle // title
 +          linkWrap = <div class="div_navigation_footer footer_ebene_2">|</div>
 +        }
 +      }
 +    }
 +  }  
 +  
 +Nun muss das [[css_beispiele#css_fuer_footer_navigation_mit_zwei_ebenen|CSS angepasst]] werden, damit die Ebenen auch responsiv dargestellt werden.  
 +  
 +===== Sprache der Webseite umschalten - Language Selection Menu =====
 +
 +Im folgenden Kapitel beschreiben wir Ihnen an Hand von Source Code Beispielen, wie Sie ein Language Selection Menu in TYPO3 mit TypoScript aufbauen. Es gibt seit der Version 10.4 von TYPO3 jedoch auch die Möglichkeit, ein Sprachmenu über Fluid Templates mit Hilfe des Data Processors aufzubauen. 
 +
 +<WRAP left info 100%>
 +[[fluid_navigation#language_selection_menu_-_sprachumschalter_mit_fluid|Language Selection Menu - Sprachumschalter mit Fluid]]
 +</WRAP>
 +
 +==== Sprachmenu  mit Textlinks ====
 +
 +Dieses Sprachmenu ist auf zwei Sprachen (deutsch, englisch) ausgelegt. Die IDs für die Sprachen sind 0 und 1. Das Menu lässt sich für weitere Sprachen erweitern.
 +  
 +  lib.language_text = COA
 +  lib.language_text {
 +    20 = HMENU
 +    20 {
 +      special = language
 +      special.value = 0,1
 +      special.normalWhenNoLanguage = 0
 +      wrap =
 +      1 = TMENU
 +      1 {
 +        noBlur = 1
 +        NO = 1
 +        NO {
 +          doNotLinkIt = 1
 +          stdWrap.override = &nbsp;de&nbsp; || &nbsp;en&nbsp;
 +          stdWrap {
 +            typolink {
 +              parameter.data = page:uid
 +              additionalParams = &L=0 || &L=1
 +              ATagParams = hreflang="de-DE" || hreflang="en-GB"
 +              ATagParams = class="bread_link_small"
 +              addQueryString = 1
 +              addQueryString.exclude = L,id,no_cache
 +              addQueryString.method = GET
 +              titleText.value = Hier Klicken!
 +              no_cache = 1
 +            }
 +          }
 +        }
 +        ACT < .NO
 +        ACT.linkWrap = |
 +        ACT.stdWrap.typolink.ATagParams = class="bread_link_small active"
 +        
 +        ## Normaler Zustand des Sprachumschalters
 +        USERDEF1 < .NO
 +        USERDEF1 {
 +          linkWrap = |
 +          stdWrap.typolink >
 +        }
 +        
 +        ## Aktiver Zustand für ausgewähltes Land
 +        USERDEF2 < .ACT
 +        USERDEF2 {
 +          linkWrap = |
 +          stdWrap.typolink >
 +        }
 +      }
 +    }
 +    wrap = |
 +  }  
 +  
 +==== Sprachmenu mit Flaggen ====
 +
 +Dieses Sprachmenu erlaubt die Umschaltung zwischen zwei Sprachen, in diesem Fall mit den IDs 0 und 1. Diesen sind die Sprachen deutsch und englisch zugeordnet. Für beide Sprachen müssen Flaggen oder andere Symbole als Bilder bereitgestellt und eingebunden werden. Die Sprachen sind beliebig erweiterbar.
 +
 +  lib.language_image = HMENU
 +  lib.language_image {
 +    special = language
 +    special.value = 0,1
 +    special.normalWhenNoLanguage = 0
 +    1 = GMENU
 +    1.NO {
 +      XY = [5.w]+2, [5.h]+2
 +      XY = [5.w], [5.h]
 +      backColor = black
 +      
 +      ## Einbindung der Flaggen als Bilder
 +      5 = IMAGE
 +      5 {
 +        ## Link zum Bild
 +        file = fileadmin/img/flags/DE.png || fileadmin/img/flags/GB.png
 +        
 +        ## Bild zuschneiden und in Größe anpassen
 +        file.width = 30c
 +        file.height = 25
 +        border = 0
 +        altText = title
 +        offset = 0
 +      }
 +    }
 +    1.ACT < .1.NO
 +    1.ACT = 1
 +    1.ACT.backColor = white
 +    
 +    ## Normalzustand der Navigation
 +    1.USERDEF1 < .1.NO
 +    1.USERDEF1 = 1
 +    1.USERDEF1.backColor = gray
 +    1.USERDEF1.10 = EFFECT
 +    1.USERDEF1.10.value = gray
 +    1.USERDEF1.noLink = 1
 +    
 +    ## Aktiver Zustand - ausgewähltes Land
 +    1.USERDEF2 < .1.USERDEF1
 +    1.USERDEF2.backColor = gray
 +  }