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:

Marvin Sengera

Hey! Ich bin Marvin Sengera, Inhaber der Internetagentur "Binärfabrik" aus Paderborn. Ich habe mein Bachelorstudium Informatik mit Schwerpunkt Industriespionage an der Hochschule Hamm Lippstadt abgeschlossen und absolviere derzeit meinen Master in Fachrichtung "Technical Entrepreneurship and Innovation". Ich beschäftige mich rund um die Themen Informatik, Innovation & Unternehmensgründung.

Das könnte dich auch interessieren …

Schreibe einen Kommentar