Inhaltsverzeichnis Element (bit3/contao-toc-element): Unterschied zwischen den Versionen

Aus Contao Community Documentation

(Beschreibung)
(Anleitung)
Zeile 53: Zeile 53:
  
 
<source lang="css">
 
<source lang="css">
 +
// toc-element.scss
 
.ce_table-of-contents {
 
.ce_table-of-contents {
 
li {
 
li {

Version vom 9. Juni 2014, 10:41 Uhr


Inhaltsverzeichnis über die Inhalte einer oder mehrerer Artikel.


Hinweis.png Hinweis: Diese Erweiterung ist der offizielle Nachfolger von der ce_navigation Erweiterung.


Erweiterungs-Übersicht
Name des Entwicklers Tristan Lins
Entwickler Webseite http://bit3.de
Link zum Extension Repository https://packagist.org/packages/bit3/contao-toc-element
Link zum Tracker https://github.com/bit3/contao-toc-element


Beschreibung

Inhaltsverzeichnisse sind bei längeren Texten oft vorteilhaft. Wikipedia setzt diese bspw. sehr häufig ein.

Wikipedia Beispiel

Dieses Element erzeugt ebenfalls ein Inhaltsverzeichnis, basierend auf den Inhaltselementen und Artikeln.

Anleitung

Das Inhaltsverzeichnis wird auf Basis der Inhaltselemente erzeugt, die sowohl eine Überschrift, als auch eine CSS-ID besitzen.

Element bearbeiten Überschrift und CSS-ID vergeben

Hat man allen Elementen die im Inhaltsverzeichnis aufgelistet werden sollen eine Überschrift und CSS-ID vergeben, kann man jetzt das Inhaltsverzeichnis anlegen.

Element hinzufügen Element-Typ auswählen Element konfigurieren Frontend Vorschau

Es wird sofort aus den Inhaltselementen ein Inhaltsverzeichnis erzeugt. Dabei ist die hierarchische Struktur h1-h6 ausschlaggebend für die Verschachtelung.


Hinweis.png Hinweis: Eine unvollständige Hierarchie wird automatisch reduziert. Fehlt bspw. zwischen der h1 und h3 die h2 Ebene, wird die h3 Ebene "nach oben" geschoben.


Wenn gewünscht, können sogar die Artikel in die Struktur eingezogen werden.

Artikel einbeziehen

Außerdem kann bestimmt werden, bis zu welcher Ebene das Inhaltsverzeichnis überhaupt dargestellt werden soll. Dabei ist zu beachten dass die erzeugte Strukturtiefe und nicht die über h1-h6 definierte Strukturtiefe ausschlaggebend ist.

Außerdem gibt es Unterschiede im Verhalten zwischen Minimale Ebene und Maximale Ebene. Während die Begrenzung der Maximalen Ebene tatsächlich die Elemente abschnidet, wird bei Minimale Ebene lediglich die Verknüpfungen ausgeblendet, die Navigationsebene <ul> bleibt aber erhalten, was viel mehr Möglichkeiten für die Gestaltung lässt.

1. Ebene ausblenden

Mit nur wenig (S)CSS Code, lässt sich diese "leere" Ebene aber auch sehr einfach "ausblenden".

// toc-element.scss
.ce_table-of-contents {
	li {
		list-style-type: decimal;
 
		&.hide-link {
			list-style-type: none;
 
			> ul {
				padding-left: 0;
			}
		}
	}
}

Formatiert

Ansichten
Meine Werkzeuge

Contao Community Documentation

<Kellner> und einmal Filet?
<backbone87> Nein Olli, nicht Philip!

Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge