Offizieller CoreNeo Weblog

Es ist soweit, mit CoreMarkup lässt sich jetzt jedes Element auf der Seite beeinflussen, auch Seiten-Elemente die nicht im Contentarea Array gespeichert werden.

Ändern des Seiten Einleitungs Titel und des Einleitungs Textes funktioniert wie folgt:

[[ core.system: set, introtitle, Mein neuer Einleitungs Titel ]]

[[ core.system: set, introtext, Mein neuer Einleitungs Text ]]

Somit kann jetzt auch Markdown und HTML in der Seiten Einleitung verwendet werden. Man sollte dabei einfach beachten, dass die Einleitung schon durch das Design speziell formatiert wird und daher nicht alles was möglich ist auch Sinn macht.

Auch kann man jetzt Farb-Kombinationen für das Design wählen, die nicht durch das Design bereitgestellt werden, was wie folgt funktioniert:

[[ core.system: set, templatecolors, #ff0000|#222222 ]]

Je nach Design variert die Anzahl der Farben die angegeben werden müssen.

Auch kann zusätzlich zu den Muster Variationen die durch das Design vorgegeben werden, auch ein eigenes Muster verwendet werden. Das Muster muss zuvor in die Bilder Datei-Verwaltung hochgeladen werden. Ein Beispiel:

[[ core.system: set, templatepattern, meinmuster.gif ]]

Die zwei Template CoreMarkups werden am besten in einem CoreScript verwendet.

Daten können nicht nur in einer Variablen gespeichert werden, sondern auch in einem Daten-Objekt. Vorteil ist hier, dass man die Daten sowohl sortieren wie auch in einer Tabelle anzeigen kann. Hier eine Beispiel Tabelle:

Personen Nach Alter sortiert
Name	Vorname	Alter	Photo Clicken zum vergrössern
Meier	Lucy	23
Muster	Tanja	34
Beispiel	Vreni	45

Als erstes müssen wir das Daten-Objekt initialisieren. Der erste Wert nach "init" ist der Objekt-Name, danach kommen die einzelnen Variablen, jeweils bestehend aus einer ID und einem Titel:

[[ core.data: init, mydata, name: Name, prename: Vorname, age: Alter, mugshot: Photo ]]

Zusätzlich können wir jetzt noch optional das ganze Daten-Objekt betiteln und beschreiben:

[[ core.data: title, mydata, Personen ]]

[[ core.data: describe, mydata, Nach Alter sortiert ]]

Auch können wir einzelne Variablen des Objektes noch zusätzlich beschreiben:

[[ core.data: describe, mydata.mugshot, Clicken zum vergrössern ]]

Als nächstes müssen wir natürlich das Objekt mit Daten füllen, das sieht wie folgt aus:

[[ core.data: add, mydata->muster, name: Muster, prename: Tanja, age: 34, mugshot: ]]

[[ core.data: add, mydata->beispiel, name: Beispiel, prename: Vreni, age: 45, mugshot: ]]

[[ core.data: add, mydata->meier, name: Meier, prename: Lucy, age: 23, mugshot: ]]

Die Variable "mughshot" habe ich absichtlich leer gelassen, da ich so eine weitere Möglichkeit Daten in das Objekt zu schreiben demonstrieren kann, nämlich indem ich eine CoreMarkup Ausgabe direkt über die Objekt Bezeichnung in das Objekt fülle, was besonders bei Bildern die Arbeit sehr erleichtert:

[[ $mydata->muster.mugshot core.dbimg: cg_girl_09.jpg, 125px, - ]]

[[ $mydata->beispiel.mugshot core.dbimg: cg_girl_04.jpg, 125px, - ]]

[[ $mydata->meier.mugshot core.dbimg: cg_girl_13.jpg, 125px, - ]]

Befor wir die Daten nun als Tabelle ausgeben, stylen wir noch das erste Element, den Namen, damit der speziell hervorgehoben wird:

[[ core.data: style, mydata, name: tag->strong ]]

Mann könnte auch CSS verwenden, um das selbe zu erreichen indem man eine Class verwendet:

[[ core.data: style, mydata, name: class->namestyle ]]

Nun ist es Zeit die Daten in einer Tabelle auszugeben, die die einzelnen Einträge nach Alter sortieren soll:

[[ core.data: display, mydata, table sort by age ]]

Daten können natürlich nicht nur als Tabelle ausgegeben werden, man kann auch die einzelnen Variablen des Objektes wie bei normalen Variablen auch, in anderen CoreMarkups verwenden, wie es auch möglich ist normale Variablen zu verwenden um ein Daten Objekt zu füllen.

Hier noch das komplette Script für die Beispiel Tabelle:

[[ core.data: init, mydata, name: Name, prename: Vorname, age: Alter, mugshot: Photo ]]
 
[[ core.data: title, mydata, Personen ]]
[[ core.data: describe, mydata, Nach Alter sortiert ]]
 
[[ core.data: describe, mydata.mugshot, Clicken zum vergrössern ]]
 
[[ core.data: add, mydata->muster, name: Muster, prename: Tanja, age: 34, mugshot: ]]
[[ core.data: add, mydata->beispiel, name: Beispiel, prename: Vreni, age: 45, mugshot: ]]
[[ core.data: add, mydata->meier, name: Meier, prename: Lucy, age: 23, mugshot: ]]
 
[[ $mydata->muster.mugshot core.dbimg: cg_girl_09.jpg, 125px, - ]]
[[ $mydata->beispiel.mugshot core.dbimg: cg_girl_04.jpg, 125px, - ]]
[[ $mydata->meier.mugshot core.dbimg: cg_girl_13.jpg, 125px, - ]]
 
[[ core.data: style, mydata, name: tag->strong ]]
 
[[ core.data: display, mydata, table sort by age ]]

Jeden Tag die gleiche Werbung einblenden muss nicht sein, mit ein wenig CoreMarkup und Kreativität kann man die ganze Sache auch interessanter gestalten. Natürlich könnten wir wie beim Beispiel mit den zufälligen Headerbildern vorgehen, aber es geht auch ohne Zufall, es ist nämlich möglich für jeden Wochentag ein separates Bild anzuzeigen. Als Erstes brauchen wir natürlich sieben unterschiedliche, auf die jeweiligen Wochentage abgestimmte Werbe-Banner. Hier zwei Beispiele:

Für jedes Bild erstellen wir nun eine eigene Variable, hier jene für den Montag:

[[ $adMontag core.dbimg: freelancer_ad_montag.gif, 48%, -, kontakt-de.html ]]

Danach prüfen wir für jeden Tag ob Heute genau dieser ist, was für den Montag wie folgt aussieht:

[[ +$ad core.system: get, var, if (monday) adMontag ]]

Wichtig ist hier, dass wir mit dem "+" Zeichen vor dem Variabelnamen dem Script mitteilen, dass wir die Variable "$ad" nicht überschreiben, sondern an den bestehenden Inhalt der Variable Inhalt anhängen. Dies machen wir, weil nur der richtige Tag die Variable mit dem Werbe-Banner füllt, alle anderen Tage füllen die Variable einfach nur mit Nichts, was den Werbe-Banner wieder löschen würde, was wir natürlich nicht wollen.

Zum Schluss müssen wir noch den Inhalt der Variablen "$ad", die ja jetzt den richtigen Banner enthält, auf der Seite einfügen, und zwar nicht einfach irgendwo, sondern genau zwischen dem ersten und zweiten Blog Eintrag. Dies erreichen wir indem wir einen speziellen HTML Kommentar den das News Modul erzeugt ersetzen, der genau für solch einen Fall gedacht ist. Hier das CoreMarkup dafür:

[[ core.system: replace, main->news: <!-- news fullhtml split marker #2 -->, $ad ]]

Das komplette CoreMarkup wird als CoreScript ausgeführt, natürlich nur auf der News Seite. Hier das komplette CoreMarkup wie ich es verwende (Achtung, ich verwende HTML anstelle des Bilder Coremarkups damit ich die Darstellung zusätzlich noch mit CSS steuern kann):

[[ core.system: set, var, adMontag = <div class="ads"><a href="kontakt-de.html"><img src="cmsdata/uploads/pics/freelancer_ad_montag.gif"></a></div> ]]
[[ core.system: set, var, adDienstag = <div class="ads"><a href="kontakt-de.html"><img src="cmsdata/uploads/pics/freelancer_ad_dienstag.gif"></a></div> ]]
[[ core.system: set, var, adMittwoch = <div class="ads"><a href="kontakt-de.html"><img src="cmsdata/uploads/pics/freelancer_ad_mittwoch.gif"></a></div> ]]
[[ core.system: set, var, adDonnerstag = <div class="ads"><a href="kontakt-de.html"><img src="cmsdata/uploads/pics/freelancer_ad_donnerstag.gif"></a></div> ]]
[[ core.system: set, var, adFreitag = <div class="ads"><a href="kontakt-de.html"><img src="cmsdata/uploads/pics/freelancer_ad_freitag.gif"></a></div> ]]
[[ core.system: set, var, adSamstag = <div class="ads"><a href="kontakt-de.html"><img src="cmsdata/uploads/pics/freelancer_ad_samstag.gif"></a></div> ]]
[[ core.system: set, var, adSonntag = <div class="ads"><a href="kontakt-de.html"><img src="cmsdata/uploads/pics/freelancer_ad_sonntag.gif"></a></div> ]]
[[ $ad core.system: get, var, if (monday) adMontag ]]
[[ +$ad core.system: get, var, if (tuesday) adDienstag ]]
[[ +$ad core.system: get, var, if (wednesday) adMittwoch ]]
[[ +$ad core.system: get, var, if (thursday) adDonnerstag ]]
[[ +$ad core.system: get, var, if (friday) adFreitag ]]
[[ +$ad core.system: get, var, if (saturday) adSamstag ]]
[[ +$ad core.system: get, var, if (sunday) adSonntag ]]
[[ core.system: replace, main->news: <!-- news fullhtml split marker #2 -->, $ad ]]

CoreNeo erlaubt es auf jeder Seite ein unterschiedliches Headerbild anzuzeigen, aber was wenn auf jeder Seite ein zufälliges Headerbild aus einer Auswahl an Bildern verwendet werden soll? Bisher war das nur durch ein zusätzliches PHP Script im Template möglich, aber jetzt geht das auch mit CoreMarkup.

Als erstes müssen wir die einzelnen Bilder hochladen. Für ein optimales Resultat am besten Bilder die schon in der richtigen Grösse vorliegen und nicht solche die durch ein Bilder-CoreMarkup noch zusätzlich bearbeitet werden muss.

Danach erstellen wir ein CoreScript das auf allen Seiten ausgeführt wird und ein CoreMarkup enthält. Die einzelnen Bilder speichern wir zuerst in eine Variable, hier ein Beispiel:

[[ $hpic1 core.dbimg: hpic_photo_1.jpg, -, -, - ]]

Falls die Bilder nicht in der richtigen Grösse (550x200) vorliegen, würde das CoreMarkup wie folgt aussehen:

[[ $hpic1 core.dbimg: hpic_photo_1.jpg, 550px|550:200, -, - ]]

Nachdem alle Bilder in eine separate Variable gespeichert wurden, benutze ich ein CoreMarkup das aus einer Auswahl mehrerer Variablen eine zufällige auswählt und diese in eine neue Variable schreibt, was wie folgt aussieht:

[[ $hpic core.system: get, var, hpic1|hpic2|hpic3 ]]

Als letztes überschreiben wir das normalerweise angezeigte Headerbild mit diesem Neuen zufällig gewählten:

[[ core.system: overwrite, hpic->default, $hpic ]]

Und schon haben wir wie auf dieser Seite eine zufällige Headerbild Auswahl. Hier das komplette CoreMarkup wie ich es auf meiner Seite verwende:

[[ $hpic1 core.dbimg: hpic_photo_1.jpg, -, -, - ]]
[[ $hpic2 core.dbimg: hpic_photo_2.jpg, -, -, - ]]
[[ $hpic3 core.dbimg: hpic_photo_3.jpg, -, -, - ]]
[[ $hpic4 core.dbimg: hpic_photo_4.jpg, -, -, - ]]
[[ $hpic5 core.dbimg: hpic_photo_5.jpg, -, -, - ]]
[[ $hpic6 core.dbimg: hpic_photo_6.jpg, -, -, - ]]
[[ $hpic7 core.dbimg: hpic_photo_7.jpg, -, -, - ]]
[[ $hpic8 core.dbimg: hpic_photo_8.jpg, -, -, - ]]
[[ $hpic9 core.dbimg: hpic_photo_9.jpg, -, -, - ]]
[[ $hpic core.system: get, var, hpic1|hpic2|hpic3|hpic4|hpic5|hpic6|hpic7|hpic8|hpic9 ]]
[[ core.system: overwrite, hpic->default, $hpic ]]

Wie versprochen hier nun die Anleitung zur Sprechblase die ich über meinem Kontakt Menü-Link eingefügt habe. Die Sprechblase ist ein einfaches Bild das ich in Photoshop erstellt und dann ins CMS hochgeladen habe. Es sieht wie folgt aus:

Damit ich nun dieses Bild auf jeder Seite über dem Kontakt Menü-Link einfügen kann, muss ich ein neues CoreScript erstellen, das mit Hilfe von CoreMarkup das Bild ins Menü einfügt. Hier ein Screenshot des CoreScript:

Hier das komplette CoreMarkup:

[[ $contactbubble core.dbimg: contact_bubble.gif, -, - ]]
[[ core.system: set, var, linebreak = <br /> ]]
[[ +$contactbubble core.system: get, var, linebreak ]]
[[ core.navigation: prepend, mainmenu->kontakt-de, $contactbubble ]]

In der ersten Zeile benutze ich das gleiche CoreMarkup, das ich verwenden würde um das Bild im Seiteninhalt einzufügen, jedoch mit dem Unterschied, dass ich die Ausgabe nicht anzeige, sondern in eine Variable "$contactbubble" speichere. In den nächsten zwei Zeilen füge ich der Variablen noch einen Zeilenumbruch hinzu. In der letzten Zeile benutze ich nun das neue "core.navigation" CoreMarkup um den Inhalt der Variablen vor den Inhalt des "Kontakt" Links zu setzen ... und schon haben wir die Sprechblase über dem Menü-Link! Cool, oder?

Bisher war das CoreNeo Menü-System intern sehr einfach aufgebaut. Im Prinzip wurde das Menü vom Script zusammengesetzt und dann als einzelner Block an das Cotentarea-Array weitergegeben. Das Footer- und Sprachen-Menü war ein bisschen flexibler, indem Module zusätzliche Links hinzufügen konnten da jeder einzelne Link ein separates Element im Contentarea-Array war, aber immer noch nicht flexibel genug.

Das ist jetzt alles Vergangenheit. Jegliche Menü-Links werden jetzt in einem eigenen Array verwaltet, egal ob es ein Link des eigentlichen Hauptmenüs ist, der Srachwahl, der Fusszeile oder eines zusätzlichen Menüs eines erweiterten Designs. Zusätzlich erlaubt jetzt ein neues CoreMarkup auf sehr flexible Art und Weise das Verändern dieses Arrays nachdem es durch das Script und die Module gefüllt wurde. Hier ein Überblick der einzelnen Methoden dieses neuen "Navigation" CoreMarkups:

Insert

[[ core.navigation: insert, newkey after pagekey-de in mainmenu, Inhalt ]]
Erlaubt das zusätzliche Einfügen von Menü-Links (muss nicht zwingend ein Link sein).

Remove

[[ core.navigation: remove, pagekey-de from mainmenu ]]
Entfernt einen Link aus einem Menü.

Rename

[[ core.navigation: rename, mainmenu->pagekey-de, Neuer Name ]]
Gibt einem Link einen neuen Namen.

Relink

[[ core.navigation: relink, mainmenu->pagekey-de, http://domain.ch ]]
Ändert die URL des Links.

Overwrite

[[ core.navigation: overwrite, mainmenu->pagekey-de, Neuer Inhalt ]]
Überschreibt einen bestehenden Link mit neuem Inhalt.

Append

[[ core.navigation: append, mainmenu->pagekey-de, Zusätzlicher Inhalt ]]
Fügt neuen Inhalt nach dem Link ein (im selben Element).

Prepend

[[ core.navigation: prepend, mainmenu->pagekey-de, Zusätzlicher Inhalt ]]
Fügt neuen Inhalt vor dem Link ein (im selben Element).

Merge

[[ core.navigation: merge, footer into mainmenu, bottom ]]
Fügt zwei Menüs zusammen.

Move

[[ core.navigation: move, mainmenu->pagekey-de into footer, top ]]
Bewegt einen Link in ein neues Menü.

Arrange

[[ core.navigation: arrange, mainmenu->pagekey-de, top ]]
Bewegt einen Link an die oberste oder unterste Stelle in einem Menü.

In den nächsten Tagen werde ich anhand verschiedener Beispiele die Funktionsweise der einzelnen CoreMarkups genauer erklären, zum Beispiel auch wie ich auf meiner Seite die Sprechblase über dem "Kontakt" Link hinzugefügt habe.