So fügen Sie Anker zu Links in TYPO3 Fluid Templates hinzu

Das Erstellen navigierbarer und anwenderfreundlicher Webseiten beinhaltet oft den Einsatz von Ankern, um den Nutzern das Springen zu spezifischen Abschnitten einer Seite zu ermöglichen. In TYPO3 Fluid Templates bieten sich zwei einfache Methoden an, um Links mit Ankern zu versehen. Im Folgenden erfahren Sie, wie Sie beides erreichen können.

Methode 1: Nutzung des f:link.action ViewHelpers

Der f:link.action ViewHelper ist eine starke Komponente von TYPO3 Fluid, die es ermöglicht, Action-Links schnell und einfach zu erstellen. Um einen Anker zu solch einem Link hinzuzufügen, können wir den URI-Builder erweitern.

<f:link.action
    action="deineAction"
    controller="DeinController"
    extensionName="deineExtension"
    pluginName="deinPlugin"
    arguments="{deineArgumente}"
    uriBuilder="{object: UriBuilder->setUseCacheHash(false)->uriFor('deineAction', {deineArgumente}, 'DeinController', 'deineExtension', 'deinPlugin')}#deinAnker">
    Link Text
</f:link.action>

Methode 2: Erstellen des Links mit dem f:uri.action ViewHelper

Wenn Sie einen einfacheren Ansatz bevorzugen, können Sie den f:uri.action ViewHelper verwenden, um den Link zu erstellen und den Anker direkt im HREF-Attribut eines normalen Anker-Tags (A-Tag) anzufügen.

<a href="{f:uri.action(action: 'deineAction', controller: 'DeinController', extensionName: 'deineExtension', pluginName: 'deinPlugin', arguments: {deineArgumente})}#deinAnker">
    Link Text
</a>

Vier Varianten für die Implementierung von Links mit Ankern

• Link mit Action „show“ und Anker „details“:

  <a href="{f:uri.action(action: 'show', controller: 'Content', extensionName: 'deineExtension', pluginName: 'deinPlugin', arguments: {'id': deinElementId})}#details">
      Mehr Details
  </a>
  

• Link, der auf einen spezifischen Abschnitt der FAQ-Seite verweist:

  <f:link.action
      action="list"
      controller="Faqs"
      extensionName="deineExtension"
      pluginName="deinPlugin"
      arguments="{category: 'allgemein'}"
      uriBuilder="{object: UriBuilder->uriFor('list', {'category': 'allgemein'}, 'Faqs', 'deineExtension', 'deinPlugin')}#faq-allgemein">
      Allgemeine FAQs
  </f:link.action>
  

• Link zu persönlichen Einstellungen mit Argument „nutzer“:

  <a href="{f:uri.action(action: 'edit', controller: 'User', extensionName: 'deineExtension', pluginName: 'deinPlugin', arguments: {'nutzer': nutzerId})}#einstellungen">
      Einstellungen bearbeiten
  </a>
  

• Link, um zum Anker „kontakt“ auf der Über-uns-Seite zu springen:

  <f:link.action
      action="index"
      controller="About"
      extensionName="deineExtension"
      pluginName="deinPlugin"
      uriBuilder="{object: UriBuilder->uriFor('index', {}, 'About', 'deineExtension', 'deinPlugin')}#kontakt">
      Über uns - Kontakt
  </f:link.action>
  

Diese Variationen zeigen, dass Sie mit Fluid in TYPO3 die volle Kontrolle darüber haben, wie Sie Links erstellen und wie Sie diese anpassen können, um ein optimales Benutzererlebnis zu gewährleisten. Egal ob Sie den f:link.action oder den f:uri.action ViewHelper nutzen, die Integration von Ankern in Ihre Links erhöht die Nutzbarkeit Ihrer TYPO3-Webseite erheblich.

Und vergessen Sie nicht: Ersetzen Sie „deineAction“, „DeinController“, „deineExtension“ und „deinPlugin“ durch die tatsächlichen Namen Ihrer TYPO3-Installation und passen Sie die Argumente an Ihre spezifischen Bedürfnisse an.