typoscript_navigation

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung
Vorhergehende Überarbeitung
typoscript_navigation [25/09/2019 00:05]
Thomas Berscheid [Breadcrumb Navigation mit Hover Effekt]
typoscript_navigation [15/11/2020 23:22] (aktuell)
Thomas Berscheid [Breadcrumb Navigation mit VHS Viewhelper für Rich Text]
Zeile 2: Zeile 2:
  
  
-Wir zeigen Ihnen hier den Aufbau einer Navigation mit TYPO3. Mit TyypoScript 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.+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.
  
  
Zeile 121: Zeile 121:
   }     }  
      
 +  
 +==== 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 ===== ===== 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 = COA
Zeile 134: Zeile 187:
       1 {       1 {
         NO = 1         NO = 1
-       expAll = 1+        expAll = 1
         collapse = 0         collapse = 0
         NO.allWrap = |*||<br />|*||         NO.allWrap = |*||<br />|*||
Zeile 143: Zeile 196:
   }     }  
      
-===== Sprache der Webseite umschalten=====+   
 +==== 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 ==== ==== Sprachmenu  mit Textlinks ====
  • typoscript_navigation.1569362721.txt.gz
  • Zuletzt geändert: 25/09/2019 00:05
  • von Thomas Berscheid