Single Page App / OnePager

Das 'One-Page' Layout wird bei Webdesignern immer beliebter und ist besonders für kleinere Webseiten und die Ansicht auf Smartfons gut geeignet. Typischerweise werden in den einzelnen Abschnitten Anker Tags gesetzt, die als Sprungmarke für die Navigation dienen. Mit diesem Override geht das automatisch!

Inhalte

Bei Joomla bietet der Kategorie Blog oder Hauptkategorie Blog einen guten Einstieg. Beiträge einer Kategorie (oder die Hauptbeiträge) werden übersichtlich auf einer Seite dargestellt. Bei Bedarf kann durch den 'Weiterlesen Button' (readmore) die Anzeige auf den Einleitungs Text ggfs. mit Einleitungs Bild beschränkt werden. Für die Sortierung stehen alle Joomla Optionen - manuelle, zeitliche, alphabetische Reihenfolge zur Verfügung.

Navigation

Es gibt bei Joomla die Möglichkeit im Menu Einträge vom Typ 'Externer Link' zu nutzen und hier den Anker manuell zu setzen. Dieser Menueintrag funktioniert dann allerdings nur auf der Blogseite! Für den Redakteur ist es auch nicht besonders intuitiv, Anker und Menu Einträge manuell zu erzeugen! 

Einfacher ist es, wie gewohnt Menu Einträge vom Typ 'Einzelner Beitrag' zu verwenden. Das funktioniert mit diesem Override! Dem Anker wird hier noch die Blogseite vorangestellt:

Die resultierende Menustruktur ist übersichtlich:

  1. Menu Eintrag 1 Typ = Kategorie Blog / Hauptbeiträge Blog
    1. Menu Eintrag 2 Typ = einzelner Beitrag
    2. Menu Eintrag 3 Typ = einzelner Beitrag
    3. Menu Eintrag 4 Typ = einzelner Beitrag
    4. Menu Eintrag 5 Typ = einzelner Beitrag
    5. Menu Eintrag 6 Typ = einzelner Beitrag 

 

Das Anker Menu modifiziert die Ausgabe des Links in dieser Form:

aus der Standard URL wird /name-des-menueintrags-kategorieblog#anchor-id

Damit der Browser schön smooth zum Anker scrollt, wird hier ein JQuery Script eingefügt:

Da der Anker nicht sichtbar ist, kann dieser generell in alle Kategorie Blog Einträge eingefügt werden. Ansonsten ist es natürlich möglich hier einen neuen Menü Eintragstyp zu generieren. 

Accordion im Einleitungs Text

Menu Kategorie Blog Override

in Erweiterungen > Templates wird mit Klick auf das aktive Template (nicht Stil) der Template Editor geöffnet. Der Tab 'Overrides erstellen' öffnet die möglichen Overrides. Hier in Komponenten die com_content > category wählen.
Jetzt ist im Editor Tab unter HTML > com_content > category ein neuer Override sichtbar. Ist es der erste Erstellte heißt er blog.php plus weitere Dateien blog* und*. Ist bereits ein default override vorhanden ist der Name eine Kombi aus blog + Datum + eindeutige Nummer. Diese neuen Dateien anklicken und dann den Button 'Datei umbenennen' klicken. Hier den gewünschten Layout Namen wählen. Bsp.: accordion und accordion_items.
Im Menu ist der Override jetzt als alternativer Eintragstyp verfügbar!

Änderung ing blog_item.php 

ca. Zeile 52 ->

<div class="panel-group">
<?php echo $this->item->introtext; ?>
</div>

 template.js

Das JQuery Script nicht direkt in die blog-item.php einbinden! Da die Blogseite zahlreiche items haben kann, würde das Script ebenso oft geladen werden.

Entweder direkt in die blog.php einbinden oder von dort als eigenständige Datei aufrufen:
blog.php als letze Zeile einfügen -> 

<script src="/templates/XXX-dein-Template-XXX/js/blog_accordion.js" type="text/javascript"></script>

blog_accordion.js:

(function($) {
$(window).load(function(){
$('.panel-group').each(function(){
if ( $('.accordion-end').length == 0){
$(this).find('h4').each(function(index, element){
$(this).addClass('closed').nextUntil('h4').wrapAll('<div id="collapse'+index+'" class="panel-collapse"></div>');
});
}
else{
$(this).find('h4:not(:last-of-type)').each(function(index, element){
$(this).addClass('closed').nextUntil('h4').wrapAll('<div id="collapse'+index+'" class="panel-collapse"></div>');
});
$(this).find('h4:last-of-type').addClass('closed').nextUntil('.accordion-end').wrapAll('<div class="panel-collapse"></div>');
}
});
$('.panel-group h4').click(function(){
if($(this).hasClass('closed')){
$('.opened').addClass('closed').removeClass('opened').next('.panel-collapse').slideToggle('slow', function(){});
$(this).addClass('opened').removeClass('closed').next('.panel-collapse').slideToggle('slow', function(){});
}
else{
$(this).addClass('closed').removeClass('opened').next('.panel-collapse').slideToggle('slow', function(){});
}
})
})
})(jQuery)

Donec rhoncus arcu et erat consequat, in rhoncus velit ultrices. Quisque non ex ullamcorper, aliquam justo sed, pellentesque mi. Fusce et dui eget urna tincidunt eleifend. Curabitur tempus neque vitae ultrices commodo.

Nam consequat luctus cursus. Mauris risus leo, pulvinar ut nibh eu, consectetur porttitor ligula. Donec quis mi convallis, maximus metus vel, rutrum justo. Integer sed sem a nulla eleifend dictum. Integer dolor neque, tristique sed leo eget, posuere faucibus eros. Ut lacus erat, pharetra ac porttitor ut, interdum a eros. Aenean lobortis, augue vel porta auctor, mauris justo sagittis dui, vel ultrices elit orci non nunc. Maecenas porta purus nec quam viverra, sed consequat est mattis. Nam sodales pharetra dui, quis vestibulum quam fermentum in.

Morbi sit amet neque in quam consequat cursus eget ac sapien. Cras quis auctor nibh. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi rhoncus nec sem vitae iaculis. Sed eleifend sit amet leo ac tincidunt.


Morbi suscipit eros at aliquet lobortis. Praesent tellus dolor, porta in massa sit amet, semper porttitor justo. Pellentesque gravida lorem id turpis luctus suscipit. Cras congue ipsum urna, scelerisque efficitur mi convallis nec. Curabitur in nulla eget ipsum vulputate facilisis. Sed ut neque arcu. Sed a mauris vel nunc iaculis bibendum. Fusce id sagittis lacus, vitae bibendum sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Head 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum sem neque, quis rhoncus urna dapibus in. Sed faucibus nisl quam, ac aliquam nulla malesuada sollicitudin.

Head 2

app globe 64Donec rhoncus arcu et erat consequat, in rhoncus velit ultrices. Quisque non ex ullamcorper, aliquam justo sed, pellentesque mi. Fusce et dui eget urna tincidunt eleifend. Curabitur tempus neque vitae ultrices commodo.
Praesent accumsan facilisis ipsum, eget suscipit metus lobortis eget. Ut ac pellentesque magna. Donec eu elementum nibh, nec scelerisque sapien. Nunc at dolor maximus, fringilla dolor eu, bibendum elit. Maecenas feugiat aliquam nisi. Morbi faucibus turpis at egestas pellentesque. Aenean tincidunt mi non erat accumsan, at volutpat orci laoreet. Suspendisse lacinia scelerisque bibendum. Etiam eleifend mattis elit, efficitur fermentum nisl feugiat sit amet. Suspendisse eu venenatis libero, nec dictum lorem.

Head 3

thumb bundestag 5011Praesent accumsan facilisis ipsum, eget suscipit metus lobortis eget. Ut ac pellentesque magna. Donec eu elementum nibh, nec scelerisque sapien. Nunc at dolor maximus, fringilla dolor eu, bibendum elit. Maecenas feugiat aliquam nisi. Morbi faucibus turpis at egestas pellentesque. Aenean tincidunt mi non erat accumsan, at volutpat orci laoreet. Suspendisse lacinia scelerisque bibendum. Etiam eleifend mattis elit, efficitur fermentum nisl feugiat sit amet. Suspendisse eu venenatis libero, nec dictum lorem.

Praesent accumsan facilisis ipsum, eget suscipit metus lobortis eget. Ut ac pellentesque magna. Donec eu elementum nibh, nec scelerisque sapien. Nunc at dolor maximus, fringilla dolor eu, bibendum elit. Maecenas feugiat aliquam nisi. Morbi faucibus turpis at egestas pellentesque. Aenean tincidunt mi non erat accumsan, at volutpat orci laoreet. Suspendisse lacinia scelerisque bibendum. Etiam eleifend mattis elit, efficitur fermentum nisl feugiat sit amet. Suspendisse eu venenatis libero, nec dictum lorem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum sem neque, quis rhoncus urna dapibus in. Sed faucibus nisl quam, ac aliquam nulla malesuada sollicitudin.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum sem neque, quis rhoncus urna dapibus in. Sed faucibus nisl quam, ac aliquam nulla malesuada sollicitudin.

Go To Top