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 [12/10/2020 20:37]
Thomas Berscheid
typoscript_navigation [15/11/2020 23:22] (aktuell)
Thomas Berscheid [Breadcrumb Navigation mit VHS Viewhelper für Rich Text]
Zeile 140: Zeile 140:
   </v:page.breadCrumb>   </v:page.breadCrumb>
      
-Im obigen Fall bauen wir eine Navigation mit einer ungeordneten Liste über <ul> und <li> auf. Wir können natürlich auch ein <div> nehmen oder es bei reinem Text belassen - unser TYPO3 Projekt bestimmt, welcher HTML-Quelltext dabei generiert wird.  +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 ==== ==== 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.+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 =====
Zeile 217: Zeile 239:
 Nun muss das [[css_beispiele#css_fuer_footer_navigation_mit_zwei_ebenen|CSS angepasst]] werden, damit die Ebenen auch responsiv dargestellt werden.   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=====+===== 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.1602527869.txt.gz
  • Zuletzt geändert: 12/10/2020 20:37
  • von Thomas Berscheid