Integration von SlickMap CSS in Contao

Ich hatte ja schon vor längerer Zeit über das Projekt „Slickmap CSS“ als schicke Möglichkeit, eine Seitenstruktur darzustellen, geschrieben und angekündigt, dies in einem weiteren Artikel zu beschreiben. Nun, here we go 😉

Ich habe es so gelöst, dass ich einfach ein Modul mit eigenem HTML-Code erstellt habe. Dabei habe ich folgende Code-Struktur verwendet:

 

<!-- indexer::stopp -->
<div>
<h1>Titel der Netzseite</h1>
<h2>Seitenstruktur</h2>
<ul id="utilityNav">
  <li><a href="http://sub1.domain.de" title="Seite1">{{link_title::4}}</a></li>
  <li><a href="http://sub2.domain.de" title="Seite2">{{link_title::6}}</a></li>
</ul>
<ul id="primaryNav">
  <li id="home"><a href="http://www.domain.de">Startseite</a></li>
  <li>{{link_open::19}}{{link_title::19}}</a>
    <ul>
      <li>{{link_open::24}}{{link_title::24}}</a></li>
    </ul>
  </li>
  <li><a href="http://sub3.domain.de" title="Seite3">Seitentitel</a>
    <ul>
      <li><a href="http://sub3.domain.de/Unterseite1/" title="Titel">Titel</a></li>
      <li><a href="http://sub3.domain.de/Unterseite2/" title="Titel">Titel</a></li>
      <li><a href="http://sub3.domain.de/Unterseite3/" title="Titel">Titel</a></li>
        <ul>
          <li><a href="http://sub3.domain.de/Unterunterseite1/" title="Titel">Titel</a></li>
          <li><a href="http://sub3.domain.de/Unterunterseite2/" title="Titel">Titel</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li>{{link_open::26}}{{link_title::26}}</a>
    <ul>
      <li>{{link_open::28}}{{link_title::28}}</a>
        <ul>
          <li>{{link_open::45}}{{link_title::45}}</a></li>
          <li>{{link_open::46}}{{link_title::46}}</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
</div>
<!-- indexer::continue -->

 

Wie man sieht, sind die Listen so ineinander verschachtelt und mit IDs versehen, wie in der Anleitung zur Slickmap angegeben. Die Kommentare <!– indexer::stopp –>  und <!– indexer::continue –>  sorgen dafür, dass der Inhalt dazwischen nicht für die seiteninterne Suche indiziert wird und somit in den Suchergebnissen auftaucht. Wer das möchte, lässt sie einfach weg.

Für die automatische Übernahme des Seitentitels und der URL aus den Contao-Angaben habe ich die Contao-Tags {{link_open}}  und {{link_title}}  verwendet. So muss man, falls sich die URL oder der Titel ändert, dies nicht noch zusätzlich in der Seitenstruktur per Hand umschreiben. Man muss aber dies nicht verwenden, wenn man z.B. auf eine Subdomain verweisen will. Dann kann man, wie  man im Beispiel sieht, auch die „normale“ Referenz verwenden.

Das Stylesheet kann man entweder als externe Datei im Header einbinden oder in dem Contao-internen CSS-Editor importieren, wie es einem beliebt.

In einem letzten Schritt braucht man dann das Modul nur noch in einen Artikel einbauen und schon wird die Seitenstruktur mit Slickmap CSS dargestellt. Natürlich sollte man für die Seite mit der Seitenstruktur ein eigenes Layout anlegen, wo die CSS-Datei eingebunden ist.

Integration von SlickMap CSS in Contao

Ein Gedanke zu „Integration von SlickMap CSS in Contao

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert