Home | Sitemap | Glossar | Impressum

HTML-Sitemap erstellen

Es gibt viele TYPO3-Extensions für die Darstellung einer HTML-Sitemap im eigenen Internetauftritt, u.a. dropdown_sitemap. Die Konfiguration ist in den meisten Extensions sehr schnell und einfach. Nichtsdestotrotz verfügt TYPO3 von Haus aus über Möglichkeiten zur Darstellung einer Sitemap.

Zunächst sollte auf einer Seite ein neues Inhaltselement vom Typ “Menu/Sitemap” angelegt werden. Wähle anschließend unter “Menu and Sitemap” den gewünschten “Menu Type” aus. Es stehen folgende Möglichkeiten zur Verfügung:

  • Menu of selected pages
  • Menu of subpages of selected pages
  • Menu of subpages of selected pages including abstracts
  • Menu of subpages of selected pages including sections
  • Sitemap
  • Section index (page content marked for section menus)
  • Recently updated pagesRelated pages (based on keywords)

Wir wählen “Sitemap” aus, die die komplette Baumstruktur wieder geben soll. An dieser Stelle sind keine weiteren Einstellungen am Inhaltselement nötig.

Wird die Seite mit der Sitemap im Frontend aufgerufen, so wird nichts oder nur die Überschrift des Inhaltselementes angezeigt. Es fehlt noch die Konfiguration im tt_content-Objekt.

Unter tt_content.menu.20 befinden sich alle Menüs als HMENU-Objekte. Für die Anpassung der “Sitemap” ist das “2″-Objekt interessant. Füge folgenden TypoScript-Code ein: 

tt_content.menu.20.2 {
    special = directory
    special.value = kommaseparierte Liste von PIDs
    
    1 {
        NO.ATagTitle.field = nav_title // title
        NO.wrapItemAndSub = <li class="csc-sitemap-link"><span class="arrow-icon-20"></span>|</li>
        
        IFSUB < .NO
        IFSUB = 1
        IFSUB.wrapItemAndSub = <li class="csc-sitemap-parent"><span class="arrow-icon-20"></span>|</li>
    }
    
    2 < .1
    3 < .1
    4 < .1
    5 < .1
    6 < .1
    7 < .1
    
    1.wrap = <ul class="csc-sitemap-level1">|</ul>
    2.wrap = <ul class="csc-sitemap-level2">|</ul>
    3.wrap = <ul class="csc-sitemap-level3">|</ul>
    4.wrap = <ul class="csc-sitemap-level4">|</ul>
    5.wrap = <ul class="csc-sitemap-level5">|</ul>
    6.wrap = <ul class="csc-sitemap-level6">|</ul>
    7.wrap = <ul class="csc-sitemap-level7">|</ul>
}

Die PID’s unter special.value sind die Seiten aus dem Seitenbaum, aus denen die Sitemap bestehen soll. Die Reihenfolge der PID’s bestimmen auch die Reihenfolge der Seiten innerhalb der Sitemap. Die zusätzlichen SPAN-Tags in den Wraps dienen zur Darstellung der Sprite-Icons für die verschiedenen Zustände eines Links innerhalb der Sitemap. Die Einstellung vom NOrmal-Zustand wird als Kopie auch für den IFSUB-Zustand übernommen und der Wrap angepasst. Diese Änderungen werden für alle weiteren Ebenen (2-7) als TMENU übernommen. Zu guter Letzt wird der Wrap für die einzelnen TMENU’s angepasst.

Um die Sitemap bei einer Vielzahl an Seiten begrenzen zu können, sollte eine Slide-Funktion per JavaScript hinzugefügt werden. Das Klick-Event wird auf dem SPAN-Tag mit den Sprite-Icons gelegt. Das Ganze könnte mit jQuery so aussehen:

$('.csc-sitemap LI.csc-sitemap-parent').each(function(){
    var $item = $(this);
    $item.children('SPAN').addClass('open');
            
    $item.children('SPAN').click(function(){
        $item_click = $(this);
        $item_click.nextAll('UL').slideToggle(400, function(){
            if($(this).is(':hidden')) {
                $item_click.removeClass('open');
            } else {
                $item_click.addClass('open');
            }
        });
    });
});

Jedes LI-Element das Unterseiten besitzt wird herangezogen. Anschließend wird jedem SPAN-Tag mit dem Sprite-Icon eine “open”-Klasse hinzugefügt, weil zunächst alle Seiten innerhalb der Sitemap sichtbar sein sollen. Bei vielen Seiten könnte man hier noch eine Einschränkung einfügen.

Das SPAN-Tag erhält das Klick-Event und in diesem Event werden die Unterseiten ein- und ausgeblendet. Dabei wird dem SPAN-Tag die Klasse “open” entzogen oder hinzugefügt.

Schnellkontakt

Dennis Oezet
WebEntwicklung & Design
Tel: 0160 / 933 679 69
info(at)doemedia(dot)de



Sofortanfrage

Ich interessiere mich für







Meine Kontaktdaten