Veröffentlichung der TYPO3-Extension "Speaking URL fragments" (EXT:content_slug)

URL-Fragmente ("domain.de/seite/#interessanter-absatz"), häufig auch "Anker" oder "Sprungmarke" genannt, sind eine praktische Funktion, um direkt zu einem bestimmten Abschnitt einer Webseite zu springen.

Die beiden TYPO3-Inhaltselemente vom Typ "Section Index" beispielsweise generieren Seitenmenüs, die auch die Inhaltselemente der aufgeführten Seiten auflisten und verlinken. Als URL-Fragment dient dort die jeweilige UID des Inhaltselements (z.B. #c123). Das funktioniert einwandfrei, ist aber nicht gerade aussagekräftig. Gerade wenn man einen bestimmten Textabschnitt mit einer anderen Person teilen möchte, wäre ein lesbarer Anker wünschenswert.

Hier soll die neue Extension "content_slug" helfen:

1. Redakteure erhalten ein neues Textfeld für URL-Fragmente in TYPO3-Inhaltselementen.
2. Optional kann der Redakteur die Überschrift durch einen Anker-Link auf der Website ergänzen. Hierfür steht eine Checkbox im Inhaltselement bereit.
3. Die TYPO3-Menüs vom Typ "Section Index" verwenden die neuen URL-Fragmente, falls vorhanden. Bei allen Inhaltselementen ohne eigenes URL-Fragment wird weiterhin die UID verlinkt.

Abwärtskompatibilität: Da die neuen URL-Fragmente der Überschrift hinzugefügt werden, bleiben alle bisherigen Links zu Inhalten mit #c123 gültig. Wie oben geschrieben, berücksichtigen die TYPO3-Menüs sowohl Inhaltselemente mit als auch ohne eigenes URL-Fragment.

Zur Veranschaulichung habe ich hier ein "Section Index"-Element als Inhaltsverzeichnis ergänzt:

Die Verwendung von Zeichen in URL-Fragmenten bzw. id Attributen ist begrenzt. Mit HTML 5 wurden die Regeln zwar gelockert, aus Kompatibilitätsgründen greifen in dieser Extension aber die Regeln von HTML 4.

Das bedeutet, die URL-Fragmente dürfen die folgenden Zeichen beinhalten:

• ASCII-Zeichen (a-z)
• Ziffern (0-9)
• Unterstriche (_)
• Bindestriche (-)
• Punkte (.)

Sobald das Inhaltselement gespeichert wird, werden ...

• ... alle Zeichen in Kleinbuchstaben umgewandelt.
• ... HTML-Elemente vollständig entfernt.
• ... Leerzeichen in das Bindestrich-Zeichen umgewandelt.
• ... Sonderzeichen (z.B. äöü߀) in ASCII-Äquivalente umgewandelt.

Darüber hinaus wird mit uniqueInPid geprüft, ob sich auf derselben Seite bereits ein Inhaltselement mit identischem URL-Fragment befindet. In dem Fall wird eine Zahl am Ende des Fragments ergänzt (z.B. "inhalt0").
Hier gibt es aktuell noch ein Problem, das mehrsprachige Websites betrifft: uniqueInPid unterscheidet nicht zwischen der Sprache der Inhaltselemente. Daher ist ein identisches URL-Fragment bei lokalisierten Inhalten noch nicht möglich.

Der Sprung zu einem URL-Fragment funktioniert mit dem globalen HTML Attribut id. Das name Attribut kann dafür ebenfalls verwendet werden; laut HTML 5 Spezifikation darf es aber nur bei ausgewählten Elementen verwendet werden.
Bevor man einem Redakteur die Möglichkeit gibt, id-Attribute in einer Webseite zu setzen, sollte man unbedingt sicherstellen, dass dadurch keine Probleme entstehen: eine id gleichen Namens könnte im Template …

• … per CSS angesprochen werden oder
• … für JavaScript-Funktionalitäten bereitstehen.

Aus diesem Grund ist in der Extension voreingestellt, dass dem benutzerdefinierten URL-Fragment des Redakteurs die UID des Inhaltselements als Präfix vorangestellt wird.

Wenn ihr die volle Kontrolle über euer Website-Template besitzt, könnt ihr auch den Namen aller id Attribute im Template anpassen: entweder nutzt ihr hier Großbuchstaben oder verwendet zwei aufeinanderfolgende Bindestriche im Namen. Im Fragment-Feld würde beides durch die Evaluierung umgewandelt werden, daher sind Duplikate ausgeschlossen.

Anschließend könnt ihr die UID in den Fluid-Templates ruhigen Gewissens entfernen (wie auch in meinem Blog geschehen).

In den nächsten Versionen möchte ich die Extension weiter verbessern:

• Sofortige Evaluierung des URL-Fragments, wenn der Redakteur das Formularfeld verlässt (per JavaScript).
• Ein Button, mit dem der Redakteur ein URL-Fragment aus dem aktuellen Inhalt des Header-Felds generieren kann.
• Die Konfiguration des gesamten URL-Fragments über TypoScript (also Feldwert, Präfix und/oder Suffix). Das würde die Anpassung der Fluid-Templates erleichtern.

Zudem sollte natürlich das oben genannte Problem mit uniqueInPid behoben werden.