Ich neige dazu, meine Artikel am Stück zu lassen, und nicht in mehrere Seiten aufzuteilen. Theoretisch ist das mit Joomla! möglich, aber ich finde das Hin- und Herblättern mühselig – lieber scrolle ich innerhalb einer Seite vor und zurück, wenn ich etwas nochmal nachlesen möchte. Trotzdem wollte ich dem geneigten Leser eine einfache Navigationshilfe an die Hand geben – ein Inhaltsverzeichnis am Anfang des Artikels. Joomla! bringt so etwas mit – aber nur, wenn man das Pagebreak-Plugin verwendet, also mehrere Seiten erstellt. Ich habe mich also auf die Suche nach einer entsprechenden Erweiterung gemacht und bin fündig geworden.

In diesem Artikel möchte ich beschreiben, wie das Plugin "Article Table of Contents" installiert und konfiguriert wird, und wie man dann das so entstandene Inhaltsverzeichnis an sein Webseitendesign anpassen kann.

Das Plugin

Ich habe unter den für Joomla! verfügbaren Erweiterungen nur eines gefunden, dass genau das macht, was ich suche: Es handelt sich um das Plugin "Article Table of Contents".

Dieses Plugin durchsucht den Artikel nach Überschriften und stellt daraus ein hierarchisch geordnetes Verzeichnis zusammen. "Überschrift" heißt dabei im Detail, dass im HTML-Code des Artikels nach den entsprechenden HTML-Tags gesucht wird, also <h1>, <h2>, etc. Das hat den angenehmen Nebeneffekt, dass man als Autor dazu gezwungen wird, diese Tags für die Strukturierung seines Textes zu verwenden, und dass das Design konsistent bleibt.

Installation

Nach dem Download der gepackten ZIP-Datei lässt sich das Plugin wie jedes andere über den Menüpunkt "Erweiterungen – Installieren/Deinstallieren – Paketdatei hochladen" in die Webseite einbauen. Nicht vergessen, das Plugin unter "Erweiterungen – Plugins" zu aktiveren, sonst passiert nämlich gar nichts!

Konfiguration

Klickt man im selben Fenster auf den Titel des Plugins, zeigt sich die Konfigurationsseite. Hier bietet sich die Möglichkeit, ein paar grundlegende Einstellung zur Anzeige des Inhaltsverzeichnisses zu tätigen, z.B. die Überschriften zu nummerieren.

Konfiguration des Plugins

Die Homepage für dieses Plugin in der Version 1.2 befindet sich übrigens unter http://en.straton-it.fr/open-source/article-table-of-contents-joomla-plugin und enthält weitere Einzelheiten zur Installation und Konfiguration.

Erster Erfolg! Aber...

Nach dem Bestätigen aller vorgenommenen Einstellungen rufe ich einen meiner Artikel auf, um zu sehen, ob das Plugin funktioniert. Heureka! Es klappt! Aber halt, was ist das?

Article Index

Wie doof. Leider kann man im Plugin keine andere Sprache wählen, und so lautet das Inhaltsverzeichnis standardmäßig eben nicht "Inhaltsverzeichnis" sondern "Article Index".

Aber das wäre doch gelacht… Wie bei der Konfiguration des Plugins zu sehen, ist der Programmcode in der Datei toc.php zu finden. Diese kann man in einem beliebigen Texteditor öffnen (nur vielleicht nicht gerade in Word oder sowas – damit kommen zu viele unerwünschte Formatierungen in die Datei). UltraEdit oder Notepad++ sind prima.

Achtung! Wir nehmen in der Datei toc.php jetzt eine Änderung vor. Da die Datei selbst dadurch modifiziert wird, geht diese Änderung wahrscheinlich verloren, wenn man ein Update des Plugins installiert.

Änderung in toc.php

In der geöffneten toc.php suche ich nach dem Begriff "Article Index". In Zeile 104 werde ich fündig. Mit dem dort angegebenen Programmcode wird der Text direkt in die erste Zeile des Inhaltsverzeichnisses geschrieben. Ich lösche "Article Index" und schreibe stattdessen "Inhaltsverzeichnis". Schnell noch die Datei speichern und per FTP auf den Webserver hochladen. (Die Datei gehört in das Verzeichnis root/plugins/content. Die vorhandene Datei toc.php muss überschrieben werden, sollte aber aus Sicherheitsgründen im Original irgendwo aufbewahrt werden.)

Nächster Versuch. Juchu!

Inhaltsverzeichnis

Das Inhaltsverzeichnis wird aufgehübscht

Zugegeben, das neugewonnene Inhaltsverzeichnis macht noch nicht viel her. Aber das kann man ja ändern. Dazu muss man zum Glück nicht wieder den Programmcode verändern, sondern die komplette Formatierung kann per CSS erledigt werden.

Vorbereitungen zum Aufhübschen

Innerhalb der Admin-Oberfläche von Joomla! können über "Erweiterungen - Templates", Auswahl des betroffenen Templates und dann Klick auf "CSS bearbeiten" die Dateien direkt bearbeitet werden, die die CSS Formate für das ausgewählte Template enthalten. In der Liste sind aber fünf CSS-Dateien aufgeführt. Welche ist nun die richtige? Und woran erkenne ich, wo genau ich die Änderungen vornehmen muss?

Zumindest für Freunde des Firefox Internet-Browsers gibt es eine relative simple Antwort: Firebug. Firebug ist eine Erweiterung des Browsers, die es einem erlaubt, die HTML-Struktur und die dazugehörige CSS-Formatierung der betrachteten Seite zu analysieren.

Analyse mit Firebug

Ich öffne also meine Website und schaue mir den Artikel mit Inhaltsverzeichnis an. Ohne Mühe erkenne ich in Firebug, dass es sich bei diesem Inhaltsverzeichnis lediglich um eine einfache Tabelle handelt, die in den einzelnen Zeilen die jeweiligen Einträge enthält. Rechts daneben wird schön gezeigt, welche CSS-Formatierungen gelten und in welchen CSS-Dateien diese stecken. Die CSS-Klasse, die das Aussehen des Verzeichnisses steuert, heißt "contenttoc". Das besondere an Firebug ist, dass ich hingehen und – ohne den Seitenquelltext oder die dazugehörige CSS-Datei zu verändern – eigene Formatierungen hinzufügen oder ausschalten kann. Ich experimentiere ein wenig herum und erhalte nach einer Weile ein Inhaltsverzeichnis, dass mir schon deutlich besser gefällt als das originäre.

Es werde hübsch!

Wie gesagt, alle Änderungen, die ich bis jetzt mittels Firebug vorgenommen habe, befinden sich letztlich nur lokal im Speicher dieser Firefox-Erweiterung. Sobald ich den Browser schließe und meine Seite erneut aufrufe, habe ich wieder dasselbe Inhaltsverzeichnis vor mir, dass immer noch nicht viel her macht.

Glücklicherweise verrät mir Firebug aber, in welcher CSS-Datei die entsprechenden Klasse "contenttoc" zu finden ist, die ich ändern will. Im Joomla! Admin-Panel klicke ich mich also bis dorthin durch, öffne die Datei und schreibe die nötigen Vorgaben hinein. Speichern, fertig.

Neues Design

Argh! Was ist das?!

Mit dem neugewonnenen und aufgehübschten Inhaltsverzeichnis war ich drei Tage lang sehr zufrieden. Bis ich dann aus irgendeinem Grund mal die Seite mit der Datenschutzerklärung aufrief und feststellte, dass auch dort - wo es blöd aussieht und nicht viel nützt - auf einmal ein Inhaltsverzeichnis zu sehen war. Eine kurze Überprüfung ergibt dann noch, dass jetzt bei allen Artikeln der Inhalt erscheint, in denen ich die Formatierung mit den HTML-Tags <h1>, <h2>, usw. angewandt habe. Verdammt. So hatte ich mir das nicht vorgestellt, eigentlich sollte z. B. in Blog-Beiträgen kein Inhaltsverzeichnis auftauchen.

Fakt ist, dass man das Plugin nicht für einzelne Beiträge, Bereich oder Kategorien wahlweise ein- oder ausschalten kann. Der Programmierer bietet auf seiner Website zwar eine Möglichkeit an. Diese besteht darin, in den HTML-Code eines Artikels die folgende Zeichenfolge einzugeben:

<!-- ArticleToC: enabled=no -->

Damit soll dann für diesen Artikel das Inhaltsverzeichnis ausgeschaltet werden. Bei mir hat das aber nicht funktioniert. Überall dort, wo die Strukturierung mittels Überschriften erfolgt, wird das automatisch erkannt und ein Inhaltsverzeichnis wird angelegt. Zum Glück bin ich durch einen Eintrag im Joomla! Extensions Directory auf die Lösung gestoßen. Und die Lösung heißt wieder einmal: CSS.

Mal siehst Du mich, mal siehst Du mich nicht.

Mit CSS kann man nicht nur Farben, Schriftgrößen, Abstände, Hintergründe und ähnliches gestalten, sondern man kann auch gezielt Elemente unsichtbar machen. Das Zauberwort heißt "display". Verwendet man diese Angabe in der Form "display: none;", wird das so formatierte Element nicht dargestellt.

Ein umfangreicheres Tutorial dazu gibt es unter http://docs.joomla.org/Tutorial:Using_Class_Suffixes_in_Joomla!_1.5, allerdings auf Englisch.

Der Trick besteht nun darin, zu den schon vorhandenen Formatierungsanweisungen in .contenttoc eben die Eigenschaft display: none; hinzuzufügen. Damit wird erreicht, dass das Inhaltsverzeichnis ersteinmal in gar keinem Beitrag angezeigt wird.

Jetzt der zweite Teil des Tricks: Ich definiere eine weitere Klasse in Verbindung mit contenttoc. Die Schreibweise in der CSS-Datei wäre etwa

.showtoc .contenttoc {display: table;}

Ich habe nun eine Klasse, die ich bei den entsprechenden Artikeln, die ich mit Inhaltsverzeichnis ausstatten möchte, aufrufen muß. Das geschieht allerdings nicht beim Beitrag selbst. Aber wenn ich einen Menüeintrag erstelle (in meinem Fall vom Typ "Layout: Beitrag (Joomla! Standard)"), finde ich unter Systemparamter das Feld "class-Zusatz der Seite". Hierhinein gehört "showtoc".

Achtung! Ganz wichtig ist, vor "showtoc" ein Leerzeichen zu schreiben. Das, was unter "class-Zusatz der Seite" angegeben ist, wird an jede CSS-Klasse der Seite angehängt. Ohne Leerzeichen verändert man diese Klassen so, dass sie vom Template nicht wiedererkannt werden, z. B. wird aus "contentheading" ein "contentheadingshowtoc". Das Template erkennt diese neue Klasse nicht, daher ist auch erstmal alle Formatierung futsch.

Benutzt man aber ein Leerzeichen, so wird daraus "contentheading showtoc“. Diese Kombination ist wiederum gültig, weil das Template die Klasse "contentheading" immer noch erkennt. Die Klasse "showtoc" wird getrennt davon gesehen und falls in der CSS-Datei diese Klasse definiert wurde, wird sie auch angewandt.

Dieser Effekt hilft uns nun beim Inhaltsverzeichnis. Durch den oben beschriebenen Trick wird aus "contenttoc" "contenttoc showtoc". Es werden also die Formatierungen aus beiden Klassen auf das Inhaltsverzeichnis angewandt. Das "display: table;" aus "showtoc" führt dazu, dass der Inhalt angezeigt wird.

Fazit

Ich hätte nicht damit gerechnet, dass diese Extension doch so viel Fummelarbeit nach sich zieht. Aber letztendlich stellt "Article Table of Contents“ eine einfache Tabelle mit einem Inhaltsverzeichnis zur Verfügung, das man mit etwas Aufwand eben genauso gestalten kann, wie man möchte. Und wenn man erstmal raus hat, wie man die größten Klippen umschiffen kann, ist es auch plötzlich ganz leicht. Ich hoffe, ich konnte dazu etwas beitragen.

• 16. Mai 2010 um 13:22:56 | Tom  - Verbesserte Version

  Hallo,

  ich verwende dieses Plugin auch auf meiner Seite und bin dabei auch auf ein paar, der von dir aufgezeigten Probleme gestoßen. Aus dem Grund hab ich eine verbesserte Version des Plugins geschrieben und veröffentlicht: http://extensions.joomla.org/extensions/news-display/article s-toc/11573
  Dabei wird die Überschrift jetzt zum Beispiel aus einer Sprachdatei geladen und muss daher nicht mehr im Quelltext direkt geändert werden. Eine deutsche und eine englische Sprachdatei sind dabei, weitere können einfach kopiert und bearbeitet werden.
  Auch die Darstellung und die Einstellungsmöglichkeiten habe ich etwas geändert. Am Besten du schaust es dir einfach einmal an

  • 2
  • 0

  AntwortenZitat