onepage website mit contao

[autocrash]

Hallo Leute,
ich arbeite seit Jahren mit einem eigenen CMS und möchte nun auf Contao umsteigen. Habe mir ein Buch zugelegt und bin grad schon eifrig am basteln. Funktioniert alles bestens bisher. Allerdings wird das Thema Onepage Website immer wichtiger und ich frage mich ob und wie es möglich ist, mit Contao eine Onepage Website zu erstellen. Ich habe schon im Netz geforscht aber nichts detailliertes in Foren dazu gefunden. Allerdings eine Onepage Website, die laut Header mit Contao betrieben wird: http://www.indoorgolf-chemnitz.de/
Kann mir jemand Hilfestellung geben wie ich hier rangehen muss?

[fiedsch]

Kann mir jemand Hilfestellung geben wie ich hier rangehen muss?

Read the Source Luke ;-)

Alle logischen Seiten sind hier ja wohl immer zusammen auf einer physikalischen Seite. D.h. Du legst je Seite einen Artikel (inkl. anchor für das Menü) an.

Zum Scrollen zwischen den Seiten wird wohl das jquery-Plugin LocalScroll verwendet.

Vielleicht kann man aber auch je logischer Seite eine eigene Seite anlegen und auf
einer zentralen Seite alle anderen "includen". Ob das aber übersichtlicher und besser zu pflegen ist ...?

Das Menü würde ich einfach von Hand schreiben und als Modul (eigener HTML) einbinden.

Andreas

[zwergschwein]

Zwischen der Erstellung einer Onepage und einer Website mit mehreren Seiten besteht ja aus technischer Sicht gesehen nicht viel Unterschied.

Wichtig ist es trotzdem einen neuen Startpunkt für eine Website zu erstellen und darunter dann deine Seite zu bauen. Die Navigation könntest du entweder als eigenes HTML-Modul einbauen und dann auf die unterschiedlichen Ankerpunkte verlinken, oder du erstellst dir für jeden Navigationspunkt eine eigene Seite in der Seitenstruktur und verlinkst dann die Ankerpunkte mittels Weiterleitung. Das würde dir oder dem späteren Redakteur den kleinen Codeaufwand sparen (sofern die Seite dann erweitert wird).

Die einzelnen Inhaltsblöcke kannst du gut mit Artikeln strukturieren, den Toplink liefert Contao auch schon mit. Wenn du das Impressum mit Lightbox so verlinken möchtest, wie auf deiner angegeben Seite. Das müsste die [lightbox4ward] sein ;-) Den Scrolleffekt mit dem fixiertem Footer bekommst du mit JavaScript hin.

Im Prinzip eigentlich eine Sache der Konzeption und ein wenig Können im Umgang mit HTML, CSS und JavaScript. Wo genau hakt es denn bei dir in Hinsicht einer Onepage mit Contao?

[manfred]

Ein weiters Beispiel gefällig?
http://www.objects.sh/index.html

Gru Manfred

[psren]

<script type="text/javascript">
<!--//--><![CDATA[//><!--
window.addEvent('domready',function() {
	new SmoothScroll({ 
	  duration:500,
	  wait: true,
	  wheelStops : true }, window);
});
//--><!]]>
</script>

Anchor-Links einbauen und das oben in das Seitenlayout packen (als moo_irgendwas Template).
Fertig!

[[-K-|-K-|-A-]]

Die Navigation könntest du entweder als eigenes HTML-Modul einbauen und dann auf die unterschiedlichen Ankerpunkte verlinken, oder du erstellst dir für jeden Navigationspunkt eine eigene Seite in der Seitenstruktur und verlinkst dann die Ankerpunkte mittels Weiterleitung. Das würde dir oder dem späteren Redakteur den kleinen Codeaufwand sparen (sofern die Seite dann erweitert wird).

Variante 1 wäre bei entsprechender Organistaion auch über eine Artikellliste realisierbar.
Spannender finde ich da aber deinen zweiten Vorschlag. Nur leider verstehe ich noch nicht so ganz. Hilfst du mir bitte auf die Sprünge?

[zwergschwein]

Hallo [-K-|-K-|-A-],

ist auch vielleicht etwas abstrakt gedacht, erspart aber jemanden vielleicht Unerfahrenen das drei Zeilen coden und ist auch Redakteuren unter Umständen lernbar:

Im TinyMCE einfach Anker erstellen und den Ankerlink dann in der Seitenstruktur als Weiterleitungslink eintragen. Navigationsmodul einfach wie bei einer normalen Seitenstruktur auch erstellen. Würde persönlich allerdings auch schnell das HTML für die Navi so schreiben.

[[-K-|-K-|-A-]]

Hallo [-K-|-K-|-A-],

ist auch vielleicht etwas abstrakt gedacht, erspart aber jemanden vielleicht Unerfahrenen das drei Zeilen coden und ist auch Redakteuren unter Umständen lernbar:

Im TinyMCE einfach Anker erstellen und den Ankerlink dann in der Seitenstruktur als Weiterleitungslink eintragen. Navigationsmodul einfach wie bei einer normalen Seitenstruktur auch erstellen. Würde persönlich allerdings auch schnell das HTML für die Navi so schreiben.

Bitte hab’ Geduld mit mir (ich dachte bisher, ich hätte contao im Griff) ;-)
Folgen kann ich prinzipiell bei Navigationsmodul und Seitenstruktur. Die Seiten sind allerdings "nur" Weiterleitungen auf Artikel (Anker), die auf der "Onepage" platziert wurden, richtig?
Das wäre tatsächlich irgendwie charmant, aber wie erstelle ich eine Seiten-Weiterleitung auf einen Anker (eine id) und was hat das mit dem TinyMCE zu tun?

[MiTsch]

@Manfred:

Ein weiters Beispiel gefällig?
http://www.objects.sh/index.html

Gru Manfred

Sehr schicke Seite !
Wie hast Du es umgesetzt?

Viele Grüße
MiTsch

[autocrash]

hallo,

vielen dank für eure antworten.

Wo genau hakt es denn bei dir in Hinsicht einer Onepage mit Contao?

es hakt glaub eher noch in meinem kopf. da ich im backend ja viele verschiedene seiten anlege und nicht den ganzen inhalt in einer einzelnen seite einfüge. im frontend soll aber nur eine seite dargestellt, alle anderen vorhandenen seiten im hintergrund schon vorgeladen werden - um sie durchzuscrollen. das bereitet mir noch ein wenig kopfzerbrechen.

[manfred]

@Mitsch
Die Seite ist ja nicht von mir, bitte FooterText beachten......

Gruß Manfred

[zwergschwein]

Hallo autocrash,

es genügt, wenn du eine normale Seite erstellst und auf dieser Seite verschiedene Artikel nacheinander einfügst.


@[-K-|-K-|-A-]
Jeder Anker hat einen eigenen Link; und dann externe Weiterleitung beim Seitentyp in der Seitenstruktur... ;-)

[[-K-|-K-|-A-]]

@[-K-|-K-|-A-]
Jeder Anker hat einen eigenen Link; und dann externe Weiterleitung beim Seitentyp in der Seitenstruktur... ;-)

Doch so simpel ;-) Merci. Aber irgendwie verstehe ich dann doch den ganzen Aufwand nicht.
"Meine" Variante: eine Seite mit Artikeln und statt Navigation eben die Artikelliste (als Modul) nutzen. Per Javascript dann den Scroller (z.B. wie oben angegeben) ergänzen. Zusätzlich bei Bedarf noch etwas Javascript um die "dumme" Artikelliste mit Funktionen wie Hervorhebung des aktiven Links anzureichern.

[zwergschwein]

Stimmt, die Artikelliste wäre auch noch eine simple Option. Noch nie mit gearbeitet, deshalb kam mir die gar nicht in den Sinn

[[-K-|-K-|-A-]]

Stimmt, die Artikelliste wäre auch noch eine simple Option. Noch nie mit gearbeitet, deshalb kam mir die gar nicht in den Sinn

Angesprochen hatte ich sie aber bereits gestern/oben

Es fehlt halt noch etwas JS-"Intelligenz", um (Komfort)funktionen (wie dem aktiven Navigationspunkt eine Klasse "active" zuzuweisen und den Link zu deaktivieren) zu realisieren. Hat das schon mal jemand umgesetzt? Das sollte im Idealfall dann auch beim externen Aufruf eines Ankerlinks funktionieren.

[autocrash]

Hallo autocrash,

es genügt, wenn du eine normale Seite erstellst und auf dieser Seite verschiedene Artikel nacheinander einfügst.


@[-K-|-K-|-A-]
Jeder Anker hat einen eigenen Link; und dann externe Weiterleitung beim Seitentyp in der Seitenstruktur... ;-)

...ok, also bereits die Seiten im Backend nur als eine Seite anlegen. Kann ich gut nachvollziehen, finde es allerdings für den Redakteur später etwas umständlich. Macht ihr das alle so oder ist die Methode, in einem späteren Schritt alle Seiten in einer Seite zusammenzuführen auch verbreitet (mal abgesehen vom Technischen Background, der hier wohl etwas schwieriger zu Betrachten ist).

[RainerG]

Eine sehr schöne ist mir gerade über den Weg gelaufen:
http://www.razvangarofeanu.com/

[m.koell]

Warum so kompliziert? Einfach eine einzelne Seite anlegen und mittels mehreren Artikeln arbeiten. Für das Menü wäre das Modul Artikelnavigation genau das richtige!

[RainerG]

Es geht ja nicht um das komplizierte oder unkomplizierte.
Das ist eine etwas andere Art, eine Webseite zu gestalten und recht interessant.

[sfx]

hallo,

mich würde das auch sehr interressieren, ist den schon jemand weitergekommen damit ?

[sfx]

hat sich erledigt... mit dem von "psren" geposteten code.. ging es recht einfach... aber eine frage hätte ich.. kann man den coder erweitern um z.b transision effect "cubic" sine in/out usw. oder inkl. fade.. so wie beim CE slider ? weil irgendwie "läuft" es nich so flüssig & "geschmeidig" als z.b der Ce_slider !!

[1stof8]

Ich habe für meine onepage Seite auch das script von prsen verwendet.

Das funktioniert auch alles soweit gut.
Ich habe nur ein Problem und das ist, dass das script scheinbar erst beim 2. Mal klicken geladen wird.
Die Seite ist aktuell unter cms.vitaler-ruecken.de aufzurufen.

Wenn ich einen Link im Menü zum ersten mal klicke springt die Seite ganz nach oben, d.h. der Offset im Script und das Scroll
wird nicht ausgeführt.

Ab dem 2. Klick scrollt die Seite wunderbar.

Ich hatte schon mit prsen darüber kommuniziert, er kann den Fehler allerdings nicht nachvollziehen.
Ich verwende Firefox, Safari oder chrome unter OSX. Überall tritt der gleiche Fehler auf.

Ich wäre sehr dankbar wenn ich da nen Tipp hätte.

Gruss Joachim

[psren]

Mhh reproduzieren kann ich das jetzt mit Link.
Es läd ja auch die Seite komplett neu wenn man das erste mal auf einen Link klickt.

[1stof8]

es muss irgendwie daran liegen, dass der startpunkt der Webseite die url - cms.vitaler-ruecken.de ausspuckt
und beim ersten mal laden die Hauptseite cms.vitaler-ruecken.de/behandlungsspektrum.htm#irgendwas ausgibt.
Aber ich kann ja im Startpunkt der Webseite nicht die ziel url eingeben oder?

[1stof8]

Wenn ich unterhalb des Startpunktes eine weiterleitungsseite intern auf die Unterseite Behandlungsspektrum einbaue dann funktioniert das ganze.

Kann das der Weisheit letzter schluß sein?...

[Shade]

Interessant, wollte heute auch mit einer onepage website anfangen. Allerdings in jQuery und mit horizontalem slide-effect. : )

[tblumrich]

Wenn ich unterhalb des Startpunktes eine weiterleitungsseite intern auf die Unterseite Behandlungsspektrum einbaue dann funktioniert das ganze.

Kann das der Weisheit letzter schluß sein?...

Hmm.
Ich hab hier auch mal ein Onepage-Design probiert. Den Code von psren kannte ich nicht, aber es funktioniert ohne irgendwelche Weiterleitungen. Poste doch mal Screens deiner Einstellungen und/oder der Seitenstruktur.
Ich hab als zusätzlichen Code einfach nur

<script type="text/javascript">
<!--//--><![CDATA[//><!--
new Fx.SmoothScroll({
  duration: 1500
}, window);
//--><!]]>
</script>

gesetzt.
Hab ich sicher nur irgendwo ergooggelt... Funktioniert aber auf jeden Fall bei mir.

btw... bei deiner Seite kommt hier immer so ein kurzer "Blitzer", wenn fertig gescrollt wurde (aktueller FF unter Win7).

Gruß
Thomas

[1stof8]

Ich habe für die Navigation das Modul ce_navigation benutzt.

Die Links in der Naiv sind in einer Liste und die links sind dann immer nach dem Schema seitenname.html#ankername.

Bei deiner Seite wird direkt hinter die url der Anker gehängt. Daher muss die Seite auch nicht neu geladen werden.
/www.urlaub-in-conow.de/#wohnung

bei mir immer www.domain.de/seitenname.html#anker

Nachdem das Konstrukt wie die Links generiert werden nicht im Modul beeinflusst werden können
weis ich ehrlich gesagt nicht wie ich das Problem umgehen kann.

Hast du das Modul Artikelnavigation genommen?

Der Blitzer kommt bei mir natürlich auch, weil da ja die Seite weitergeleitet/neu geladen wird.

[tblumrich]

Hi.

Jetzt musste ich echt überlegen, wie ich das gemacht hatte... klar war, es durfte nur eine Seite bestehen... logisch ONE-Page. Und auf dieser Seite fungieren die Artikel quasi als Inhaltsseiten, durch die navigiert werden muss. An die Artikelnavigation hatte ich auch gedacht... letztendlich wirds auf der Seite aber keine große Dynamik mit veränderlichen Strukturen oder einen redaktionellen Part geben. Da hab ich mich einfach für eine manuell erstellte Navigation (Textelement -> Liste) entschieden und entsprechend auf die IDs der Artikel bzw. die ID des jeweils ersten Inhaltselements (die hab ich natürlich jeweils manuell vergeben) per Anker verlinkt. Diese hab ich als Modul oben eingebunden.

Das wars eigentlich.

Gruß
Thomas

[wiese]

Hat jemand eine Idee, wie ich das mit dem normalen Seitenlayout umsetzen kann? Im ersten Beispiel sind alle "Seiten" in einem Seitenlayout, mit mehreren Artikeln.

Könnte man nicht die fe_page so anpassen, dass sich die Seiten verhalten wie Artikel?

[MacKP]

Könnte man nicht die fe_page so anpassen, dass sich die Seiten verhalten wie Artikel?

Hallo wiese,
ne, das geht so nicht. Du hast auf einer Seite eben immer nur die Informationen zur Verfügung von einer Seite.
D.h. du musst nur alle Artikel in eine Seite schmeißen.

Viele Grüße

[wiese]

Ja, hm. Ich dachte ich könnte irgendeine "Schleife" bauen, die immer alles ausgibt. Dann eben per Artikel

[andreasisaak]

ne das ist doof. wir bauen derzeit an einer lösung um auch weiterhin seiten behalten zu können, sonst geht die flexibilität flöten

[wiese]

ne das ist doof. wir bauen derzeit an einer lösung um auch weiterhin seiten behalten zu können, sonst geht die flexibilität flöten

Kann man das nicht per Seitenlayout / anderes fe_page Template lösen?

[andreasisaak]

Nein, nicht wenn es dynamisch sein soll. Ich persönlich möchte meine fe_page nicht mit irgendwelchen Inserttags vollklatschen. Die Redakteure sollen die Website pflegen wie sie es gewohnt sind.

[haluli]

Ich fände es auch wichtig verschiedene URLs für die einzelnen Abschnitte zu vergeben (zwecks Weiterempfehlung). Schon aus diesem Grund wäre eine Seiten-basierende Onepager Lösung super.

[psren]

Ich fände es auch wichtig verschiedene URLs für die einzelnen Abschnitte zu vergeben (zwecks Weiterempfehlung). Schon aus diesem Grund wäre eine Seiten-basierende Onepager Lösung super.

Man kann doch auch Ankerlinks weitergeben?
Mit der History-API sollte das kein Problem sein. Ich habe vor das mal nochh hier einzubauen.

Aber eine one-Page-Navigation aus Artikeln ist das hier schonmal.
Man kann auch einzelne Artikel aus der Navigation ausschließen.

https://github.com/psren/contao-magicArticleList

[olivgruen]

Hallo zusammen,

ich habe zum OnePage-Design noch eine Frage. Habe das jetzt erstmalig ausprobiert und über eine einzelne Seite mit mehreren Artikel und der Artikelnavugation probiert. Scrollen klappt auch wunderbar. Ich habe mein Topmenü fix verankert und für jeden Artikel ein Top-Margin angegeben. Klappt auch - nur nicht beim Aufruf der Seite, also wenn noch kein Artikel angeklickt wurde. Da habe ich dann mein Topmenü, dann kommt jede Menge Platz vom Artikelmargin und dann erst die Überschrift. Wie kann ich das lösen? Bin leider nicht ganz sattelfest in CSS

Schönen Abend noch!

[Tashera]

Hallo zusammen,
für's Verständnis: Ich lege meine Seite so an, als würde ich eine einfache Website erstellen.
Sprich: in der Seitenstruktur lege ich alle Seiten an, um diese in der Navigation aufzulisten, richtig?

Allerdings füge ich die Artikel nur nacheinander innerhalb des Startpunkts der Website ein und arbeite dann mit den Ankern!?

Falls soweit richtig: wie verankere ich denn die Seiten?

Liebe Grüße!

[BugBuster]

Ich hätte jetzt gedacht:
- Startpunkt einer Webseite
-- Seite
--- Artikel
--- Artikel
--- Artikel
--- Artikel


Über Artikelnavigation dann zwischen diesen hin und her gleiten.

Die normale Navigation die alle Seitennamen auflistet, die ruft ja dan auch jeweils die Seite auf.