3.4| ViewHelper: Hyperlinks – Externe und Interne Links einbauen
Der nächste wichtige ViewHelper in Typo3 FLUID ist der Hyperlink (link) ViewHelper. Diesen ViewHelper unterteilen wir in 4 Unterpunkte. Interner, Externer Link (mit _GET Variablen), Ankerlinks und Mailto Links.
Ankerlinks
Ankerlinks werden in dem ViewHelper Hyperlinks folgendermaßen dargestellt:
<f:link.page section="header">To Top</f:link.page>
In diesem Beispiel ist der Anker der Div Container „#header“ und stellt somit einen „To Top“ Link dar. (Ganz nach oben springen)
„To Top“ ist der Text im a-Linkelement. Der „section“ Parameter gibt den Divcontainer an, der hinter der „#“ im Link stehen soll.
Interner Link
Interne Links werden mit einem weiteren Parameter angegeben. Diese werden dynamisch nach der Seitenid (pageUid) erstellt. Auch wenn sich der Titel der Seite ändert, bleibt der Link aktuell und passt sich an, da er dynamisch generiert wird. Die Schreibweise des ViewHelpers für Links ist folgende:
<f:link.page pageUid="100">Impressum</f:link.page>
Der Parameter „pageUid“ gibt die ID der Seite an, zu der der Link führen soll. Der Text innerhalb des „<f:link.page>“ Tags gibt den Text an, der später im a-Element liegen soll. In unserem Beispiel „Impressum“.
Die PageUid findet man über den Seitenstamm im Backend heraus, welcher sich am linken Bildschirmrand befindet. Wenn man etwas länger über einer Seite mit dem Mauszeiger fährt, erscheint in einem kleinen Tooltip die Seitenid. In unserem Beispiel ist diese die Zahl 100.
Optional lassen sich durch Hinzufügen eines weiteren Parameters auch _GET Variablen im Link mit übertragen. Also der hintere Teil des Linkes. Z.B. domain.de?name=wert.
Hier hätte die Variable „name“ den Wert „wert“.
Dies lässt sich durch folgende Schreibweise bewerkstelligen:
<f:link.page pageUid="1" additionalParams="{name: 'wert'}">Startseite</f:link.page>
Der Parameter „additionalParams“ gibt in der JSON Schreibweise die _GET Variablen an, die hinten an den Link angefügt werden sollen.
Externer Link
Auch externe Links lassen sich über den ViewHelper Hyperlink erstellen. Dazu wird folgender ViewHelper in die HTML Template Dateien eingefügt:
<f:link.external uri="http://www.marvins-blog.de" target="_blank"> Link zu Marvins Blog</f:link.external>
Dieser ViewHelper würde einen Externen Link zu diesem Blog hier erstellen. Der Parameter „uri“ gibt den absoluten externen Link an. Auch der „target“ Parameter des a-Elementes lässt sich hier einstellen. Auch hier gibt der Text im ViewHelper den Text im späteren a-Element an. In diesem Beispiel „Link zu Marvins Blog“.
Mailto Hyperlink
Nun zur letzten Linkmöglichkeit. Einem Link mit der Mailto Funktion.
<f:link.email email="[email protected]" />
Auch hier ist die Schreibweise relativ simpel. Der Parameter „email“ gibt die Emailadresse an, die im a-Element hinter dem „mailto:“ stehen soll und an die somit die Email geschickt wird.
Typo3 CMS 6.1 FLUID Template programmieren:
- 4.11| Typo3 CMS 6 Backend auf deutsch umsetellen
- 4.10| Logo mit Link zur Startseite einfügen – Typo3 Fluid
- 4.9| Ein Kontaktformular in Typo3 anlegen – Typo3 Fluid
- 4.8| News System für Typo3 – tx_news einrichten
- 4.7| RealUrl – Suchmaschinenfreundliche Links für Typo3 – SEO
- 4.6| Eine erweiterte Suchfunktion auf MySQL Basis für Typo3
- 4.5| Typo3 Updaten – Wie Update ich Typo3 richtig?
- 4.4| Inhaltsblöcke vererben – Typo3 Template mit FLUID
- 4.3| Objekt: TEXT – Textblöcke in Typoscript Typo3 FLUID
- 4.2| Menüs, Untermenüs und Navigation erstellen – Typo3 Fluid
- 4.1| Rechte, Linke Spalte und Rand ausgeben – Mehrspaltiges Layout
- 3.7| ViewHelper: Inline Notation – If Abfragen in einer Zeile – Typo3 Fluid
- 3.6| ViewHelper: Comment – Kommentieren von Code
- 3.5| ViewHelper: if – If Abfragen im Tempalte
- 3.4| ViewHelper: Hyperlinks – Externe und Interne Links einbauen
- 3.3| ViewHelper: cObject – Typoscript Objekte im Template anzeigen
- 3.2| ViewHelper: Format – Daten für das Frontend aufbereiten
- 3.1| ViewHelper: Image – Bilder einfügen
- 2.1| Layouts, Templates und Partials – Typo3 FLUID Template
- 2.0| Der Einstieg in FLUID
- 1.2| FLUID Template aufteilen – Struktur erstellen
- 1.1| TypoScript Basics – Typo3 Template mit FLUID programmieren
