Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- typoscript_navigation [25/09/2019 00:16]
Thomas Berscheid [Footer Navigation zwei Ebenen]
+++ 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 =====
@@ Zeile 190: / Zeile 237: @@
   }
-Nun muss das 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 ====